fixes #5954 feat(nimbus): group home page experiment tabs by all stat…

…uses
mozilla · Jul 21, 2021 · f476c08 · f476c08
1 parent b9dfb11
commit f476c08
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 179 deletions.
diff --git a/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.stories.tsx b/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.stories.tsx
@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { withLinks } from "@storybook/addon-links";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import DirectoryTable, {
   DirectoryCompleteTable,
@@ -12,59 +11,42 @@ import DirectoryTable, {
 } from ".";
 import { mockDirectoryExperiments } from "../../../lib/mocks";
 
-storiesOf("pages/Home/DirectoryTable", module)
-  .addDecorator(withLinks)
-  .add("basic", () => {
-    return (
-      <DirectoryTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments()}
-      />
-    );
-  })
-  .add("live", () => {
-    return (
-      <DirectoryLiveTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments()}
-      />
-    );
-  })
-  .add("complete", () => {
-    return (
-      <DirectoryCompleteTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments()}
-      />
-    );
-  })
-  .add("drafts", () => {
-    return (
-      <DirectoryDraftsTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments()}
-      />
-    );
-  })
-  .add("custom components", () => {
-    return (
-      <DirectoryTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments()}
-        columns={[
-          {
-            label: "Testing column",
-            component: ({ status }) => <td>Hello {status}</td>,
-          },
-        ]}
-      />
-    );
-  })
-  .add("no feature", () => {
-    return (
-      <DirectoryTable
-        title="Mocked Experiments"
-        experiments={mockDirectoryExperiments([{ featureConfig: null }])}
-      />
-    );
-  });
+export default {
+  title: "pages/Home/DirectoryTable",
+  component: DirectoryTable,
+  decorators: [withLinks],
+};
+
+export const Basic = () => (
+  <DirectoryTable experiments={mockDirectoryExperiments()} />
+);
+
+export const Live = () => (
+  <DirectoryLiveTable experiments={mockDirectoryExperiments()} />
+);
+
+export const Completed = () => (
+  <DirectoryCompleteTable experiments={mockDirectoryExperiments()} />
+);
+
+export const Drafts = () => (
+  <DirectoryDraftsTable experiments={mockDirectoryExperiments()} />
+);
+
+export const CustomComponent = () => (
+  <DirectoryTable
+    experiments={mockDirectoryExperiments()}
+    columns={[
+      {
+        label: "Testing column",
+        component: ({ status }) => <td>Hello {status}</td>,
+      },
+    ]}
+  />
+);
+
+export const NoFeature = () => (
+  <DirectoryTable
+    experiments={mockDirectoryExperiments([{ featureConfig: null }])}
+  />
+);
diff --git a/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.test.tsx b/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.test.tsx
@@ -107,12 +107,8 @@ function expectTableCells(testId: string, cellTexts: string[]) {
 describe("DirectoryTable", () => {
   it("renders as expected with default columns", () => {
     const experiments = [experiment];
-    render(<DirectoryTable title="Woozle Wuzzle" {...{ experiments }} />);
-    expectTableCells("directory-table-header", [
-      "Woozle Wuzzle",
-      "Owner",
-      "Feature",
-    ]);
+    render(<DirectoryTable {...{ experiments }} />);
+    expectTableCells("directory-table-header", ["Name", "Owner", "Feature"]);
     expectTableCells("directory-table-cell", [
       experiment.name,
       experiment.owner!.username,
@@ -124,17 +120,13 @@ describe("DirectoryTable", () => {
   });
 
   it("renders as expected without experiments", () => {
-    render(<DirectoryTable title="Sweet Pea" experiments={[]} />);
-    expectTableCells("directory-table-header", ["Sweet Pea"]);
-    expect(
-      screen.getByTestId("directory-table-no-experiments"),
-    ).toBeInTheDocument();
+    render(<DirectoryTable experiments={[]} />);
+    expect(screen.getByTestId("no-experiments")).toBeInTheDocument();
   });
 
   it("renders as expected with custom columns", () => {
     render(
       <DirectoryTable
-        title="Record Numbers"
         experiments={[experiment]}
         columns={[
           { label: "Cant think", component: DirectoryColumnTitle },
@@ -157,14 +149,9 @@ describe("DirectoryTable", () => {
 
 describe("DirectoryLiveTable", () => {
   it("renders as expected with custom columns", () => {
-    render(
-      <DirectoryLiveTable
-        title="Live Experiments"
-        experiments={[experiment]}
-      />,
-    );
+    render(<DirectoryLiveTable experiments={[experiment]} />);
     expectTableCells("directory-table-header", [
-      "Live Experiments",
+      "Name",
       "Owner",
       "Feature",
       "Enrolling",
@@ -186,11 +173,9 @@ describe("DirectoryLiveTable", () => {
 
 describe("DirectoryCompleteTable", () => {
   it("renders as expected with custom columns", () => {
-    render(
-      <DirectoryCompleteTable title="Completed" experiments={[experiment]} />,
-    );
+    render(<DirectoryCompleteTable experiments={[experiment]} />);
     expectTableCells("directory-table-header", [
-      "Completed",
+      "Name",
       "Owner",
       "Feature",
       "Started",
@@ -210,8 +195,8 @@ describe("DirectoryCompleteTable", () => {
 
 describe("DirectoryDraftsTable", () => {
   it("renders as expected with custom columns", () => {
-    render(<DirectoryDraftsTable title="Drafts" experiments={[experiment]} />);
-    expectTableCells("directory-table-header", ["Drafts", "Owner", "Feature"]);
+    render(<DirectoryDraftsTable experiments={[experiment]} />);
+    expectTableCells("directory-table-header", ["Name", "Owner", "Feature"]);
     expectTableCells("directory-table-cell", [
       experiment.name,
       experiment.owner!.username,

diff --git a/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.tsx b/app/experimenter/nimbus-ui/src/components/PageHome/DirectoryTable/index.tsx
@@ -71,70 +71,49 @@ interface Column {
 }
 
 interface DirectoryTableProps {
-  title: string;
   experiments: getAllExperiments_experiments[];
   columns?: Column[];
 }
 
 const DirectoryTable: React.FunctionComponent<DirectoryTableProps> = ({
-  title,
   experiments,
   columns: customColumns,
 }) => {
   const columns = customColumns || [
-    { label: title, component: DirectoryColumnTitle },
+    { label: "Name", component: DirectoryColumnTitle },
     { label: "Owner", component: DirectoryColumnOwner },
     { label: "Feature", component: DirectoryColumnFeature },
   ];
   return (
-    <div className="directory-table pb-2" data-testid="DirectoryTable">
-      <table className="table">
-        <thead>
-          <tr>
-            {experiments.length ? (
-              columns.map(({ label }, i) => (
+    <div className="directory-table pb-2 mt-4">
+      {experiments.length ? (
+        <table className="table" data-testid="DirectoryTable">
+          <thead>
+            <tr>
+              {columns.map(({ label }, i) => (
                 <th
-                  className={`border-top-0 ${
-                    i === 0 ? "font-weight-bold" : "font-weight-normal"
-                  }`}
+                  className="border-top-0"
                   key={label}
                   data-testid="directory-table-header"
                 >
                   {label}
                 </th>
-              ))
-            ) : (
-              <th
-                colSpan={columns.length}
-                className="border-top-0 font-weight-bold"
-                data-testid="directory-table-header"
-              >
-                {columns[0].label}
-              </th>
-            )}
-          </tr>
-        </thead>
-        <tbody>
-          {experiments.length ? (
-            experiments.map((experiment) => (
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {experiments.map((experiment) => (
               <tr key={experiment.slug} data-testid="directory-table-row">
                 {columns.map(({ label, component: ColumnComponent }, i) => {
                   return <ColumnComponent key={label + i} {...experiment} />;
                 })}
               </tr>
-            ))
-          ) : (
-            <tr data-testid="directory-table-row">
-              <td
-                colSpan={columns.length}
-                data-testid="directory-table-no-experiments"
-              >
-                No experiments found.
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <p data-testid="no-experiments">No experiments found.</p>
+      )}
     </div>
   );
 };
@@ -143,7 +122,7 @@ export const DirectoryLiveTable: React.FC<DirectoryTableProps> = (props) => (
   <DirectoryTable
     {...props}
     columns={[
-      { label: props.title, component: DirectoryColumnTitle },
+      { label: "Name", component: DirectoryColumnTitle },
       { label: "Owner", component: DirectoryColumnOwner },
       { label: "Feature", component: DirectoryColumnFeature },
       {
@@ -204,7 +183,7 @@ export const DirectoryCompleteTable: React.FC<DirectoryTableProps> = (
   <DirectoryTable
     {...props}
     columns={[
-      { label: props.title, component: DirectoryColumnTitle },
+      { label: "Name", component: DirectoryColumnTitle },
       { label: "Owner", component: DirectoryColumnOwner },
       { label: "Feature", component: DirectoryColumnFeature },
       {
@@ -238,7 +217,7 @@ export const DirectoryDraftsTable: React.FC<DirectoryTableProps> = (props) => (
     {...props}
     columns={[
       {
-        label: props.title,
+        label: "Name",
         component: (experiment) => <DirectoryColumnTitle {...experiment} />,
       },
       { label: "Owner", component: DirectoryColumnOwner },

diff --git a/app/experimenter/nimbus-ui/src/components/PageHome/index.stories.tsx b/app/experimenter/nimbus-ui/src/components/PageHome/index.stories.tsx
@@ -3,41 +3,47 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { withLinks } from "@storybook/addon-links";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import PageHome from ".";
 import { mockDirectoryExperimentsQuery, MockedCache } from "../../lib/mocks";
 import { RouterSlugProvider } from "../../lib/test-utils";
 import { NimbusExperimentStatus } from "../../types/globalTypes";
 
-storiesOf("pages/Home", module)
-  .addDecorator(withLinks)
-  .add("basic", () => (
-    <RouterSlugProvider mocks={[mockDirectoryExperimentsQuery()]}>
-      <PageHome />
-    </RouterSlugProvider>
-  ))
-  .add("loading", () => (
-    <RouterSlugProvider mocks={[]}>
-      <PageHome />
-    </RouterSlugProvider>
-  ))
-  .add("no experiments", () => (
-    <MockedCache mocks={[mockDirectoryExperimentsQuery([])]}>
-      <PageHome />
-    </MockedCache>
-  ))
-  .add("only drafts", () => (
-    <MockedCache
-      mocks={[
-        mockDirectoryExperimentsQuery([
-          { status: NimbusExperimentStatus.DRAFT },
-          { status: NimbusExperimentStatus.DRAFT },
-          { status: NimbusExperimentStatus.DRAFT },
-          { status: NimbusExperimentStatus.DRAFT },
-        ]),
-      ]}
-    >
-      <PageHome />
-    </MockedCache>
-  ));
+export default {
+  title: "pages/Home",
+  component: PageHome,
+  decorators: [withLinks],
+};
+
+export const Basic = () => (
+  <RouterSlugProvider mocks={[mockDirectoryExperimentsQuery()]}>
+    <PageHome />
+  </RouterSlugProvider>
+);
+
+export const Loading = () => (
+  <RouterSlugProvider mocks={[]}>
+    <PageHome />
+  </RouterSlugProvider>
+);
+
+export const NoExperiments = () => (
+  <MockedCache mocks={[mockDirectoryExperimentsQuery([])]}>
+    <PageHome />
+  </MockedCache>
+);
+
+export const OnlyDrafts = () => (
+  <MockedCache
+    mocks={[
+      mockDirectoryExperimentsQuery([
+        { status: NimbusExperimentStatus.DRAFT },
+        { status: NimbusExperimentStatus.DRAFT },
+        { status: NimbusExperimentStatus.DRAFT },
+        { status: NimbusExperimentStatus.DRAFT },
+      ]),
+    ]}
+  >
+    <PageHome />
+  </MockedCache>
+);