From a0fcf2fb15cb431aceca5acda6d3f2b88724ce2c Mon Sep 17 00:00:00 2001
From: Pavel <pavel@invertase.io>
Date: Sun, 28 Apr 2024 23:06:48 -0700
Subject: [PATCH 1/4] feat: add support for scheduled emulator in config and UI

---
 firebase.json                                 |  3 +
 src/components/Home/index.tsx                 |  9 +++
 src/components/Scheduled/List/List.tsx        | 42 +++++++++++
 .../ScheduledTable/ScheduledTable.module.scss | 19 +++++
 .../List/ScheduledTable/ScheduledTable.tsx    | 42 +++++++++++
 .../ScheduledTableRow.module.scss             | 48 ++++++++++++
 .../List/ScheduledTable/ScheduledTableRow.tsx | 75 +++++++++++++++++++
 .../Scheduled/List/ZeroState.module.scss      | 23 ++++++
 src/components/Scheduled/List/ZeroState.tsx   | 33 ++++++++
 .../api/internal/useScheduledFunctions.tsx    | 51 +++++++++++++
 src/components/Scheduled/api/useScheduled.tsx | 36 +++++++++
 src/components/Scheduled/index.tsx            | 62 +++++++++++++++
 src/components/Scheduled/models.ts            | 25 +++++++
 src/components/common/icons.tsx               | 29 +++++++
 src/routes.ts                                 | 11 +++
 src/store/config/types.ts                     |  2 +
 16 files changed, 510 insertions(+)
 create mode 100644 src/components/Scheduled/List/List.tsx
 create mode 100644 src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss
 create mode 100644 src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
 create mode 100644 src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss
 create mode 100644 src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
 create mode 100644 src/components/Scheduled/List/ZeroState.module.scss
 create mode 100644 src/components/Scheduled/List/ZeroState.tsx
 create mode 100644 src/components/Scheduled/api/internal/useScheduledFunctions.tsx
 create mode 100644 src/components/Scheduled/api/useScheduled.tsx
 create mode 100644 src/components/Scheduled/index.tsx
 create mode 100644 src/components/Scheduled/models.ts

