EVG-19891: Add project health view setting (#1874)

evergreen-ci · Jun 6, 2023 · 5b22e27 · 5b22e27
1 parent a1c9ac0
commit 5b22e27
Show file tree

Hide file tree

Showing 16 changed files with 192 additions and 22 deletions.
diff --git a/cypress/integration/projectSettings/views_and_filters.ts b/cypress/integration/projectSettings/views_and_filters.ts
@@ -45,4 +45,17 @@ describe("Views & filters page", () => {
       cy.dataCy("parsley-filter-list").children().should("have.length", 2);
     });
   });
+
+  describe("project view", () => {
+    it("updates field to 'all' view and back to 'default'", () => {
+      cy.getInputByLabel("All tasks view").click({ force: true });
+      clickSave();
+      cy.validateToast("success", "Successfully updated project");
+      cy.getInputByLabel("All tasks view").should("be.checked");
+
+      cy.getInputByLabel("Default view").click({ force: true });
+      clickSave();
+      cy.validateToast("success", "Successfully updated project");
+    });
+  });
 });
diff --git a/src/components/SettingsCard.tsx b/src/components/SettingsCard.tsx
@@ -4,7 +4,7 @@ import { H3, H3Props } from "@leafygreen-ui/typography";
 import { size } from "constants/tokens";
 
 export const SettingsCardTitle = styled(H3)<H3Props>`
-  margin: ${size.m} 0;
+  margin: ${size.m} 0 ${size.s} 0;
 `;
 
 export const formComponentSpacingCSS = "margin-bottom: 48px;";

diff --git a/src/components/SpruceForm/Container.tsx b/src/components/SpruceForm/Container.tsx
@@ -1,20 +1,23 @@
 import { SettingsCard, SettingsCardTitle } from "components/SettingsCard";
 
 interface ContainerProps {
-  title?: string;
-  id?: string;
-  "data-cy"?: string;
   children: React.ReactNode;
+  "data-cy"?: string;
+  description?: React.ReactNode;
+  id?: string;
+  title?: string;
 }
 
 export const SpruceFormContainer: React.VFC<ContainerProps> = ({
   children,
   "data-cy": dataCy,
+  description,
   id,
   title,
 }) => (
   <div>
     {title && <SettingsCardTitle id={id}>{title}</SettingsCardTitle>}
+    {description}
     <SettingsCard data-cy={dataCy}>{children}</SettingsCard>
   </div>
 );
