ui: refactor schedules page to use useSWR hook

- Refactors the schedules page to use `useSwrWithClusterId` instead
  of redux sagas to fetch data.
- Removed show and status props from being stored in redux and
  browser session.
- Deleted schedules page story book

Epic: None
Release note: None

Author: kyle-a-wong

pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx

@@ -141,7 +141,7 @@ export const Loading = (props: React.PropsWithChildren<LoadingProps>) => {
   }
   if (props.loading) {
     return (
-      <div>
+      <div data-testid={"loading-spinner"}>
         <Spinner className={cx("loading-indicator", props.loadingClassName)} />
       </div>
     );

pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/schedulesPage.fixture.tsx

@@ -2,17 +2,9 @@
 //
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
-import { createMemoryHistory } from "history";
 import Long from "long";
 import moment from "moment-timezone";
 
-import { Schedule } from "src/api/schedulesApi";
-
-import { SchedulesPageProps } from "./schedulesPage";
-
-const schedulesTimeoutErrorMessage =
-  "Unable to retrieve the Schedules table. To reduce the amount of data, try filtering the table.";
-
 const defaultScheduleProperties = {
   owner: "root",
   created: moment("15 Aug 2022"),
@@ -44,59 +36,3 @@ export const allSchedulesFixture = [
   activeScheduleFixture,
   pausedScheduleFixture,
 ];
-
-const history = createMemoryHistory({ initialEntries: ["/statements"] });
-
-const staticScheduleProps: Omit<
-  SchedulesPageProps,
-  "schedules" | "schedulesError" | "schedulesLoading" | "onFilterChange"
-> = {
-  history,
-  location: {
-    pathname: "/schedules",
-    search: "",
-    hash: "",
-    state: null,
-  },
-  match: {
-    path: "/schedules",
-    url: "/schedules",
-    isExact: true,
-    params: "{}",
-  },
-  sort: {
-    columnTitle: "creationTime",
-    ascending: false,
-  },
-  status: "",
-  show: "50",
-  setSort: () => {},
-  setStatus: () => {},
-  setShow: () => {},
-  refreshSchedules: () => null,
-};
-
-const getSchedulesPageProps = (
-  schedules: Array<Schedule>,
-  error: Error | null = null,
-  loading = false,
-): SchedulesPageProps => ({
-  ...staticScheduleProps,
-  schedules,
-  schedulesError: error,
-  schedulesLoading: loading,
-});
-
-export const withData: SchedulesPageProps =
-  getSchedulesPageProps(allSchedulesFixture);
-export const empty: SchedulesPageProps = getSchedulesPageProps([]);
-export const loading: SchedulesPageProps = getSchedulesPageProps(
-  allSchedulesFixture,
-  null,
-  true,
-);
-export const error: SchedulesPageProps = getSchedulesPageProps(
-  allSchedulesFixture,
-  new Error(schedulesTimeoutErrorMessage),
-  false,
-);

pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/schedulesPage.spec.tsx

@@ -8,26 +8,16 @@ import * as H from "history";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
 
-import { Schedule } from "src/api/schedulesApi";
+import * as utils from "src/util/hooks";
 
 import { SchedulesPage, SchedulesPageProps } from "./schedulesPage";
 import { allSchedulesFixture } from "./schedulesPage.fixture";
 
-const getMockSchedulesPageProps = (
-  schedules: Array<Schedule>,
-): SchedulesPageProps => {
+const getMockSchedulesPageProps = (): SchedulesPageProps => {
   const history = H.createHashHistory();
   return {
     sort: { columnTitle: null, ascending: true },
-    status: "",
-    show: "50",
     setSort: () => {},
-    setStatus: () => {},
-    setShow: () => {},
-    schedules: schedules,
-    schedulesLoading: false,
-    schedulesError: null,
-    refreshSchedules: () => {},
     location: history.location,
     history,
     match: {
@@ -40,10 +30,22 @@ const getMockSchedulesPageProps = (
 };
 
 describe("Schedules", () => {
+  let spy: jest.MockInstance<any, any>;
+  afterEach(() => {
+    spy.mockClear();
+  });
+
   it("renders expected schedules table columns", () => {
+    spy = jest.spyOn(utils, "useSwrWithClusterId").mockReturnValue({
+      data: allSchedulesFixture,
+      isLoading: false,
+      error: null,
+      mutate: null,
+      isValidating: false,
+    });
     const { getByText } = render(
       <MemoryRouter>
-        <SchedulesPage {...getMockSchedulesPageProps(allSchedulesFixture)} />
+        <SchedulesPage {...getMockSchedulesPageProps()} />
       </MemoryRouter>,
     );
     const expectedColumnTitles = [
@@ -60,14 +62,57 @@ describe("Schedules", () => {
     for (const columnTitle of expectedColumnTitles) {
       getByText(columnTitle);
     }
+    spy.mockClear();
   });
 
   it("renders a message when the table is empty", () => {
+    spy = jest.spyOn(utils, "useSwrWithClusterId").mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      mutate: null,
+      isValidating: false,
+    });
+
     const { getByText } = render(
       <MemoryRouter>
-        <SchedulesPage {...getMockSchedulesPageProps([])} />
+        <SchedulesPage {...getMockSchedulesPageProps()} />
       </MemoryRouter>,
     );
     getByText("No schedules to show");
   });
+
+  it("renders an error message when there is an error retrieving data", () => {
+    spy = jest.spyOn(utils, "useSwrWithClusterId").mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: new Error("Error retrieving data"),
+      mutate: null,
+      isValidating: false,
+    });
+
+    const { getByText } = render(
+      <MemoryRouter>
+        <SchedulesPage {...getMockSchedulesPageProps()} />
+      </MemoryRouter>,
+    );
+    getByText("Error retrieving data");
+  });
+
+  it("renders a loading spinner when data is still loading", () => {
+    spy = jest.spyOn(utils, "useSwrWithClusterId").mockReturnValue({
+      data: [],
+      isLoading: true,
+      error: null,
+      mutate: null,
+      isValidating: false,
+    });
+
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <SchedulesPage {...getMockSchedulesPageProps()} />
+      </MemoryRouter>,
+    );
+    getByTestId("loading-spinner");
+  });
 });

pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/schedulesPage.stories.tsx

@@ -5,18 +5,18 @@
 import { InlineAlert } from "@cockroachlabs/ui-components";
 import classNames from "classnames/bind";
 import moment from "moment-timezone";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { RouteComponentProps } from "react-router-dom";
 
-import { Schedules } from "src/api/schedulesApi";
+import { getSchedules } from "src/api/schedulesApi";
 import { commonStyles } from "src/common";
 import { Delayed } from "src/delayed";
 import { Dropdown } from "src/dropdown";
 import { Loading } from "src/loading";
 import { PageConfig, PageConfigItem } from "src/pageConfig";
 import { SortSetting } from "src/sortedtable";
-import { syncHistory } from "src/util";
+import { syncHistory, useSwrWithClusterId } from "src/util";
 
 import styles from "../schedules.module.scss";
 
@@ -27,37 +27,18 @@ const cx = classNames.bind(styles);
 
 export interface SchedulesPageStateProps {
   sort: SortSetting;
-  status: string;
-  show: string;
-  schedules: Schedules;
-  schedulesError: Error | null;
-  schedulesLoading: boolean;
 }
 
 export interface SchedulesPageDispatchProps {
   setSort: (value: SortSetting) => void;
-  setStatus: (value: string) => void;
-  setShow: (value: string) => void;
-  refreshSchedules: (req: { status: string; limit: number }) => void;
-  onFilterChange?: (req: { status: string; limit: number }) => void;
 }
 
 export type SchedulesPageProps = SchedulesPageStateProps &
   SchedulesPageDispatchProps &
   RouteComponentProps;
 
 export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
-  const {
-    history,
-    onFilterChange,
-    refreshSchedules,
-    status,
-    setStatus,
-    show,
-    setShow,
-    sort,
-    setSort,
-  } = props;
+  const { history, sort, setSort } = props;
   const searchParams = new URLSearchParams(history.location.search);
 
   // Sort Settings.
@@ -71,11 +52,14 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
     setSort({ columnTitle, ascending });
   }, [setSort, columnTitle, ascending]);
 
+  const [status, setStatus] = useState(statusOptions[0].value);
+  const [show, setShow] = useState(showOptions[0].value);
+
   // Filter Status.
-  const paramStatus = searchParams.get("status") || undefined;
+  const paramStatus = searchParams.get("status");
   useEffect(() => {
     if (
-      paramStatus === undefined ||
+      !paramStatus ||
       statusOptions.find(option => option["value"] === paramStatus) ===
         undefined
     ) {
@@ -85,26 +69,26 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
   }, [paramStatus, setStatus]);
 
   // Filter Show.
-  const paramShow = searchParams.get("show") || undefined;
+  const paramShow = searchParams.get("show");
   useEffect(() => {
     if (
-      paramShow === undefined ||
+      !paramShow ||
       showOptions.find(option => option["value"] === paramShow) === undefined
     ) {
       return;
     }
     setShow(paramShow);
   }, [paramShow, setShow]);
 
-  useEffect(() => {
-    const req = {
-      status: status,
-      limit: parseInt(show, 10),
-    };
-
-    onFilterChange ? onFilterChange(req) : refreshSchedules(req);
-  }, [status, show, refreshSchedules, onFilterChange]);
-
+  const limit = parseInt(show) ?? 0;
+  const { data, error, isLoading } = useSwrWithClusterId(
+    {
+      name: "schedules",
+      status,
+      limit,
+    },
+    () => getSchedules({ status, limit }),
+  );
   const onStatusSelected = (item: string) => {
     setStatus(item);
     syncHistory(
@@ -136,8 +120,6 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
     );
   };
 
-  const isLoading = !props.schedules || props.schedulesLoading;
-  const error = props.schedulesError;
   return (
     <div className={cx("schedules-page")}>
       <Helmet title="Schedules" />
@@ -175,8 +157,8 @@ export const SchedulesPage: React.FC<SchedulesPageProps> = props => {
           error={error}
           render={() => (
             <ScheduleTable
-              isUsedFilter={status.length > 0}
-              schedules={props.schedules}
+              isUsedFilter={!!status}
+              schedules={data}
               setSort={changeSortSetting}
               sort={sort}
             />

pkg/ui/workspaces/cluster-ui/src/schedules/schedulesPage/schedulesPage.tsx

@@ -466,20 +466,6 @@ const schemaInsightsReducerObj = new CachedDataReducer(
 );
 export const refreshSchemaInsights = schemaInsightsReducerObj.refresh;
 
-export const schedulesKey = (req: { status: string; limit: number }) =>
-  `${encodeURIComponent(req.status)}/${encodeURIComponent(
-    req.limit?.toString(),
-  )}`;
-
-const schedulesReducerObj = new KeyedCachedDataReducer(
-  clusterUiApi.getSchedules,
-  "schedules",
-  schedulesKey,
-  moment.duration(10, "s"),
-  moment.duration(1, "minute"),
-);
-export const refreshSchedules = schedulesReducerObj.refresh;
-
 export const scheduleKey = (scheduleID: Long): string => scheduleID.toString();
 
 const scheduleReducerObj = new KeyedCachedDataReducer(
@@ -592,7 +578,6 @@ export interface APIReducersState {
   statementFingerprintInsights: KeyedCachedDataReducerState<
     clusterUiApi.SqlApiResponse<StmtInsightEvent[]>
   >;
-  schedules: KeyedCachedDataReducerState<clusterUiApi.Schedules>;
   schedule: KeyedCachedDataReducerState<clusterUiApi.Schedule>;
   snapshots: KeyedCachedDataReducerState<clusterUiApi.ListTracingSnapshotsResponse>;
   snapshot: KeyedCachedDataReducerState<clusterUiApi.GetTracingSnapshotResponse>;
@@ -644,7 +629,6 @@ export const apiReducersReducer = combineReducers<APIReducersState>({
     txnInsightDetailsReducerObj.reducer,
   [stmtInsightsReducerObj.actionNamespace]: stmtInsightsReducerObj.reducer,
   [schemaInsightsReducerObj.actionNamespace]: schemaInsightsReducerObj.reducer,
-  [schedulesReducerObj.actionNamespace]: schedulesReducerObj.reducer,
   [scheduleReducerObj.actionNamespace]: scheduleReducerObj.reducer,
   [snapshotsReducerObj.actionNamespace]: snapshotsReducerObj.reducer,
   [snapshotReducerObj.actionNamespace]: snapshotReducerObj.reducer,