diff --git a/firebase.json b/firebase.json
index a3d95a51a..15db462f6 100644
--- a/firebase.json
+++ b/firebase.json
@@ -28,6 +28,9 @@
     },
     "pubsub": {
       "port": 8085
+    },
+    "scheduled": {
+      "port": 8086
     }
   },
   "extensions": {
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index a4af30800..b4be7ca3e 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -38,6 +38,7 @@ import {
   FunctionsIcon,
   HostingIcon,
   PubSubIcon,
+  ScheduledIcon,
   StorageIcon,
 } from '../common/icons';
 import { Spinner } from '../common/Spinner';
@@ -124,6 +125,14 @@ const Overview: React.FC<
           config={config.pubsub}
           testId="emulator-info-pubsub"
         />
+        <EmulatorCard
+          name="Scheduled emulator"
+          icon={<ScheduledIcon theme="secondary" />}
+          config={config.scheduled}
+          testId="emulator-info-scheduled"
+          linkTo="/scheduled"
+          linkLabel="Go to scheduled emulator"
+        />
         <EmulatorCard
           name="Extensions emulator"
           icon={<ExtensionsIcon theme="secondary" />}
diff --git a/src/components/Scheduled/List/List.tsx b/src/components/Scheduled/List/List.tsx
new file mode 100644
index 000000000..639d47c33
--- /dev/null
+++ b/src/components/Scheduled/List/List.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Card } from '@rmwc/card';
+import { Elevation } from '@rmwc/elevation';
+import { GridCell } from '@rmwc/grid';
+import React from 'react';
+
+import { useScheduled } from '../api/useScheduled';
+import { ScheduledTable } from './ScheduledTable/ScheduledTable';
+import { ZeroState } from './ZeroState';
+
+export const ScheduledList: React.FC<React.PropsWithChildren<unknown>> = () => {
+  const specs = useScheduled();
+
+  return (
+    <GridCell span={12} className="Scheduled">
+      <Elevation z="2" wrap>
+        <Card>
+          {specs.length ? (
+            <ScheduledTable functions={specs} />
+          ) : (
+            <ZeroState></ZeroState>
+          )}
+        </Card>
+      </Elevation>
+    </GridCell>
+  );
+};
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss
new file mode 100644
index 000000000..93ea7e747
--- /dev/null
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.scheduledTable {
+  border-radius: 8px;
+}
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
new file mode 100644
index 000000000..39bf56f05
--- /dev/null
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DataTable, DataTableBody, DataTableContent } from '@rmwc/data-table';
+import React from 'react';
+
+import { ScheduledFunction } from '../../models';
+import styles from './ScheduledTable.module.scss';
+import { ScheduledTableRow } from './ScheduledTableRow';
+
+export interface ScheduledTableProps {
+  functions: ScheduledFunction[];
+}
+
+export const ScheduledTable: React.FC<
+  React.PropsWithChildren<ScheduledTableProps>
+> = ({ functions }) => {
+  return (
+    <DataTable className={styles.scheduledTable}>
+      <DataTableContent>
+        <DataTableBody>
+          {functions.map((func) => (
+            <ScheduledTableRow key={func.id} scheduledFunc={func} />
+          ))}
+        </DataTableBody>
+      </DataTableContent>
+    </DataTable>
+  );
+};
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss
new file mode 100644
index 000000000..6059e11ae
--- /dev/null
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.infoCell {
+  padding: 8px 16px;
+}
+
+.iconCell {
+  padding-left: 16px;
+  padding-right: 0px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  height: 100px;
+  width: 72px;
+
+  svg {
+    color: var(--mdc-theme-primary);
+    scale: 1.5;
+  }
+}
+
+.infoHeader {
+  align-items: center;
+  display: flex;
+
+  img {
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.infoCell {
+  width: 100%;
+}
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
new file mode 100644
index 000000000..00fb56849
--- /dev/null
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from '@rmwc/button';
+import { DataTableCell, DataTableRow } from '@rmwc/data-table';
+import { Typography } from '@rmwc/typography';
+import React, { useCallback } from 'react';
+
+import { useEmulatorConfig } from '../../../common/EmulatorConfigProvider';
+import { ScheduledIcon } from '../../../common/icons';
+import { forceRunScheduledFunction } from '../../api/internal/useScheduledFunctions';
+import { ScheduledFunction } from '../../models';
+import styles from './ScheduledTableRow.module.scss';
+
+export interface ScheduledTableRowProps {
+  scheduledFunc: ScheduledFunction;
+}
+
+export const ScheduledTableRow: React.FC<
+  React.PropsWithChildren<ScheduledTableRowProps>
+> = ({ scheduledFunc }) => {
+  const { hostAndPort } = useEmulatorConfig('functions');
+
+  const handleClick = useCallback(
+    () => forceRunScheduledFunction(scheduledFunc.id, hostAndPort),
+    [scheduledFunc, hostAndPort]
+  );
+
+  return (
+    <DataTableRow key={scheduledFunc.id} className={styles.scheduledRow}>
+      <DataTableCell className={`${styles.iconCell} iconCell`}>
+        {<ScheduledIcon theme="secondary" />}
+      </DataTableCell>
+      <DataTableCell className={styles.infoCell}>
+        <div className={styles.infoHeader}>
+          <Typography
+            use="body1"
+            theme="textPrimaryOnBackground"
+            className="scheduledName"
+          >
+            {scheduledFunc.name}
+          </Typography>
+        </div>
+        <div>
+          <Typography use="body2" theme="textSecondaryOnBackground">
+            {scheduledFunc.scheduleTrigger.schedule}
+          </Typography>
+        </div>
+      </DataTableCell>
+      <DataTableCell className={`${styles.actionCell} actionCell`}>
+        <Button
+          onClick={() => {
+            handleClick.call(scheduledFunc.id);
+          }}
+          className={styles.manageButton}
+          label={<div className={styles.manageButtonText}>Force run</div>}
+          aria-label={'Force run'}
+        />
+      </DataTableCell>
+    </DataTableRow>
+  );
+};
diff --git a/src/components/Scheduled/List/ZeroState.module.scss b/src/components/Scheduled/List/ZeroState.module.scss
new file mode 100644
index 000000000..eb8de60e5
--- /dev/null
+++ b/src/components/Scheduled/List/ZeroState.module.scss
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.wrapper {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
diff --git a/src/components/Scheduled/List/ZeroState.tsx b/src/components/Scheduled/List/ZeroState.tsx
new file mode 100644
index 000000000..0d6009a42
--- /dev/null
+++ b/src/components/Scheduled/List/ZeroState.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Typography } from '@rmwc/typography';
+import React from 'react';
+
+import styles from './ZeroState.module.scss';
+
+export const ZeroState: React.FC<React.PropsWithChildren<unknown>> = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Typography
+        use="body2"
+        className={styles.noResultsWrapper}
+        theme="textSecondaryOnBackground"
+      >
+        No scheduled functions for this project yet
+      </Typography>
+    </div>
+  );
+};
diff --git a/src/components/Scheduled/api/internal/useScheduledFunctions.tsx b/src/components/Scheduled/api/internal/useScheduledFunctions.tsx
new file mode 100644
index 000000000..c214293df
--- /dev/null
+++ b/src/components/Scheduled/api/internal/useScheduledFunctions.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useSwr from 'swr';
+
+import { useEmulatorConfig } from '../../../common/EmulatorConfigProvider';
+import { ScheduledFunction } from '../../models';
+
+export function useScheduledFunctions(): ScheduledFunction[] {
+  const config = useEmulatorConfig('functions');
+
+  const fetcher = async () => {
+    const url = `//${config.hostAndPort}/scheduled`;
+    console.log(`Fetching scheduled from ${url}`);
+    const response = await fetch(url);
+    const json = await response.json();
+    return json.scheduled;
+  };
+
+  const functions = useSwr(`list_scheduled`, fetcher, { suspense: true }).data;
+
+  return functions;
+}
+
+export function forceRunScheduledFunction(
+  triggerId: string,
+  hostAndPort: string
+) {
+  const url = `//${hostAndPort}/force_run/${triggerId}`;
+
+  fetch(url, { method: 'POST' })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log(data);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}
diff --git a/src/components/Scheduled/api/useScheduled.tsx b/src/components/Scheduled/api/useScheduled.tsx
new file mode 100644
index 000000000..1bf9eb90d
--- /dev/null
+++ b/src/components/Scheduled/api/useScheduled.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createContext, useContext } from 'react';
+import { ScheduledFunction } from '../models';
+
+export const ScheduledContext = createContext<ScheduledFunction[]>([]);
+
+export const ScheduledProvider: React.FC<
+  React.PropsWithChildren<{
+    scheduled: ScheduledFunction[];
+  }>
+> = ({ children, scheduled }) => {
+  return (
+    <ScheduledContext.Provider value={scheduled}>
+      {children}
+    </ScheduledContext.Provider>
+  );
+};
+
+export function useScheduled() {
+  return useContext(ScheduledContext);
+}
diff --git a/src/components/Scheduled/index.tsx b/src/components/Scheduled/index.tsx
new file mode 100644
index 000000000..84ea08c00
--- /dev/null
+++ b/src/components/Scheduled/index.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { useIsEmulatorDisabled } from '../common/EmulatorConfigProvider';
+import { EmulatorDisabled } from '../common/EmulatorDisabled';
+import { Spinner } from '../common/Spinner';
+import { useScheduledFunctions } from './api/internal/useScheduledFunctions';
+import { ScheduledProvider } from './api/useScheduled';
+import { ScheduledList } from './List/List';
+
+export const ScheduledRoute: React.FC<
+  React.PropsWithChildren<unknown>
+> = () => {
+  return (
+    <Suspense fallback={<ScheduledRouteSuspended />}>
+      <HydrateScheduled>
+        <Switch>
+          <Route path="/scheduled" component={ScheduledList} />
+        </Switch>
+      </HydrateScheduled>
+    </Suspense>
+  );
+};
+
+export default ScheduledRoute;
+
+const HydrateScheduled: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
+  const functions = useScheduledFunctions();
+
+  return (
+    <ScheduledProvider scheduled={functions}>{children}</ScheduledProvider>
+  );
+};
+
+const ScheduledRouteSuspended: React.FC<
+  React.PropsWithChildren<unknown>
+> = () => {
+  const isDisabled = useIsEmulatorDisabled('scheduled');
+  return isDisabled ? (
+    <EmulatorDisabled productName="Scheduled" />
+  ) : (
+    <Spinner span={12} message="Scheduled Emulator Loading..." />
+  );
+};
diff --git a/src/components/Scheduled/models.ts b/src/components/Scheduled/models.ts
new file mode 100644
index 000000000..7ff991222
--- /dev/null
+++ b/src/components/Scheduled/models.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ScheduledFunction {
+  id: string;
+  name: string;
+  region: string;
+  scheduleTrigger: {
+    schedule: string;
+    timeZone: string;
+  };
+}
diff --git a/src/components/common/icons.tsx b/src/components/common/icons.tsx
index 886c2a9e1..834421a4e 100644
--- a/src/components/common/icons.tsx
+++ b/src/components/common/icons.tsx
@@ -139,6 +139,35 @@ export const PubSubIcon = svgIcon(
   </svg>
 );
 
