"feat: create feedback form (#406)"

packages/data-explorer-ui/package.json

@@ -61,16 +61,18 @@
     "@mui/icons-material": "5.14.1",
     "@mui/material": "5.14.1",
     "@tanstack/react-table": "8.5.11",
+    "@tanstack/react-virtual": "^3.0.0-beta.59",
     "axios": "1.3.5",
     "copy-to-clipboard": "3.3.1",
     "isomorphic-dompurify": "0.24.0",
     "next": "12.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-dropzone": "^14.2.3",
     "react-gtm-module": "2.0.11",
     "react-idle-timer": "^5.6.2",
-    "@tanstack/react-virtual": "^3.0.0-beta.59",
     "react-window": "1.8.9",
-    "uuid": "8.3.2"
+    "uuid": "8.3.2",
+    "validate.js": "^0.13.1"
   }
 }

packages/data-explorer-ui/src/components/Loading/loading.tsx

@@ -1,4 +1,4 @@
-import { Fade, Typography } from "@mui/material";
+import { Fade, SvgIconProps, Typography } from "@mui/material";
 import React from "react";
 import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { PaperPanelStyle, PAPER_PANEL_STYLE } from "../common/Paper/paper";
@@ -21,12 +21,14 @@ export enum LOADING_PANEL_STYLE {
 }
 
 export interface LoadingProps {
+  iconSize?: SvgIconProps["fontSize"];
   loading: boolean;
   panelStyle?: LoadingPanelStyle; // Enables loading to mirror parent container styles.
   text?: string;
 }
 
 export const Loading = ({
+  iconSize = "large",
   loading,
   panelStyle = PAPER_PANEL_STYLE.ROUNDED,
   text,
@@ -42,7 +44,7 @@ export const Loading = ({
     >
       <LoadingPositioner panelStyle={panelStyle}>
         <LoadingPaper panelStyle={panelStyle}>
-          <LoadingIcon color="primary" fontSize="large" />
+          <LoadingIcon color="primary" fontSize={iconSize} />
           {text && <Typography variant="text-body-400">{text}</Typography>}
         </LoadingPaper>
       </LoadingPositioner>

packages/data-explorer-ui/src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
+import { tabletUp } from "../../../../../../theme/common/breakpoints";
+import { alpha80, inkMain } from "../../../../../../theme/common/palette";
+
+export const Fab = styled(MFab)`
+  bottom: 16px;
+  box-shadow: ${shadows02};
+  position: fixed;
+  right: 16px;
+  z-index: 1350; // Above backdrop component.
+`;
+
+export const Popover = styled(MPopover)`
+  &.MuiPopover-root {
+    background-color: ${inkMain}${alpha80};
+
+    > .MuiPaper-root {
+      border: 1px solid ${smokeMain};
+      border-radius: 8px;
+      width: 100%;
+
+      ${tabletUp} {
+        max-width: 496px;
+      }
+    }
+  }
+`;

packages/data-explorer-ui/src/components/Support/components/SupportRequest/components/Dialog/dialog.tsx

@@ -0,0 +1,56 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import React, {
+  Dispatch,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from "react";
+import { FeedbackIcon } from "../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon";
+import { Fab, Popover } from "./dialog.styles";
+
+export interface FormDialogProps {
+  children: ReactNode;
+  setFormSubmitted: Dispatch<SetStateAction<boolean>>;
+}
+
+export const FormDialog = ({
+  children,
+  setFormSubmitted,
+}: FormDialogProps): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const toggleOpen = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl((open) => (open ? null : event.currentTarget));
+  };
+
+  const onClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Fab color="primary" size="medium" onClick={toggleOpen}>
+        {open ? <CloseRoundedIcon /> : <FeedbackIcon fontSize="medium" />}
+      </Fab>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: "right",
+          vertical: -8,
+        }}
+        onClose={onClose}
+        open={open}
+        onTransitionExited={(): void => setFormSubmitted(false)}
+        slotProps={{ paper: { elevation: 2 } }}
+        transformOrigin={{
+          horizontal: "right",
+          vertical: "bottom",
+        }}
+      >
+        {children}
+      </Popover>
+    </>
+  );
+};

packages/data-explorer-ui/src/components/Support/components/SupportRequest/components/Dropzone/dropzone.tsx

@@ -0,0 +1,40 @@
+import { Box } from "@mui/material";
+import React from "react";
+import {
+  DropzoneProps as ReactDropzoneProps,
+  useDropzone,
+} from "react-dropzone";
+
+export interface DropzoneProps extends ReactDropzoneProps {
+  activeStyle?: React.CSSProperties;
+}
+
+export const Dropzone = ({
+  activeStyle = {},
+  children,
+  disabled = false,
+  ...props
+}: DropzoneProps): JSX.Element => {
+  const state = useDropzone({
+    disabled,
+    // Disable native files selection dialog - we'll handle this manually
+    noClick: true,
+    // Disable space/enter to open native files selection dialog
+    noKeyboard: true,
+    ...props,
+  });
+  const { getInputProps, getRootProps } = state;
+
+  return (
+    <Box
+      component="div"
+      {...getRootProps()}
+      sx={state.isDragActive ? activeStyle : {}}
+    >
+      <input {...getInputProps()} />
+      {children ? children(state) : null}
+    </Box>
+  );
+};
+
+export default Dropzone;

packages/data-explorer-ui/src/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.ts

@@ -0,0 +1,44 @@
+import { FormOption, FormState, FORM_CONTROL_NAME } from "./entities";
+
+// Validation constraints
+export const CONSTRAINTS = {
+  [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
+  [FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
+  [FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
+  [FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
+  [FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
+  [FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
+};
+
+// Default form state.
+export const DEFAULT_FORM_STATE: FormState = {
+  attachmentName: "",
+  attachmentRejected: false, // Upload fails on drop of file
+  attachmentRejections: [], // Failure reasons
+  attachmentToken: "",
+  attachmentUploading: false,
+  [FORM_CONTROL_NAME.DESCRIPTION]: "",
+  [FORM_CONTROL_NAME.EMAIL]: "",
+  [FORM_CONTROL_NAME.NAME]: "",
+  [FORM_CONTROL_NAME.SUBJECT]: "",
+  [FORM_CONTROL_NAME.TYPE]: "",
+  submitError: false,
+  submitted: false,
+  submitting: false,
+  touched: {},
+};
+
+// Active drag styles.
+export const DRAGGING_STYLE = {
+  cursor: "copy",
+};
+
+// Max file attachment
+export const MAX_ATTACHMENT_SIZE = 20 * 1024 * 1024;
+
+// Set up "Message topic" select options, selected value and styles.
+export const OPTIONS: FormOption[] = [
+  { label: "Question", value: "question" },
+  { label: "Bug", value: "bug" },
+  { label: "Feature Request", value: "feature_request" },
+];