feat: Implement getData query and send a message action for slack

packages/web/src/components/FlowStep/index.tsx

@@ -23,7 +23,13 @@ import AppIcon from 'components/AppIcon';
 import { GET_APPS } from 'graphql/queries/get-apps';
 import { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { AppIconWrapper, AppIconStatusIconWrapper, Content, Header, Wrapper } from './style';
+import {
+  AppIconWrapper,
+  AppIconStatusIconWrapper,
+  Content,
+  Header,
+  Wrapper,
+} from './style';
 
 type FlowStepProps = {
   collapsed?: boolean;
@@ -32,26 +38,29 @@ type FlowStepProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onChange: (step: IStep) => void;
-}
+};
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
 
-export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
+export default function FlowStep(
+  props: FlowStepProps
+): React.ReactElement | null {
   const { collapsed, index, onChange } = props;
-  const contextButtonRef = React.useRef<HTMLButtonElement  | null>(null);
+  const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
   const step: IStep = props.step;
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement  | null>(null);
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
+    null
+  );
   const isTrigger = step.type === 'trigger';
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(2);
-  const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
+  const { data } = useQuery(GET_APPS, {
+    variables: { onlyWithTriggers: isTrigger },
+  });
   const [
     getStepWithTestExecutions,
-    {
-      data: stepWithTestExecutionsData,
-      called: stepWithTestExecutionsCalled,
-    },
+    { data: stepWithTestExecutionsData, called: stepWithTestExecutionsCalled },
   ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
     fetchPolicy: 'network-only',
   });
@@ -64,17 +73,27 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
         },
       });
     }
-  }, [collapsed, stepWithTestExecutionsCalled, getStepWithTestExecutions, step.id, isTrigger]);
+  }, [
+    collapsed,
+    stepWithTestExecutionsCalled,
+    getStepWithTestExecutions,
+    step.id,
+    isTrigger,
+  ]);
 
   const apps: IApp[] = data?.getApps;
   const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
 
   const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
-  const substeps = React.useMemo(() => actionsOrTriggers?.find(({ key }) => key === step.key)?.subSteps || [], [actionsOrTriggers, step?.key]);
+  const substeps = React.useMemo(
+    () =>
+      actionsOrTriggers?.find(({ key }) => key === step.key)?.substeps || [],
+    [actionsOrTriggers, step?.key]
+  );
 
   const handleChange = React.useCallback(({ step }: { step: IStep }) => {
     onChange(step);
-  }, [])
+  }, []);
 
   const expandNextStep = React.useCallback(() => {
     setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);
@@ -82,24 +101,28 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
   const handleSubmit = (val: any) => {
     handleChange({ step: val as IStep });
-  }
+  };
 
-  if  (!apps) return null;
+  if (!apps) return null;
 
   const onContextMenuClose = (event: React.SyntheticEvent) => {
     event.stopPropagation();
     setAnchorEl(null);
-  }
+  };
   const onContextMenuClick = (event: React.SyntheticEvent) => {
     event.stopPropagation();
     setAnchorEl(contextButtonRef.current);
-  }
+  };
   const onOpen = () => collapsed && props.onOpen?.();
   const onClose = () => props.onClose?.();
 
-  const toggleSubstep = (substepIndex: number) => setCurrentSubstep((value) => value !== substepIndex ? substepIndex : null);
+  const toggleSubstep = (substepIndex: number) =>
+    setCurrentSubstep((value) =>
+      value !== substepIndex ? substepIndex : null
+    );
 
