feat: add force run snackbar

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
+  }
+}

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;

src/components/Scheduled/List/List.tsx

@@ -23,15 +23,22 @@ 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 (
     <GridCell span={12} className="Scheduled">
       <Elevation z="2" wrap>
         <Card>
           {specs.length ? (
-            <ScheduledTable functions={specs} />
+            <ScheduledTable
+              functions={specs}
+              setShowForceRunNotification={setShowForceRunNotification}
+            />
           ) : (
             <ZeroState></ZeroState>
           )}

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>

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 (

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) => {

src/components/Scheduled/index.tsx

@@ -14,26 +14,42 @@
  * 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';
 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>
   );
 };