feat: scheduled emulator UI

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

@@ -0,0 +1,49 @@
+/**
+ * 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<{
+    setShowForceRunNotification: (show: boolean) => void;
+  }>
+> = ({ setShowForceRunNotification }) => {
+  const specs = useScheduled();
+
+  return (
+    <GridCell span={12} className="Scheduled">
+      <Elevation z="2" wrap>
+        <Card>
+          {specs.length ? (
+            <ScheduledTable
+              functions={specs}
+              setShowForceRunNotification={setShowForceRunNotification}
+            />
+          ) : (
+            <ZeroState></ZeroState>
+          )}
+        </Card>
+      </Elevation>
+    </GridCell>
+  );
+};

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

src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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[];
+  setShowForceRunNotification: (show: boolean) => void;
+}
+
+export const ScheduledTable: React.FC<
+  React.PropsWithChildren<ScheduledTableProps>
+> = ({ functions, setShowForceRunNotification }) => {
+  return (
+    <DataTable className={styles.scheduledTable}>
+      <DataTableContent>
+        <DataTableBody>
+          {functions.map((func) => (
+            <ScheduledTableRow
+              key={func.id}
+              scheduledFunc={func}
+              setShowForceRunNotification={setShowForceRunNotification}
+            />
+          ))}
+        </DataTableBody>
+      </DataTableContent>
+    </DataTable>
+  );
+};

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

src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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;
+  setShowForceRunNotification: (show: boolean) => void;
+}
+
+export const ScheduledTableRow: React.FC<
+  React.PropsWithChildren<ScheduledTableRowProps>
+> = ({ scheduledFunc, setShowForceRunNotification }) => {
+  const { hostAndPort } = useEmulatorConfig('functions');
+
+  const handleClick = useCallback(
+    () =>
+      forceRunScheduledFunction(
+        scheduledFunc.id,
+        hostAndPort,
+        setShowForceRunNotification
+      ),
+    [scheduledFunc, hostAndPort, setShowForceRunNotification]
+  );
+
+  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>
+  );
+};

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

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