feat: routine with cloud env (#451)

dogu-team · Sep 20, 2023 · 8d1d4c8 · 8d1d4c8
1 parent c1ea499
commit 8d1d4c8
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 102 deletions.
diff --git a/projects/console-web-front/pages/_app.tsx b/projects/console-web-front/pages/_app.tsx
@@ -19,6 +19,8 @@ export type NextPageWithLayout<P = {}> = NextPage<P> & {
   getLayout?: (page: React.ReactElement<P>) => React.ReactNode;
 };
 
+export const IS_CLOUD = process.env.NEXT_PUBLIC_ENV === 'production';
+
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };

diff --git a/projects/console-web-front/src/components/routine/editor/RoutineCreator.tsx b/projects/console-web-front/src/components/routine/editor/RoutineCreator.tsx
@@ -18,45 +18,7 @@ import { getErrorMessageFromAxios } from '../../../utils/error';
 import useRoutineEditorStore from '../../../stores/routine-editor';
 import RoutineGUIEditor from './RoutineGUIEditor';
 import RoutineFlow from './RoutineFlow';
-
-const APP_ROUTINE_SAMPLE = `name: sample-routine
-
-on:
-  workflow_dispatch:
-
-jobs:
-  new-job-1:
-    runs-on:
-      group: []
-    appPackageName:
-    record: true
-    steps:
-      - name: run test
-        uses: dogu-actions/run-test
-        with:
-          checkout: true
-          command:
-        cwd:
-`;
-
-const WEB_ROUTINE_SAMPLE = `name: sample-routine
-
-on:
-  workflow_dispatch:
-
-jobs:
-  new-job-1:
-    runs-on: []
-    browserName:
-    record: true
-    steps:
-      - name: run test
-        uses: dogu-actions/run-test
-        with:
-          checkout: true
-          command:
-        cwd:
-`;
+import { getSampleRoutine } from '../../../resources/routine';
 
 interface Props {
   project: ProjectBase;
@@ -71,15 +33,17 @@ const RoutineCreator = ({ project }: Props) => {
   useExitBlocker(isChanged);
   const { t } = useTranslation();
 
+  const sampleRouine = getSampleRoutine(project.type);
+
   useEffect(() => {
-    updateYaml(project.type === PROJECT_TYPE.WEB ? WEB_ROUTINE_SAMPLE : APP_ROUTINE_SAMPLE);
-  }, [project.type]);
+    updateYaml(sampleRouine);
+  }, [sampleRouine]);
 
   function handleEditorOnChange() {
     if (editorRef.current) {
       const value = editorRef.current.getValue();
       updateYaml(value);
-      if (value !== (project.type === PROJECT_TYPE.WEB ? WEB_ROUTINE_SAMPLE : APP_ROUTINE_SAMPLE)) {
+      if (value !== sampleRouine) {
         setChanged(true);
         return;
       }

diff --git a/projects/console-web-front/src/components/routine/editor/RoutineGUIEditor.tsx b/projects/console-web-front/src/components/routine/editor/RoutineGUIEditor.tsx
@@ -7,6 +7,8 @@ import useRoutineEditorStore from '../../../stores/routine-editor';
 import JobContainer from './gui/JobContainer';
 import RoutineNameEditor from './gui/RoutineNameEditor';
 import { RUN_TEST_ACTION_NAME } from '../../../types/routine';
+import { CLOUD_LINUX_DEVICE_NAME } from '../../../resources/routine';
+import { IS_CLOUD } from '../../../../pages/_app';
 
 interface Props {
   projectType: PROJECT_TYPE;
@@ -19,6 +21,26 @@ const RoutineGUIEditor = ({ projectType, hideAddButton }: Props) => {
   const [schema, updateSchema] = useRoutineEditorStore((state) => [state.schema, state.updateSchema]);
   const { t } = useTranslation();
 
+  const getNewJob = (index: number): { [k: string]: JobSchema } => {
+    if (IS_CLOUD) {
+      return {
+        [`new-job-${index}`]: {
+          'runs-on': projectType === PROJECT_TYPE.WEB ? CLOUD_LINUX_DEVICE_NAME : { group: [] },
+          ...(projectType === PROJECT_TYPE.WEB ? { browserName: 'chrome' } : {}),
+          steps: [{ name: 'run-test', uses: RUN_TEST_ACTION_NAME, with: {} }],
+        },
+      };
+    }
+
+    return {
+      [`new-job-${index}`]: {
+        'runs-on': projectType === PROJECT_TYPE.WEB ? [] : { group: [] },
+        ...(projectType === PROJECT_TYPE.WEB ? { browserName: 'chrome' } : {}),
+        steps: [{ name: 'run-test', uses: RUN_TEST_ACTION_NAME, with: {} }],
+      },
+    };
+  };
+
   const handleAddJob = () => {
     const jobNames = Object.keys(schema.jobs);
     const newJobNames = jobNames.filter((name) => name.match(/^new-job-[0-9]{1,}$/));
@@ -29,10 +51,7 @@ const RoutineGUIEditor = ({ projectType, hideAddButton }: Props) => {
       ...schema,
       jobs: {
         ...schema.jobs,
-        [`new-job-${newIndex}`]: {
-          'runs-on': { group: [] },
-          steps: [{ name: 'run-test', uses: RUN_TEST_ACTION_NAME, with: {} }],
-        },
+        ...getNewJob(newIndex),
       },
     });
   };

diff --git a/projects/console-web-front/src/components/routine/editor/gui/JobContainer.tsx b/projects/console-web-front/src/components/routine/editor/gui/JobContainer.tsx
@@ -17,6 +17,7 @@ import { RUN_TEST_ACTION_NAME } from '../../../../types/routine';
 import { RoutineProjectTypeContext } from '../RoutineGUIEditor';
 import AppPackageNameContainer from './AppPackageNameContainer';
 import BrowserPicker from './BrowserPicker';
+import { IS_CLOUD } from '../../../../../pages/_app';
 
 interface NeedsProps {
   needs: JobSchema['needs'];
@@ -231,11 +232,6 @@ const JobContainer = ({ name, job, updateJob, updateJobName, deleteJob, updateJo
         updateJob({ ...job, 'runs-on': { group: newRunsOn } }, name);
         return;
       }
-      // // FIXME: henry - browser-manager
-      // else if ('browserName' in runsOn) {
-      //   updateJob({ ...job, 'runs-on': { browserName: runsOn.browserName, tag: '' } }, name);
-      //   return;
-      // }
 
       const newRunsOn = runsOn.filter((t) => t !== tag);
       updateJob({ ...job, 'runs-on': newRunsOn }, name);
@@ -394,50 +390,52 @@ const JobContainer = ({ name, job, updateJob, updateJobName, deleteJob, updateJo
           </ContentInner>
         </Content>
       )}
-      <Content>
-        <div>
-          <FlexRow style={{ marginBottom: '.25rem' }}>
-            <ContentTitle style={{ marginBottom: '0' }}>{t('routine:routineGuiEditorJobDeviceLabel')}</ContentTitle>
-            <Checkbox
-              checked={isGroupRun}
-              style={{ marginLeft: '.75rem' }}
-              onChange={(e) => {
-                if (e.target.checked) {
-                  updateJob({ ...job, 'runs-on': { group: job['runs-on'] as string | string[] } }, name);
-                } else {
-                  updateJob(
-                    {
-                      ...job,
-                      'runs-on': (job['runs-on'] as { group: string | string[] }).group as string | string[],
-                    },
-                    name,
-                  );
-                }
-              }}
-            >
-              {t('routine:routineGuiEditorJobDeviceGroupLabel')}
-            </Checkbox>
-          </FlexRow>
-          <ContentDesc>
-            {isGroupRun ? (
-              <Trans
-                i18nKey="routine:routineGuiEditorJobDeviceGroupDescription"
-                components={{ b: <b style={{ fontWeight: '600' }} /> }}
-              />
-            ) : (
-              t('routine:routineGuiEditorJobDeviceDescription')
-            )}
-          </ContentDesc>
-        </div>
-        <ContentInner>
-          <RunsOn runsOn={job['runs-on']} onDelete={handleRemoveRunsOn} />
-          <AddDeviceAndTagButton
-            group={isGroupRun}
-            onSelect={handleAddRunsOn}
-            devicePlatform={getPlatformByAppPackageName()}
-          />
-        </ContentInner>
-      </Content>
+      {!IS_CLOUD && (
+        <Content>
+          <div>
+            <FlexRow style={{ marginBottom: '.25rem' }}>
+              <ContentTitle style={{ marginBottom: '0' }}>{t('routine:routineGuiEditorJobDeviceLabel')}</ContentTitle>
+              <Checkbox
+                checked={isGroupRun}
+                style={{ marginLeft: '.75rem' }}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    updateJob({ ...job, 'runs-on': { group: job['runs-on'] as string | string[] } }, name);
+                  } else {
+                    updateJob(
+                      {
+                        ...job,
+                        'runs-on': (job['runs-on'] as { group: string | string[] }).group as string | string[],
+                      },
+                      name,
+                    );
+                  }
+                }}
+              >
+                {t('routine:routineGuiEditorJobDeviceGroupLabel')}
+              </Checkbox>
+            </FlexRow>
+            <ContentDesc>
+              {isGroupRun ? (
+                <Trans
+                  i18nKey="routine:routineGuiEditorJobDeviceGroupDescription"
+                  components={{ b: <b style={{ fontWeight: '600' }} /> }}
+                />
+              ) : (
+                t('routine:routineGuiEditorJobDeviceDescription')
+              )}
+            </ContentDesc>
+          </div>
+          <ContentInner>
+            <RunsOn runsOn={job['runs-on']} onDelete={handleRemoveRunsOn} />
+            <AddDeviceAndTagButton
+              group={isGroupRun}
+              onSelect={handleAddRunsOn}
+              devicePlatform={getPlatformByAppPackageName()}
+            />
+          </ContentInner>
+        </Content>
+      )}
       <Content>
         <div>
           <ContentTitle>{t('routine:routineGuiEditorJobScreenRecordLabel')}</ContentTitle>

diff --git a/projects/console-web-front/src/components/tutorial/routine/SeleniumRoutineTutorial.tsx b/projects/console-web-front/src/components/tutorial/routine/SeleniumRoutineTutorial.tsx
@@ -24,6 +24,8 @@ import DoneStep from './DoneStep';
 import RoutineGitTutorial from './RoutineGitTutorial';
 import TutorialRoutineCreator from './TutorialRoutineCreator';
 import DoguText from '../../common/DoguText';
+import { IS_CLOUD } from '../../../../pages/_app';
+import { CLOUD_LINUX_DEVICE_NAME } from '../../../resources/routine';
 
 const INTRODUCTION_ID = 'introduction';
 const CLONE_GIT_ID = 'clone-git';
@@ -46,11 +48,10 @@ const SeleniumRoutineTutorial = () => {
   );
   const frameworkLanguage = Object.keys(
     routineTutorialSdkSupportInfo[TutorialSupportSdk.APPIUM].frameworksPerLang,
-  ).find(
-    (language) =>
-      routineTutorialSdkSupportInfo[TutorialSupportSdk.APPIUM].frameworksPerLang[
-        language as TutorialSupportLanguage
-      ]?.includes(framework),
+  ).find((language) =>
+    routineTutorialSdkSupportInfo[TutorialSupportSdk.APPIUM].frameworksPerLang[
+      language as TutorialSupportLanguage
+    ]?.includes(framework),
   );
 
   const WEB_ROUTINE_SAMPLE = `name: sample-routine
@@ -60,7 +61,7 @@ on:
 
 jobs:
   sample-job:
-    runs-on: []
+    runs-on: ${IS_CLOUD ? CLOUD_LINUX_DEVICE_NAME : '[]'}
     browserName: chrome
     record: true
     steps:

diff --git a/projects/console-web-front/src/components/tutorial/routine/WebdriverIoRoutineTutorial.tsx b/projects/console-web-front/src/components/tutorial/routine/WebdriverIoRoutineTutorial.tsx
@@ -2,9 +2,11 @@ import { PROJECT_TYPE } from '@dogu-private/types';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
 import styled from 'styled-components';
+import { IS_CLOUD } from '../../../../pages/_app';
 
 import useTutorialContext from '../../../hooks/context/useTutorialContext';
 import useTutorialSelector from '../../../hooks/useTutorialSelector';
+import { CLOUD_LINUX_DEVICE_NAME } from '../../../resources/routine';
 import {
   ROUTINE_SAMPLE_GIT_URL,
   TutorialSupportLanguage,
@@ -100,7 +102,7 @@ on:
 
 jobs:
   sample-job:
-    runs-on: []
+    runs-on: ${IS_CLOUD ? CLOUD_LINUX_DEVICE_NAME : '[]'}
     browserName: chrome
     record: true
     steps:
@@ -114,6 +116,8 @@ jobs:
         cwd: ${selectedGuide?.cwd ?? ''}
 `;
 
+  console.log(WEB_ROUTINE_SAMPLE);
+
   if (!project) {
     return <ErrorBox title="Something went wrong" desc="Project not found" />;
   }