+export const ScheduledIcon = svgIcon(
+  <svg viewBox="0 0 32 32">
+    <path
+      d="M24.067 24.518L21.5 26l2.884 4.995 2.567-1.482z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M23.387 29.19l-.624-1.122 2.3-1.786.38.71z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M8.384 24.518L10.95 26l-2.883 4.995L5.5 29.513z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.8 27.302l.464-.82 2.35 1.818-.624 1.064z"
+      fill="currentColor"
+    ></path>
+    <g fill="currentColor">
+      <path d="M16 30C8.82 30 3 24.18 3 17S8.82 4 16 4s13 5.82 13 13-5.82 13-13 13zm0-3.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19z"></path>
+      <path d="M15.787 24.206a7.097 7.097 0 0 0 7.103-7.103A7.103 7.103 0 0 0 15.787 10v7.103L10 21.223a7.094 7.094 0 0 0 5.787 2.983z"></path>
+    </g>
+    <path
+      d="M25.12 1l4.95 4.95-2.12 2.122L23 3.122zM6.95 1L2 5.95l2.12 2.122 4.95-4.95z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);
+
 // Other icons below:
 
 // TODO: Re-implement outer circle using CSS and dedupe with DatabaseIcon.
diff --git a/src/routes.ts b/src/routes.ts
index 531a1e850..e9d01a2a9 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -23,6 +23,7 @@ import { ExtensionsRoute } from './components/Extensions';
 import Firestore from './components/Firestore';
 import Home from './components/Home';
 import LogsViewer from './components/LogViewer';
+import { ScheduledRoute } from './components/Scheduled';
 import { Storage } from './components/Storage';
 
 export interface Route {
@@ -44,6 +45,9 @@ const routesToSanitize: string[] = [
   // Extensions
   '/extensions/:instanceId',
 
+  // Scheduled
+  '/scheduled',
+
   // Firestore
   '/firestore/:databaseId/data/:path*',
   '/firestore/:databaseId/requests/:requestId',
@@ -107,6 +111,13 @@ export const routes: ReadonlyArray<Route> = [
     exact: false,
     showInNav: true,
   },
+  {
+    path: '/scheduled',
+    component: ScheduledRoute,
+    label: 'Scheduled',
+    exact: false,
+    showInNav: true,
+  },
   {
     path: '/firestore',
     component: Firestore,
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index 44d101bea..fb68c873a 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -42,6 +42,7 @@ export type Emulator =
   | 'hosting'
   | 'storage'
   | 'pubsub'
+  | 'scheduled'
   | 'extensions';
 
 // Config for the Emulator Suite UI's own analytics (not a Google Analytics emulator)
@@ -81,5 +82,6 @@ export interface Config {
   hosting?: EmulatorConfig;
   storage?: EmulatorConfig;
   pubsub?: EmulatorConfig;
+  scheduled?: EmulatorConfig;
   experiments: Array<string>;
 }

From a4096559551a8f0eafa714d6a3a596b3566d4ab6 Mon Sep 17 00:00:00 2001
From: Pavel <pavel@invertase.io>
Date: Thu, 2 May 2024 01:39:24 -0700
Subject: [PATCH 2/4] feat: remove config requirement for scheduled emulator,
 remove card from emulators list UI

---
 firebase.json                 | 3 ---
 src/components/Home/index.tsx | 9 ---------
 2 files changed, 12 deletions(-)

diff --git a/firebase.json b/firebase.json
index 15db462f6..a3d95a51a 100644
--- a/firebase.json
+++ b/firebase.json
@@ -28,9 +28,6 @@
     },
     "pubsub": {
       "port": 8085
-    },
-    "scheduled": {
-      "port": 8086
     }
   },
   "extensions": {
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index b4be7ca3e..a4af30800 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -38,7 +38,6 @@ import {
   FunctionsIcon,
   HostingIcon,
   PubSubIcon,
-  ScheduledIcon,
   StorageIcon,
 } from '../common/icons';
 import { Spinner } from '../common/Spinner';
@@ -125,14 +124,6 @@ const Overview: React.FC<
           config={config.pubsub}
           testId="emulator-info-pubsub"
         />
-        <EmulatorCard
-          name="Scheduled emulator"
-          icon={<ScheduledIcon theme="secondary" />}
-          config={config.scheduled}
-          testId="emulator-info-scheduled"
-          linkTo="/scheduled"
-          linkLabel="Go to scheduled emulator"
-        />
         <EmulatorCard
           name="Extensions emulator"
           icon={<ExtensionsIcon theme="secondary" />}

From 353be24a6a289cecff7867503b115e16a5bfacbe Mon Sep 17 00:00:00 2001
From: Pavel <pavel@invertase.io>
Date: Sun, 5 May 2024 19:45:38 -0700
Subject: [PATCH 3/4] chore: fix linting

---
 src/components/Scheduled/api/useScheduled.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Scheduled/api/useScheduled.tsx b/src/components/Scheduled/api/useScheduled.tsx
index 1bf9eb90d..f209596cc 100644
--- a/src/components/Scheduled/api/useScheduled.tsx
+++ b/src/components/Scheduled/api/useScheduled.tsx
@@ -15,6 +15,7 @@
  */
 
 import { createContext, useContext } from 'react';
+
 import { ScheduledFunction } from '../models';
 
 export const ScheduledContext = createContext<ScheduledFunction[]>([]);

From f3cff7043b8cc15585786ab8d7a52e1740872b04 Mon Sep 17 00:00:00 2001
From: Pavel <pavel@invertase.io>
Date: Tue, 7 May 2024 01:19:11 -0700
Subject: [PATCH 4/4] feat: add force run snackbar

---
 .../Scheduled/ForceRunNotification/index.scss | 25 +++++++++++
 .../Scheduled/ForceRunNotification/index.tsx  | 43 +++++++++++++++++++
 src/components/Scheduled/List/List.tsx        | 11 ++++-
 .../List/ScheduledTable/ScheduledTable.tsx    |  9 +++-
 .../List/ScheduledTable/ScheduledTableRow.tsx | 12 ++++--
 .../api/internal/useScheduledFunctions.tsx    |  4 +-
 src/components/Scheduled/index.tsx            | 20 ++++++++-
 7 files changed, 114 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Scheduled/ForceRunNotification/index.scss
 create mode 100644 src/components/Scheduled/ForceRunNotification/index.tsx

diff --git a/src/components/Scheduled/ForceRunNotification/index.scss b/src/components/Scheduled/ForceRunNotification/index.scss
new file mode 100644
index 000000000..1bd369e07
--- /dev/null
+++ b/src/components/Scheduled/ForceRunNotification/index.scss
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.Scheduled-Force-Run-Snackbar {
+  & .mdc-snackbar__surface {
+    background-color: #051e34; // navy800
+  }
+  i.rmwc-icon {
+    // !important is needed because Snackbar sets an inline color style
+    color: #00bfa5 !important; // successOnDark
+  }
+}
diff --git a/src/components/Scheduled/ForceRunNotification/index.tsx b/src/components/Scheduled/ForceRunNotification/index.tsx
new file mode 100644
index 000000000..130c80bd4
--- /dev/null
+++ b/src/components/Scheduled/ForceRunNotification/index.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './index.scss';
+
+import { Snackbar } from '@rmwc/snackbar';
+import React from 'react';
+
+export const SNACKBAR_MESSAGE = 'Force run executed';
+
+interface Props {
+  showForceRunNotification: boolean;
+  setShowForceRunNotification: (value: boolean) => void;
+}
+
+const ForceRunNotification: React.FC<React.PropsWithChildren<Props>> = ({
+  showForceRunNotification,
+  setShowForceRunNotification,
+}) => (
+  <Snackbar
+    className="Scheduled-Force-Run-Snackbar"
+    open={showForceRunNotification}
+    onClose={() => setShowForceRunNotification(false)}
+    message={SNACKBAR_MESSAGE}
+    icon={{ icon: 'check_circle', size: 'medium' }}
+    timeout={2000}
+  />
+);
+
+export default ForceRunNotification;
diff --git a/src/components/Scheduled/List/List.tsx b/src/components/Scheduled/List/List.tsx
index 639d47c33..d1d335125 100644
--- a/src/components/Scheduled/List/List.tsx
+++ b/src/components/Scheduled/List/List.tsx
@@ -23,7 +23,11 @@ import { useScheduled } from '../api/useScheduled';
 import { ScheduledTable } from './ScheduledTable/ScheduledTable';
 import { ZeroState } from './ZeroState';
 
-export const ScheduledList: React.FC<React.PropsWithChildren<unknown>> = () => {
+export const ScheduledList: React.FC<
+  React.PropsWithChildren<{
+    setShowForceRunNotification: (show: boolean) => void;
+  }>
+> = ({ setShowForceRunNotification }) => {
   const specs = useScheduled();
 
   return (
@@ -31,7 +35,10 @@ export const ScheduledList: React.FC<React.PropsWithChildren<unknown>> = () => {
       <Elevation z="2" wrap>
         <Card>
           {specs.length ? (
-            <ScheduledTable functions={specs} />
+            <ScheduledTable
+              functions={specs}
+              setShowForceRunNotification={setShowForceRunNotification}
+            />
           ) : (
             <ZeroState></ZeroState>
           )}
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
index 39bf56f05..1e3871bcc 100644
--- a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx
@@ -23,17 +23,22 @@ import { ScheduledTableRow } from './ScheduledTableRow';
 
 export interface ScheduledTableProps {
   functions: ScheduledFunction[];
+  setShowForceRunNotification: (show: boolean) => void;
 }
 
 export const ScheduledTable: React.FC<
   React.PropsWithChildren<ScheduledTableProps>
-> = ({ functions }) => {
+> = ({ functions, setShowForceRunNotification }) => {
   return (
     <DataTable className={styles.scheduledTable}>
       <DataTableContent>
         <DataTableBody>
           {functions.map((func) => (
-            <ScheduledTableRow key={func.id} scheduledFunc={func} />
+            <ScheduledTableRow
+              key={func.id}
+              scheduledFunc={func}
+              setShowForceRunNotification={setShowForceRunNotification}
+            />
           ))}
         </DataTableBody>
       </DataTableContent>
diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
index 00fb56849..5ee62f445 100644
--- a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
+++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx
@@ -27,16 +27,22 @@ import styles from './ScheduledTableRow.module.scss';
 
 export interface ScheduledTableRowProps {
   scheduledFunc: ScheduledFunction;
+  setShowForceRunNotification: (show: boolean) => void;
 }
 
 export const ScheduledTableRow: React.FC<
   React.PropsWithChildren<ScheduledTableRowProps>
-> = ({ scheduledFunc }) => {
+> = ({ scheduledFunc, setShowForceRunNotification }) => {
   const { hostAndPort } = useEmulatorConfig('functions');
 
   const handleClick = useCallback(
-    () => forceRunScheduledFunction(scheduledFunc.id, hostAndPort),
-    [scheduledFunc, hostAndPort]
+    () =>
+      forceRunScheduledFunction(
+        scheduledFunc.id,
+        hostAndPort,
+        setShowForceRunNotification
+      ),
+    [scheduledFunc, hostAndPort, setShowForceRunNotification]
   );
 
   return (
diff --git a/src/components/Scheduled/api/internal/useScheduledFunctions.tsx b/src/components/Scheduled/api/internal/useScheduledFunctions.tsx
index c214293df..c994dddb0 100644
--- a/src/components/Scheduled/api/internal/useScheduledFunctions.tsx
+++ b/src/components/Scheduled/api/internal/useScheduledFunctions.tsx
@@ -36,13 +36,15 @@ export function useScheduledFunctions(): ScheduledFunction[] {
 
 export function forceRunScheduledFunction(
   triggerId: string,
-  hostAndPort: string
+  hostAndPort: string,
+  setShowForceRunNotification: (show: boolean) => void
 ) {
   const url = `//${hostAndPort}/force_run/${triggerId}`;
 
   fetch(url, { method: 'POST' })
     .then((response) => response.json())
     .then((data) => {
+      setShowForceRunNotification(true);
       console.log(data);
     })
     .catch((error) => {
diff --git a/src/components/Scheduled/index.tsx b/src/components/Scheduled/index.tsx
index 84ea08c00..b3f6cfa0b 100644
--- a/src/components/Scheduled/index.tsx
+++ b/src/components/Scheduled/index.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Suspense } from 'react';
+import React, { Suspense, useState } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { useIsEmulatorDisabled } from '../common/EmulatorConfigProvider';
@@ -22,18 +22,34 @@ import { EmulatorDisabled } from '../common/EmulatorDisabled';
 import { Spinner } from '../common/Spinner';
 import { useScheduledFunctions } from './api/internal/useScheduledFunctions';
 import { ScheduledProvider } from './api/useScheduled';
+import ForceRunNotification from './ForceRunNotification';
 import { ScheduledList } from './List/List';
 
 export const ScheduledRoute: React.FC<
   React.PropsWithChildren<unknown>
 > = () => {
+  const [showForceRunNotification, setShowForceRunNotification] =
+    useState<boolean>(false);
+
   return (
     <Suspense fallback={<ScheduledRouteSuspended />}>
       <HydrateScheduled>
         <Switch>
-          <Route path="/scheduled" component={ScheduledList} />
+          <Route
+            path="/scheduled"
+            render={(props) => (
+              <ScheduledList
+                {...props}
+                setShowForceRunNotification={setShowForceRunNotification}
+              />
+            )}
+          />
         </Switch>
       </HydrateScheduled>
+      <ForceRunNotification
+        showForceRunNotification={showForceRunNotification}
+        setShowForceRunNotification={setShowForceRunNotification}
+      />
     </Suspense>
   );
 };