YML page refactoring - Iteration 1 [BIVS-2874] (#1307)

.storybook/main.ts

@@ -9,7 +9,6 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
     "@storybook/addon-queryparams",
     "@storybook/addon-webpack5-compiler-swc",

rails/strings.rb

@@ -674,9 +674,6 @@ def strings
         load_progress: {
           loading: "Loading, wait a sec..."
         },
-        warn: {
-          title: "Uups, we found some warnings in your configuration, please consider checking them."
-        },
         store_in_repository: {
           loading: "Looking for bitrise.yml in the app repository...",
           not_found: "Couldn't find the bitrise.yml file in the app's repository. Please make sure that the file exists on the default branch and the app's Service Credential User has read rights on that.",
@@ -1020,7 +1017,6 @@ def strings
         get_org_plan_data: "/organization/<org_slug>/payment_subscription_status",
         yml_post: "/api/app/<app_slug>/config.json",
         yml_get: "/api/app/<app_slug>/config.yml",
-        yml_download: "/api/app/<app_slug>/config.yml?is_download=1",
         secrets_post: "/api/app/<app_slug>/secrets-without-values",
         secrets_get: "/api/app/<app_slug>/secrets-without-values",
         pipeline_config_get: "/app/<app_slug>/pipeline_config",

source/javascripts/_componentRegister.js

@@ -9,15 +9,14 @@ import NotificationMessageWithLink from "./components/NotificationMessageWithLin
 import StepBadge from "./components/StepBadge";
 import Toggle from "./components/Toggle";
 import UpdateConfigurationDialog from "./components/UpdateConfigurationDialog/UpdateConfigurationDialog";
-import YmlEditor from "./components/YmlEditor/YmlEditor";
-import YmlEditorHeader from "./components/YmlEditorHeader/YmlEditorHeader";
 import DiffEditorDialog from "./components/DiffEditor/DiffEditorDialog";
 import { RootComponent, withRootProvider } from "./utils/withRootProvider";
 import {
   PipelinesPage,
   SecretsPage,
   TriggersPage,
   WorkflowsPage,
+  YmlPage,
 } from "./pages";
 
 function register(component, props, injects) {
@@ -39,7 +38,8 @@ angular
     ]),
   )
   .component("rPipelinesPage", register(PipelinesPage, ["yml", "onChange"]))
-  .component("rWorkflowsPage", register(WorkflowsPage, ["yml", "onChange"]));
+  .component("rWorkflowsPage", register(WorkflowsPage, ["yml", "onChange"]))
+  .component("rYmlPage", register(YmlPage, ["ciConfigYml", "isEditorLoading", "onConfigSourceChangeSaved", "onEditorChange", "ymlSettings"]));
 
 // Components
 angular
@@ -72,29 +72,6 @@ angular
       "gitRepoSlug",
     ]),
   )
-  .component(
-    "rYmlEditorHeader",
-    register(YmlEditorHeader, [
-      "url",
-      "initialUsesRepositoryYml",
-      "appSlug",
-      "appConfig",
-      "onConfigSourceChangeSaved",
-      "repositoryYmlAvailable",
-      "isWebsiteMode",
-      "defaultBranch",
-      "gitRepoSlug",
-      "lines",
-      "split",
-      "modularYamlSupported",
-      "lastModified",
-      "initialYmlRootPath",
-    ]),
-  )
-  .component(
-    "rYmlEditor",
-    register(YmlEditor, ["yml", "readonly", "onChange", "isLoading"]),
-  )
   .component("rInfoTooltip", register(InfoTooltip, ["label"]))
   .component(
     "rToggle",

source/javascripts/components/UpdateConfigurationDialog/UpdateConfigurationDialog.stories.tsx

@@ -1,7 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { getConfig, getConfigFailed } from '../ConfigurationYmlSource/ConfigurationYmlSource.mswMocks';
+import { delay, http, HttpResponse } from 'msw';
+import { getConfig, getConfigFailed } from '@/pages/YmlPage/components/ConfigurationYmlSource.mswMocks';
 import UpdateConfigurationDialog from './UpdateConfigurationDialog';
 
+const formatYml = () => {
+  return http.post('/api/cli/format', async () => {
+    await delay();
+    return new HttpResponse('formatted ciConfigYml content from API', {
+      status: 200,
+    });
+  });
+};
+
 export default {
   component: UpdateConfigurationDialog,
   args: {
@@ -11,16 +21,21 @@ export default {
     getDataToSave: () => {
       return { key: 'value' };
     },
+    onComplete: () => {},
   },
   parameters: {
-    msw: [getConfig()],
+    msw: {
+      handlers: [formatYml(), getConfig()],
+    },
   },
 } as Meta<typeof UpdateConfigurationDialog>;
 
 export const Default: StoryObj = {};
 
 export const Failed: StoryObj = {
   parameters: {
-    msw: [getConfigFailed()],
+    msw: {
+      handlers: [getConfigFailed()],
+    },
   },
 };

source/javascripts/components/UpdateConfigurationDialog/UpdateConfigurationDialog.tsx

@@ -47,7 +47,7 @@ const UpdateConfigurationDialog = (props: UpdateConfigurationDialogProps) => {
     }
   };
 
-  const { data: ymlString = '', mutate: formatToYml } = useFormattedYml();
+  const { data: ciConfigYML = '', mutate: formatToYml } = useFormattedYml();
 
   const toast = useToast();
 
@@ -74,7 +74,8 @@ const UpdateConfigurationDialog = (props: UpdateConfigurationDialogProps) => {
 
   useEffect(() => {
     formatToYml(appConfig as BitriseYml);
-  }, [appConfig, formatToYml]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Dialog isOpen onClose={onClose} title="Update configuration YAML">
@@ -92,7 +93,7 @@ const UpdateConfigurationDialog = (props: UpdateConfigurationDialogProps) => {
         <Box display="flex" flexDir="column" gap="8" marginBlockEnd="24">
           <Button
             as="a"
-            href={`data:attachment/text,${encodeURIComponent(ymlString)}`}
+            href={`data:attachment/text,${encodeURIComponent(ciConfigYML)}`}
             target="_blank"
             download="bitrise.yml"
             variant="tertiary"
@@ -103,7 +104,7 @@ const UpdateConfigurationDialog = (props: UpdateConfigurationDialogProps) => {
           >
             Download changed version
           </Button>
-          <CopyToClipboard text={ymlString} onCopy={onCopyClick}>
+          <CopyToClipboard text={ciConfigYML} onCopy={onCopyClick}>
             <Button variant="tertiary" width="fit-content" size="sm" leftIconName="Duplicate">
               Copy changed configuration
             </Button>

source/javascripts/components/unified-editor/StartBuildDialog/StartBuildDialog.stories.tsx

@@ -22,18 +22,24 @@ export const Pipeline = {
     workflowId: undefined,
   },
   parameters: {
-    msw: [BuildApiMocks.startBuild('success')],
+    msw: {
+      handlers: [BuildApiMocks.startBuild('success')],
+    },
   },
 };
 
 export const Workflow = {
   parameters: {
-    msw: [BuildApiMocks.startBuild('success')],
+    msw: {
+      handlers: [BuildApiMocks.startBuild('success')],
+    },
   },
 };
 
 export const Error = {
   parameters: {
-    msw: [BuildApiMocks.startBuild('error')],
+    msw: {
+      handlers: [BuildApiMocks.startBuild('error')],
+    },
   },
 };