diff --git a/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx b/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx
@@ -53,19 +53,36 @@ export const ObjectFieldTemplate = ({
  * `CardFieldTemplate` is a custom ObjectFieldTemplate that renders a card with a title and a list of properties.
  */
 export const CardFieldTemplate: React.VFC<ObjectFieldTemplateProps> = ({
+  DescriptionField,
   idSchema,
   properties,
+  schema,
   title,
-  uiSchema: { "ui:title": uiTitle, "ui:data-cy": dataCy },
-}) => (
-  <SpruceFormContainer
-    title={uiTitle || title}
-    id={`${idSchema.$id}__title`}
-    data-cy={dataCy}
-  >
-    {properties.map((prop) => prop.content)}
-  </SpruceFormContainer>
-);
+  uiSchema: {
+    "ui:data-cy": dataCy,
+    "ui:description": uiDescription,
+    "ui:title": uiTitle,
+  },
+}) => {
+  const description = uiDescription || schema.description;
+  return (
+    <SpruceFormContainer
+      title={uiTitle || title}
+      id={`${idSchema.$id}__title`}
+      data-cy={dataCy}
+      description={
+        description && (
+          <DescriptionField
+            id={`${idSchema.$id}__description`}
+            description={description}
+          />
+        )
+      }
+    >
+      {properties.map((prop) => prop.content)}
+    </SpruceFormContainer>
+  );
+};
 
 /**
  * `AccordionFieldTemplate` is a custom ObjectFieldTemplate that renders an accordion with a title and a list of properties.

diff --git a/src/components/SpruceForm/SpruceForm.test.tsx b/src/components/SpruceForm/SpruceForm.test.tsx
@@ -306,6 +306,54 @@ describe("spruce form", () => {
         ).toHaveStyle("cursor: not-allowed");
       });
     });
+
+    describe("radio group", () => {
+      it("renders 3 inputs with the specified default selected", () => {
+        const { formData, schema, uiSchema } = radioGroup;
+        const onChange = jest.fn();
+        render(
+          <SpruceForm
+            schema={schema}
+            formData={formData}
+            onChange={onChange}
+            uiSchema={uiSchema}
+          />
+        );
+
+        expect(screen.getAllByRole("radio")).toHaveLength(3);
+        expect(screen.getByLabelText("New York")).toBeChecked();
+      });
+
+      it("disables options in enumDisabled", () => {
+        const { formData, schema, uiSchema } = radioGroup;
+        const onChange = jest.fn();
+        render(
+          <SpruceForm
+            schema={schema}
+            formData={formData}
+            onChange={onChange}
+            uiSchema={uiSchema}
+          />
+        );
+
+        expect(screen.getByLabelText("Connecticut")).toBeDisabled();
+      });
+
+      it("shows option descriptions", () => {
+        const { formData, schema, uiSchema } = radioGroup;
+        const onChange = jest.fn();
+        render(
+          <SpruceForm
+            schema={schema}
+            formData={formData}
+            onChange={onChange}
+            uiSchema={uiSchema}
+          />
+        );
+
+        expect(screen.getByText("The Garden State")).toBeVisible();
+      });
+    });
   });
 });
 
@@ -448,3 +496,41 @@ const select = {
     },
   },
 };
+
+const radioGroup = {
+  formData: {},
+  schema: {
+    type: "object" as "object",
+    properties: {
+      states: {
+        type: "string" as "string",
+        title: "Tri-state Area",
+        default: "ny",
+        oneOf: [
+          {
+            type: "string" as "string",
+            title: "New York",
+            enum: ["ny"],
+          },
+          {
+            type: "string" as "string",
+            title: "New Jersey",
+            description: "The Garden State",
+            enum: ["nj"],
+          },
+          {
+            type: "string" as "string",
+            title: "Connecticut",
+            enum: ["ct"],
+          },
+        ],
+      },
+    },
+  },
+  uiSchema: {
+    states: {
+      "ui:enumDisabled": ["ct"],
+      "ui:widget": "radio",
+    },
+  },
+};
diff --git a/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx b/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
@@ -233,11 +233,13 @@ export const LeafyGreenRadio: React.VFC<EnumSpruceWidgetProps> = ({
       >
         {enumOptions.map((o) => {
           const optionDisabled = enumDisabled?.includes(o.value) ?? false;
+          const { description } = o.schema ?? {};
           return (
             <Radio
               key={o.value}
               value={o.value}
               disabled={disabled || optionDisabled}
+              description={description}
             >
               {o.label}
             </Radio>

diff --git a/src/components/SpruceForm/Widgets/types.ts b/src/components/SpruceForm/Widgets/types.ts
@@ -1,6 +1,7 @@
 import { SerializedStyles } from "@emotion/react";
 import { TextInputType } from "@leafygreen-ui/text-input";
 import { WidgetProps } from "@rjsf/core";
+import { SpruceFormProps } from "components/SpruceForm/types";
 
 export interface SpruceWidgetProps extends WidgetProps {
   options: Partial<{
@@ -24,6 +25,7 @@ export type EnumSpruceWidgetProps = {
   options: {
     enumDisabled: string[];
     enumOptions: Array<{
+      schema?: SpruceFormProps["schema"];
       label: string;
       value: string;
     }>;

diff --git a/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot b/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot
@@ -4,7 +4,7 @@ exports[`storybook Storyshots components/SpruceForm Example 1 1`] = `
 <div>
   <div>
     <h3
-      class="css-1d9n1kx-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
+      class="css-18p6yz-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
     >
       Distro Projects
     </h3>
@@ -316,7 +316,7 @@ exports[`storybook Storyshots components/SpruceForm Example 2 1`] = `
 <div>
   <div>
     <h3
-      class="css-1d9n1kx-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
+      class="css-18p6yz-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
     >
       Admin Options
     </h3>
@@ -645,7 +645,7 @@ exports[`storybook Storyshots components/SpruceForm Example 3 1`] = `
 <div>
   <div>
     <h3
-      class="css-1d9n1kx-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
+      class="css-18p6yz-SettingsCardTitle e1h7idos1 leafygreen-ui-feh85s"
     >
       UI Options
     </h3>

diff --git a/src/gql/fragments/projectSettings/viewsAndFilters.graphql b/src/gql/fragments/projectSettings/viewsAndFilters.graphql
@@ -4,4 +4,5 @@ fragment ProjectViewsAndFiltersSettings on Project {
     exactMatch
     expression
   }
+  projectHealthView
 }
diff --git a/src/gql/generated/types.ts b/src/gql/generated/types.ts
@@ -3083,6 +3083,7 @@ export type ProjectSettingsFieldsFragment = {
     notifyOnBuildFailure?: boolean | null;
     githubTriggerAliases?: Array<string> | null;
     perfEnabled?: boolean | null;
+    projectHealthView: ProjectHealthView;
     githubChecksEnabled?: boolean | null;
     gitTagAuthorizedTeams?: Array<string> | null;
     gitTagAuthorizedUsers?: Array<string> | null;
@@ -3857,6 +3858,7 @@ export type VariablesFragment = {
 
 export type ProjectViewsAndFiltersSettingsFragment = {
   __typename?: "Project";
+  projectHealthView: ProjectHealthView;
   parsleyFilters?: Array<{
     __typename?: "ParsleyFilter";
     caseSensitive: boolean;
@@ -6215,6 +6217,7 @@ export type ProjectSettingsQuery = {
       notifyOnBuildFailure?: boolean | null;
       githubTriggerAliases?: Array<string> | null;
       perfEnabled?: boolean | null;
+      projectHealthView: ProjectHealthView;
       githubChecksEnabled?: boolean | null;
       gitTagAuthorizedTeams?: Array<string> | null;
       gitTagAuthorizedUsers?: Array<string> | null;

diff --git a/src/pages/projectSettings/CopyProjectModal.test.tsx b/src/pages/projectSettings/CopyProjectModal.test.tsx
@@ -4,6 +4,7 @@ import { RenderFakeToastContext } from "context/toast/__mocks__";
 import {
   CopyProjectMutation,
   CopyProjectMutationVariables,
+  ProjectHealthView,
   ProjectSettingsQuery,
   ProjectSettingsQueryVariables,
   RepoSettingsQuery,
@@ -326,6 +327,7 @@ const projectSettingsMock: ApolloMock<
             },
           ],
           periodicBuilds: [],
+          projectHealthView: ProjectHealthView.Failed,
           prTestingEnabled: true,
           manualPrTestingEnabled: null,
           githubChecksEnabled: false,

diff --git a/src/pages/projectSettings/tabs/ViewsAndFiltersTab/getFormSchema.ts b/src/pages/projectSettings/tabs/ViewsAndFiltersTab/getFormSchema.ts
@@ -1,15 +1,39 @@
 import { CardFieldTemplate } from "components/SpruceForm/FieldTemplates";
 import widgets from "components/SpruceForm/Widgets";
+import { ProjectHealthView } from "gql/generated/types";
 import { GetFormSchema } from "../types";
 
 export const getFormSchema = (): ReturnType<GetFormSchema> => ({
   fields: {},
   schema: {
     type: "object" as "object",
     properties: {
-      projectHealthView: {
+      view: {
         title: "Project Health View",
         type: "object" as "object",
+        description:
+          "This setting will define the default behavior of the Project Health page for all viewers of this project. Users can still toggle between views.",
+        properties: {
+          projectHealthView: {
+            type: "string" as "string",
+            oneOf: [
+              {
+                type: "string" as "string",
+                title: "Default view",
+                enum: [ProjectHealthView.Failed],
+                description:
+                  "Displays only task failures, making it easier to identify them, and groups tasks by status if they don't match any search criteria. Consider using it for troubleshooting specific issues.",
+              },
+              {
+                type: "string" as "string",
+                title: "All tasks view",
+                enum: [ProjectHealthView.All],
+                description:
+                  "Displays all tasks without grouping. This view can be helpful for getting a comprehensive overview of all tasks.",
+              },
+            ],
+          },
+        },
       },
       parsleyFilters: {
         title: "Parsley Filters",
@@ -65,8 +89,11 @@ export const getFormSchema = (): ReturnType<GetFormSchema> => ({
     },
   },
   uiSchema: {
-    projectHealthView: {
+    view: {
       "ui:ObjectFieldTemplate": CardFieldTemplate,
+      projectHealthView: {
+        "ui:widget": "radio",
+      },
     },
     parsleyFilters: {
       "ui:addButtonText": "Add filter",

diff --git a/src/pages/projectSettings/tabs/ViewsAndFiltersTab/transformers.test.ts b/src/pages/projectSettings/tabs/ViewsAndFiltersTab/transformers.test.ts
@@ -1,4 +1,4 @@
-import { ProjectSettingsInput } from "gql/generated/types";
+import { ProjectHealthView, ProjectSettingsInput } from "gql/generated/types";
 import { data } from "../testData";
 import { formToGql, gqlToForm } from "./transformers";
 import { FormState } from "./types";
@@ -30,6 +30,9 @@ const projectForm: FormState = {
       exactMatch: false,
     },
   ],
+  view: {
+    projectHealthView: ProjectHealthView.Failed,
+  },
 };
 
 const projectResult: Pick<ProjectSettingsInput, "projectRef"> = {
@@ -47,5 +50,6 @@ const projectResult: Pick<ProjectSettingsInput, "projectRef"> = {
         exactMatch: false,
       },
     ],
+    projectHealthView: ProjectHealthView.Failed,
   },
 };