Cleanup not used files (#1306)

source/javascripts/components/ConfigurationYmlSource/ConfigurationYmlSourceDialog.tsx

@@ -26,7 +26,7 @@ import { AppConfig } from '@/models/AppConfig';
 import DateFormatter from '@/utils/dateFormatter';
 import { segmentTrack } from '@/utils/segmentTracking';
 import BitriseYmlApi from '@/core/api/BitriseYmlApi';
-import { useFormattedYml } from '../common/RepoYmlStorageActions';
+import useFormattedYml from '@/hooks/useFormattedYml';
 
 const ErrorNotification = ({ status, message }: { status?: number; message: string }) => {
   let action: NotificationProps['action'];

source/javascripts/components/UpdateConfigurationDialog/UpdateConfigurationDialog.tsx

@@ -3,10 +3,10 @@ import { Box, Button, Dialog, DialogBody, DialogFooter, Notification, Text, useT
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { AppConfig } from '@/models/AppConfig';
 import { segmentTrack } from '@/utils/segmentTracking';
+import useFormattedYml from '@/hooks/useFormattedYml';
 import useGetAppConfigFromRepoCallback from '../../hooks/api/useGetAppConfigFromRepoCallback';
 import YmlNotFoundInRepositoryError from '../common/notifications/YmlNotFoundInRepositoryError';
 import YmlInRepositoryInvalidError from '../common/notifications/YmlInRepositoryInvalidError';
-import { useFormattedYml } from '../common/RepoYmlStorageActions';
 
 type UpdateConfigurationDialogProps = {
   onClose: () => void;

source/javascripts/hooks/useFormattedYml.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { AppConfig } from '@/models/AppConfig';
+import BitriseYmlApi from '@/core/api/BitriseYmlApi';
+import useMonolithApiCallback from '@/hooks/api/useMonolithApiCallback';
+
+const identityParser = (result: string): any => result;
+
+const useFormattedYml = (appConfig: AppConfig): string => {
+  const [yml, setYml] = useState(typeof appConfig === 'string' ? appConfig : '');
+  const formatAppConfigRef = useRef<(options?: RequestInit) => void>();
+  const { failed, result, call } = useMonolithApiCallback<string>(
+    '/api/cli/format',
+    {
+      method: 'POST',
+      headers: {
+        Accept: 'application/x-yaml, application/json',
+      },
+    },
+    identityParser,
+  );
+
+  // NOTE: call function isn't referentially stable
+  useEffect(() => {
+    formatAppConfigRef.current = call;
+  });
+
+  // Set the js-yaml value as fallback, kick off format endpoint
+  useEffect(() => {
+    const yaml = BitriseYmlApi.toYml(appConfig);
+    setYml(yaml);
+
+    if (typeof appConfig === 'object') {
+      formatAppConfigRef.current?.({
+        body: JSON.stringify({
+          app_config_datastore_yaml: yaml,
+        }),
+      });
+    }
+  }, [appConfig]);
+
+  // When result finally comes in override the fallback value
+  useEffect(() => {
+    if (result && !failed) {
+      setYml(result);
+    }
+  }, [result, failed]);
+
+  return yml;
+};
+
+export default useFormattedYml;