feat: build Information dialog component to show confirmation or alert (#1176)

* Build Information dialog component to show confirmation or alert

* Modified the PR based on review

* Add preview api as dependency for storybook for orchestrator plugin

* Move preview api to dev dependency

* Fixed lint issue

Author: yzhao583

plugins/orchestrator/package.json

@@ -107,7 +107,8 @@
     "ts-loader": "^8.4.0",
     "url-loader": "^3.0.0",
     "webpack": "^5.70.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "@storybook/preview-api": "^7.5.3"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",

plugins/orchestrator/src/components/InfoDialog.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { Button } from '@material-ui/core';
+import { useArgs } from '@storybook/preview-api';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InfoDialog } from './InfoDialog';
+
+const meta = {
+  title: 'Orchestrator/InfoDialog',
+  component: InfoDialog,
+} satisfies Meta<typeof InfoDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const handleSubmit = () => {};
+
+const ConfirmationDialogContent = () => (
+  <div>
+    Are you sure you want to submit? By clicking the submit button, you cannot
+    change the action
+  </div>
+);
+const AlertDialogContent = () => (
+  <div>
+    This app sends anonymous location data, even when it is not running.
+  </div>
+);
+
+export const ConfirmDialogStory: Story = {
+  name: 'Confirm Dialog',
+  args: {
+    title: 'Confirm',
+    open: true,
+    children: <ConfirmationDialogContent />,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    const handleClose = () => {
+      updateArgs({ open: !open });
+    };
+
+    const DialogActions = () => (
+      <>
+        <Button onClick={handleClose} color="primary">
+          Disagree
+        </Button>
+        <Button onClick={handleSubmit} color="primary">
+          Agree
+        </Button>
+      </>
+    );
+
+    return (
+      <InfoDialog
+        {...args}
+        onClose={handleClose}
+        dialogActions={<DialogActions />}
+      />
+    );
+  },
+};
+
+export const AlertDialogStory: Story = {
+  name: 'Alert Dialog',
+  args: {
+    title: 'Alert',
+    open: true,
+    children: <AlertDialogContent />,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    const handleClose = () => {
+      updateArgs({ open: !open });
+    };
+
+    const DialogActions = () => (
+      <>
+        <Button onClick={handleClose} color="primary">
+          OK
+        </Button>
+      </>
+    );
+
+    return (
+      <InfoDialog
+        {...args}
+        onClose={handleClose}
+        dialogActions={<DialogActions />}
+      />
+    );
+  },
+};

plugins/orchestrator/src/components/InfoDialog.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, ForwardRefRenderFunction } from 'react';
+
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  makeStyles,
+  Typography,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+export type InfoDialogProps = {
+  title: string;
+  open: boolean;
+  onClose?: () => void;
+  dialogActions?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export type ParentComponentRef = HTMLElement;
+
+const useStyles = makeStyles(_theme => ({
+  closeBtn: {
+    position: 'absolute',
+    right: 8,
+    top: 8,
+  },
+}));
+
+export const RefForwardingInfoDialog: ForwardRefRenderFunction<
+  ParentComponentRef,
+  InfoDialogProps
+> = (props, forwardedRef): JSX.Element | null => {
+  const { title, open = false, onClose, children, dialogActions } = props;
+  const classes = useStyles();
+
+  return (
+    <Dialog onClose={_ => onClose} open={open} ref={forwardedRef}>
+      <DialogTitle>
+        <Box>
+          <Typography variant="h5">{title}</Typography>
+          <IconButton
+            className={classes.closeBtn}
+            aria-label="close"
+            onClick={onClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Box>{children}</Box>
+      </DialogContent>
+      <DialogActions>{dialogActions}</DialogActions>
+    </Dialog>
+  );
+};
+
+export const InfoDialog = forwardRef(RefForwardingInfoDialog);