-  const validationStatusIcon = step.status === 'completed' ? validIcon : errorIcon;
+  const validationStatusIcon =
+    step.status === 'completed' ? validIcon : errorIcon;
 
   return (
     <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
@@ -115,11 +138,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
           <div>
             <Typography variant="caption">
-              {
-                isTrigger ?
-                  formatMessage('flowStep.triggerType') :
-                  formatMessage('flowStep.actionType')
-              }
+              {isTrigger
+                ? formatMessage('flowStep.triggerType')
+                : formatMessage('flowStep.actionType')}
             </Typography>
 
             <Typography variant="body2">
@@ -129,9 +150,15 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
           <Box display="flex" flex={1} justifyContent="end">
             {/* as there are no other actions besides "delete step", we hide the context menu. */}
-            {!isTrigger && <IconButton color="primary" onClick={onContextMenuClick} ref={contextButtonRef}>
-              <MoreHorizIcon />
-            </IconButton>}
+            {!isTrigger && (
+              <IconButton
+                color="primary"
+                onClick={onContextMenuClick}
+                ref={contextButtonRef}
+              >
+                <MoreHorizIcon />
+              </IconButton>
+            )}
           </Box>
         </Stack>
       </Header>
@@ -139,7 +166,11 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
       <Collapse in={!collapsed} unmountOnExit>
         <Content>
           <List>
-            <StepExecutionsProvider value={stepWithTestExecutionsData?.getStepWithTestExecutions as IStep[]}>
+            <StepExecutionsProvider
+              value={
+                stepWithTestExecutionsData?.getStepWithTestExecutions as IStep[]
+              }
+            >
               <Form defaultValues={step} onSubmit={handleSubmit}>
                 <ChooseAppAndEventSubstep
                   expanded={currentSubstep === 0}
@@ -151,45 +182,56 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                   step={step}
                 />
 
-                {substeps?.length > 0 && substeps.map((substep: { name: string, key: string, arguments: IField[] }, index: number) => (
-                  <React.Fragment key={`${substep?.name}-${index}`}>
-                    {substep.key === 'chooseAccount' && (
-                      <ChooseAccountSubstep
-                        expanded={currentSubstep === (index + 1)}
-                        substep={substep}
-                        onExpand={() => toggleSubstep((index + 1))}
-                        onCollapse={() => toggleSubstep((index + 1))}
-                        onSubmit={expandNextStep}
-                        onChange={handleChange}
-                        step={step}
-                      />
-                    )}
+                {substeps?.length > 0 &&
+                  substeps.map(
+                    (
+                      substep: {
+                        name: string;
+                        key: string;
+                        arguments: IField[];
+                      },
+                      index: number
+                    ) => (
+                      <React.Fragment key={`${substep?.name}-${index}`}>
+                        {substep.key === 'chooseAccount' && (
+                          <ChooseAccountSubstep
+                            expanded={currentSubstep === index + 1}
+                            substep={substep}
+                            onExpand={() => toggleSubstep(index + 1)}
+                            onCollapse={() => toggleSubstep(index + 1)}
+                            onSubmit={expandNextStep}
+                            onChange={handleChange}
+                            step={step}
+                          />
+                        )}
 
-                    {substep.key === 'testStep' && (
-                      <TestSubstep
-                        expanded={currentSubstep === (index + 1)}
-                        substep={substep}
-                        onExpand={() => toggleSubstep((index + 1))}
-                        onCollapse={() => toggleSubstep((index + 1))}
-                        onSubmit={expandNextStep}
-                        onChange={handleChange}
-                        step={step}
-                      />
-                    )}
+                        {substep.key === 'testStep' && (
+                          <TestSubstep
+                            expanded={currentSubstep === index + 1}
+                            substep={substep}
+                            onExpand={() => toggleSubstep(index + 1)}
+                            onCollapse={() => toggleSubstep(index + 1)}
+                            onSubmit={expandNextStep}
+                            onChange={handleChange}
+                            step={step}
+                          />
+                        )}
 
-                    {['chooseAccount', 'testStep'].includes(substep.key) === false && (
-                      <FlowSubstep
-                        expanded={currentSubstep === (index + 1)}
-                        substep={substep}
-                        onExpand={() => toggleSubstep((index + 1))}
-                        onCollapse={() => toggleSubstep((index + 1))}
-                        onSubmit={expandNextStep}
-                        onChange={handleChange}
-                        step={step}
-                      />
-                    )}
-                  </React.Fragment>
-                ))}
+                        {['chooseAccount', 'testStep'].includes(substep.key) ===
+                          false && (
+                          <FlowSubstep
+                            expanded={currentSubstep === index + 1}
+                            substep={substep}
+                            onExpand={() => toggleSubstep(index + 1)}
+                            onCollapse={() => toggleSubstep(index + 1)}
+                            onSubmit={expandNextStep}
+                            onChange={handleChange}
+                            step={step}
+                          />
+                        )}
+                      </React.Fragment>
+                    )
+                  )}
               </Form>
             </StepExecutionsProvider>
           </List>
@@ -200,12 +242,14 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
         </Button>
       </Collapse>
 
-      {anchorEl && <FlowStepContextMenu
-        stepId={step.id}
-        deletable={!isTrigger}
-        onClose={onContextMenuClose}
-        anchorEl={anchorEl}
-      />}
+      {anchorEl && (
+        <FlowStepContextMenu
+          stepId={step.id}
+          deletable={!isTrigger}
+          onClose={onContextMenuClose}
+          anchorEl={anchorEl}
+        />
+      )}
     </Wrapper>
-  )
-};
+  );
+}