refactor(web): remove typescript

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

@@ -13,9 +13,6 @@ import CircularProgress from '@mui/material/CircularProgress';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import type { BaseSchema } from 'yup';
-import type { IApp, ITrigger, IAction, IStep, ISubstep } from 'types';
-
 import { EditorContext } from 'contexts/Editor';
 import { StepExecutionsProvider } from 'contexts/StepExecutions';
 import TestSubstep from 'components/TestSubstep';
@@ -36,35 +33,19 @@ import {
   Wrapper,
 } from './style';
 import isEmpty from 'helpers/isEmpty';
-
-type FlowStepProps = {
-  collapsed?: boolean;
-  step: IStep;
-  index?: number;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onChange: (step: IStep) => void;
-  onContinue?: () => void;
-};
-
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
-
-function generateValidationSchema(substeps: ISubstep[]) {
+function generateValidationSchema(substeps) {
   const fieldValidations = substeps?.reduce(
     (allValidations, { arguments: args }) => {
       if (!args || !Array.isArray(args)) return allValidations;
-
-      const substepArgumentValidations: Record<string, BaseSchema> = {};
-
+      const substepArgumentValidations = {};
       for (const arg of args) {
         const { key, required } = arg;
-
         // base validation for the field if not exists
         if (!substepArgumentValidations[key]) {
           substepArgumentValidations[key] = yup.mixed();
         }
-
         if (
           typeof substepArgumentValidations[key] === 'object' &&
           (arg.type === 'string' || arg.type === 'dropdown')
@@ -76,21 +57,19 @@ function generateValidationSchema(substeps: ISubstep[]) {
               .test(
                 'empty-check',
                 `${key} must be not empty`,
-                (value: any) => !isEmpty(value)
+                (value) => !isEmpty(value),
               );
           }
-
           // if the field depends on another field, add the dependsOn required validation
           if (Array.isArray(arg.dependsOn) && arg.dependsOn.length > 0) {
             for (const dependsOnKey of arg.dependsOn) {
               const missingDependencyValueMessage = `We're having trouble loading '${key}' data as required field '${dependsOnKey}' is missing.`;
-
               // TODO: make `dependsOnKey` agnostic to the field. However, nested validation schema is not supported.
               // So the fields under the `parameters` key are subject to their siblings only and thus, `parameters.` is removed.
               substepArgumentValidations[key] = substepArgumentValidations[
                 key
               ].when(`${dependsOnKey.replace('parameters.', '')}`, {
-                is: (value: string) => Boolean(value) === false,
+                is: (value) => Boolean(value) === false,
                 then: (schema) =>
                   schema
                     .notOneOf([''], missingDependencyValueMessage)
@@ -100,37 +79,28 @@ function generateValidationSchema(substeps: ISubstep[]) {
           }
         }
       }
-
       return {
         ...allValidations,
         ...substepArgumentValidations,
       };
     },
-    {}
+    {},
   );
-
   const validationSchema = yup.object({
     parameters: yup.object(fieldValidations),
   });
-
   return yupResolver(validationSchema);
 }
-
-export default function FlowStep(
-  props: FlowStepProps
-): React.ReactElement | null {
+export default function FlowStep(props) {
   const { collapsed, onChange, onContinue } = props;
   const editorContext = React.useContext(EditorContext);
-  const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
-  const step: IStep = props.step;
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
+  const contextButtonRef = React.useRef(null);
+  const step = props.step;
+  const [anchorEl, setAnchorEl] = React.useState(null);
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
-  const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
-
+  const [currentSubstep, setCurrentSubstep] = React.useState(0);
   const { apps } = useApps({
     onlyWithTriggers: isTrigger,
     onlyWithActions: isAction,
@@ -141,7 +111,6 @@ export default function FlowStep(
   ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
     fetchPolicy: 'network-only',
   });
-
   React.useEffect(() => {
     if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
       getStepWithTestExecutions({
@@ -157,33 +126,25 @@ export default function FlowStep(
     step.id,
     isTrigger,
   ]);
-
-  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
-
-  const actionsOrTriggers: Array<ITrigger | IAction> =
-    (isTrigger ? app?.triggers : app?.actions) || [];
+  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
+  const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
   const actionOrTrigger = actionsOrTriggers?.find(
-    ({ key }) => key === step.key
+    ({ key }) => key === step.key,
   );
   const substeps = actionOrTrigger?.substeps || [];
-
-  const handleChange = React.useCallback(({ step }: { step: IStep }) => {
+  const handleChange = React.useCallback(({ step }) => {
     onChange(step);
   }, []);
-
   const expandNextStep = React.useCallback(() => {
     setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);
   }, []);
-
-  const handleSubmit = (val: any) => {
-    handleChange({ step: val as IStep });
+  const handleSubmit = (val) => {
+    handleChange({ step: val });
   };
-
   const stepValidationSchema = React.useMemo(
     () => generateValidationSchema(substeps),
-    [substeps]
+    [substeps],
   );
-
   if (!apps) {
     return (
       <CircularProgress
@@ -192,26 +153,22 @@ export default function FlowStep(
       />
     );
   }
-
-  const onContextMenuClose = (event: React.SyntheticEvent) => {
+  const onContextMenuClose = (event) => {
     event.stopPropagation();
     setAnchorEl(null);
   };
-  const onContextMenuClick = (event: React.SyntheticEvent) => {
+  const onContextMenuClick = (event) => {
     event.stopPropagation();
     setAnchorEl(contextButtonRef.current);
   };
   const onOpen = () => collapsed && props.onOpen?.();
   const onClose = () => props.onClose?.();
-
-  const toggleSubstep = (substepIndex: number) =>
+  const toggleSubstep = (substepIndex) =>
     setCurrentSubstep((value) =>
-      value !== substepIndex ? substepIndex : null
+      value !== substepIndex ? substepIndex : null,
     );
-
   const validationStatusIcon =
     step.status === 'completed' ? validIcon : errorIcon;
-
   return (
     <Wrapper
       elevation={collapsed ? 1 : 4}
@@ -259,9 +216,7 @@ export default function FlowStep(
         <Content>
           <List>
             <StepExecutionsProvider
-              value={
-                stepWithTestExecutionsData?.getStepWithTestExecutions as IStep[]
-              }
+              value={stepWithTestExecutionsData?.getStepWithTestExecutions}
             >
               <Form
                 defaultValues={step}
@@ -284,7 +239,7 @@ export default function FlowStep(
 
                 {actionOrTrigger &&
                   substeps?.length > 0 &&
-                  substeps.map((substep: ISubstep, index: number) => (
+                  substeps.map((substep, index) => (
                     <React.Fragment key={`${substep?.name}-${index}`}>
                       {substep.key === 'chooseConnection' && app && (
                         <ChooseConnectionSubstep
@@ -319,7 +274,7 @@ export default function FlowStep(
 
                       {substep.key &&
                         ['chooseConnection', 'testStep'].includes(
-                          substep.key
+                          substep.key,
                         ) === false && (
                           <FlowSubstep
                             expanded={currentSubstep === index + 1}

packages/web/src/components/FlowStep/style.js

@@ -1,10 +1,8 @@
 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;
@@ -19,23 +17,16 @@ export const AppIconStatusIconWrapper = styled('span')`
     overflow: hidden;
   }
 `;
-
 export const Wrapper = styled(Card)`
   width: 100%;
   overflow: unset;
 `;
-
-type HeaderProps = {
-  collapsed?: boolean;
-};
-
 export const Header = styled('div', {
   shouldForwardProp: (prop) => prop !== 'collapsed',
-})<HeaderProps>`
+})`
   padding: ${({ theme }) => theme.spacing(2)};
   cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
 `;
-
 export const Content = styled('div')`
   border: 1px solid ${({ theme }) => alpha(theme.palette.divider, 0.8)};
   border-left: none;