feat: add TestSubstep along with step status

2022-02-09 22:48:29 +01:00
parent 50ef6be69c
commit 020ef45f0a
13 changed files with 165 additions and 16 deletions
--- a/packages/backend/src/apps/twitter/info.json
+++ b/packages/backend/src/apps/twitter/info.json
@@ -222,9 +222,11 @@
      "description": "Will be triggered when you tweet something new.",
      "subSteps": [
        {
+          "key": "chooseAccount",
          "name": "Choose account"
        },
        {
+          "key": "testStep",
          "name": "Test trigger"
        }
      ]
@@ -235,9 +237,11 @@
      "description": "Will be triggered when a specific user tweet something new.",
      "subSteps": [
        {
+          "key": "chooseAccount",
          "name": "Choose account"
        },
        {
+          "key": "chooseTrigger",
          "name": "Set up a trigger",
          "arguments": [
            {
@@ -249,6 +253,7 @@
          ]
        },
        {
+          "key": "testStep",
          "name": "Test trigger"
        }
      ]
@@ -261,9 +266,11 @@
      "description": "Will create a tweet.",
      "subSteps": [
        {
+          "key": "chooseAccount",
          "name": "Choose account"
        },
        {
+          "key": "chooseAction",
          "name": "Set up action",
          "arguments": [
            {
@@ -275,6 +282,7 @@
          ]
        },
        {
+          "key": "testStep",
          "name": "Test action"
        }
      ]
--- a/packages/backend/src/graphql/types/action.ts
+++ b/packages/backend/src/graphql/types/action.ts
@@ -11,6 +11,7 @@ const actionType = new GraphQLObjectType({
        new GraphQLObjectType({
          name: 'ActionSubStep',
          fields: {
+            key: { type: GraphQLString },
            name: { type: GraphQLString },
            arguments: {
              type: GraphQLList(
--- a/packages/backend/src/graphql/types/trigger.ts
+++ b/packages/backend/src/graphql/types/trigger.ts
@@ -11,6 +11,7 @@ const triggerType = new GraphQLObjectType({
        new GraphQLObjectType({
          name: 'TriggerSubStep',
          fields: {
+            key: { type: GraphQLString },
            name: { type: GraphQLString },
            arguments: {
              type: GraphQLList(
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
@@ -94,7 +94,7 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
        });
      }
    }
-  }, [step, onChange]);;
+  }, [step, onChange]);

  const onToggle = expanded ? onCollapse : onExpand;

--- a/packages/web/src/components/FlowStep/index.tsx
+++ b/packages/web/src/components/FlowStep/index.tsx
@@ -8,7 +8,10 @@ import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import IconButton from '@mui/material/IconButton';
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';

+import TestSubstep from 'components/TestSubstep';
 import FlowSubstep from 'components/FlowSubstep';
 import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
 import ChooseAccountSubstep from 'components/ChooseAccountSubstep';
@@ -20,7 +23,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import type { App, AppFields } from 'types/app';
 import type { Step } from 'types/step';
 import { StepType } from 'types/step';
-import { Content, Header, Wrapper } from './style';
+import { AppIconWrapper, AppIconStatusIconWrapper, Content, Header, Wrapper } from './style';

 type FlowStepProps = {
  collapsed?: boolean;
@@ -48,6 +51,9 @@ const parseStep = (step: Step) => {
  }
 };

+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+
 export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
  const { collapsed, index, onChange } = props;
  const contextButtonRef = React.useRef<HTMLButtonElement  | null>(null);
@@ -86,11 +92,19 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul

  const toggleSubstep = (substepIndex: number) => setCurrentSubstep((value) => value !== substepIndex ? substepIndex : null);

+  const validationStatusIcon = step.status === 'completed' ? validIcon : errorIcon;
+
  return (
    <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
      <Header collapsed={collapsed}>
        <Stack direction="row" alignItems="center" gap={2}>
-          <AppIcon url={app?.iconUrl} name={app?.name} />
+          <AppIconWrapper>
+            <AppIcon url={app?.iconUrl} name={app?.name} />
+
+            <AppIconStatusIconWrapper>
+              {validationStatusIcon}
+            </AppIconStatusIconWrapper>
+          </AppIconWrapper>

          <div>
            <Typography variant="caption">
@@ -129,9 +143,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
            />

            <Form defaultValues={step.parameters}>
-              {substeps?.length > 0 && substeps.map((substep: { name: string, arguments: AppFields[] }, index: number) => (
+              {substeps?.length > 0 && substeps.map((substep: { name: string, key: string, arguments: AppFields[] }, index: number) => (
                <React.Fragment key={`${substep?.name}-${index}`}>
-                  {substep.name === 'Choose account' && (
+                  {substep.key === 'chooseAccount' && (
                    <ChooseAccountSubstep
                      expanded={currentSubstep === (index + 1)}
                      substep={substep}
@@ -143,7 +157,19 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                    />
                  )}

-                  {substep.name !== 'Choose account' && (
+                  {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}
--- a/packages/web/src/components/FlowStep/style.ts
+++ b/packages/web/src/components/FlowStep/style.ts
@@ -1,6 +1,25 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';

+export const AppIconWrapper = styled('div')`
+  position: relative;
+`;
+
+export const AppIconStatusIconWrapper = styled('span')`
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+  display: inline-flex;
+
+  svg {
+    // to make it distinguishable over an app icon
+    background: white;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+
 export const Wrapper = styled(Card)`
  width: 100%;
  overflow: unset;
--- a/packages/web/src/components/FlowSubstep/index.tsx
+++ b/packages/web/src/components/FlowSubstep/index.tsx
@@ -78,13 +78,11 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
      />
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
-          {substep.name !== 'Choose account' && (
-            <React.Fragment>
-              {args?.map((argument) => (
-                <InputCreator key={argument?.key} schema={argument} onBlur={handleChangeOnBlur} />
-              ))}
-            </React.Fragment>
-          )}
+          <React.Fragment>
+            {args?.map((argument) => (
+              <InputCreator key={argument?.key} schema={argument} onBlur={handleChangeOnBlur} />
+            ))}
+          </React.Fragment>

          <Button
            fullWidth
--- a/packages/web/src/components/FlowSubstepTitle/index.tsx
+++ b/packages/web/src/components/FlowSubstepTitle/index.tsx
@@ -13,6 +13,9 @@ type FlowSubstepTitleProps = {
  valid?: boolean | null;
 };

+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+
 function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
  const {
    expanded = false,
@@ -22,9 +25,6 @@ function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
  } = props;

  const hasValidation = valid !== null;
-
-  const validIcon = <CheckCircleIcon color="success" />;
-  const errorIcon = <ErrorIcon color="error" />;
  const validationStatusIcon = valid ? validIcon : errorIcon;

  return (
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/packages/web/src/components/TestSubstep/index.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import Button from '@mui/material/Button';
+
+import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import type { Step, Substep } from 'types/step';
+import type { AppFields } from 'types/app';
+
+type TestSubstepProps = {
+  substep: Substep,
+  expanded?: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  onChange?: ({ step }: { step: Step }) => void;
+  onSubmit?: () => void;
+  step: Step;
+};
+
+function TestSubstep(props: TestSubstepProps): React.ReactElement {
+  const {
+    substep,
+    expanded = false,
+    onExpand,
+    onCollapse,
+    onSubmit,
+    step,
+  } = props;
+
+  const [executeFlow, { data }] = useMutation(EXECUTE_FLOW);
+
+  const response = data?.executeFlow?.data;
+
+  const {
+    name,
+  } = substep;
+
+  const handleSubmit = React.useCallback(() => {
+    executeFlow({
+      variables: {
+        stepId: step.id,
+      }
+    })
+  }, [onSubmit, step.id]);
+  const onToggle = expanded ? onCollapse : onExpand;
+
+  return (
+    <React.Fragment>
+      <FlowSubstepTitle
+        expanded={expanded}
+        onClick={onToggle}
+        title={name}
+      />
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+
+          {response && (
+            <pre style={{ whiteSpace: 'pre-wrap', }}>
+              {JSON.stringify(response, null, 2)}
+            </pre>
+          )}
+
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={handleSubmit}
+            sx={{ mt: 2 }}
+          >
+            Test & Continue
+          </Button>
+        </ListItem>
+      </Collapse>
+    </React.Fragment>
+  );
+};
+
+export default TestSubstep;
--- a/packages/web/src/graphql/mutations/execute-flow.ts
+++ b/packages/web/src/graphql/mutations/execute-flow.ts
@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const EXECUTE_FLOW = gql`
+  mutation ExecuteFlow($stepId: String!) {
+    executeFlow(stepId: $stepId) {
+      step {
+        id
+        status
+      }
+      data
+    }
+  }
+`;
--- a/packages/web/src/graphql/queries/get-apps.ts
+++ b/packages/web/src/graphql/queries/get-apps.ts
@@ -54,6 +54,7 @@ export const GET_APPS = gql`
        key
        description
        subSteps {
+          key
          name
          arguments {
            label
@@ -68,6 +69,7 @@ export const GET_APPS = gql`
        key
        description
        subSteps {
+          key
          name
          arguments {
            label
--- a/packages/web/src/graphql/queries/get-flow.ts
+++ b/packages/web/src/graphql/queries/get-flow.ts
@@ -11,6 +11,7 @@ export const GET_FLOW = gql`
        type
        key
        appKey
+        status
        connection {
          id
          verified
--- a/packages/web/src/types/step.ts
+++ b/packages/web/src/types/step.ts
@@ -15,6 +15,7 @@ export type Step = {
  previousStepId: string | null;
  parameters: Record<string, unknown>;
  connection: Pick<Connection, 'id' | 'verified'>;
+  status: 'completed' | 'incomplete';
 };

 export type Substep = {