[master] feat: add formdata version of creating helm app (#4409)

* feat: add formdata version of creating helm app

Signed-off-by: ROOMrepair <twekjz@gmail.com>

* fix: change comments to English

Signed-off-by: ROOMrepair <twekjz@gmail.com>

---------

Signed-off-by: ROOMrepair <twekjz@gmail.com>
Co-authored-by: ROOMrepair <twekjz@gmail.com>

Author: ks-ci-bot

packages/shared/src/components/Apps/AppCreate/CreateHelmApp/index.tsx

@@ -8,7 +8,7 @@ import { Templet } from '@kubed/icons';
 import { notify } from '@kubed/components';
 import { useParams } from 'react-router-dom';
 import { PackageUpload } from '../../PackageUpload';
-import { getCreateAppParams } from '../../../../utils';
+import { getCreateAppParams, getCreateAppParamsFormData } from '../../../../utils';
 import { openpitrixStore } from '../../../../stores';
 import CheckFiles from './CheckFiles';
 import CreateInfo from './CreateInfo';
@@ -22,6 +22,13 @@ type FormattedFileInfo = {
   icon?: string;
 };
 
+type FormattedFileInfoFormData = {
+  status?: string;
+  name?: string;
+  formData?: FormData;
+  icon?: string;
+};
+
 type Props = {
   visible: boolean;
   title?: ReactNode;
@@ -30,6 +37,7 @@ type Props = {
   workspace?: string;
   type?: string;
   onOk?: (data: Record<string, unknown>) => void;
+  onOkFormData?: (data: Record<string, unknown>, formData: FormData) => void;
   onCancel?: () => void;
 };
 
@@ -42,25 +50,39 @@ export function CreateHelmApp({
   description,
   onCancel,
   onOk,
+  onOkFormData,
 }: Props): JSX.Element {
   const { appName = '', workspace = ws } = useParams();
   const [appIcon, setIconStr] = useState<string>();
   const [canCreate, setCanCreate] = useState<boolean>(false);
   const [checkedFileInfo, setCheckedFileInfo] = useState<FormattedFileInfo>();
+  const [checkedFileInfoFormData, setCheckedFileInfoFormData] =
+    useState<FormattedFileInfoFormData>();
+
   // const htmlDesc = t('APP_CREATE_GUIDE', { docUrl: getWebsiteUrl() });
   const checkedUnSuccess = useMemo(
     () => checkedFileInfo?.status !== 'success',
     [checkedFileInfo?.status],
   );
 
+  const checkedUnSuccessFormData = useMemo(
+    () => checkedFileInfoFormData?.status !== 'success',
+    [checkedFileInfoFormData?.status],
+  );
+
   function initCheckedStatus(): void {
     setCheckedFileInfo(prevChecked => ({ ...prevChecked, status: 'init' }));
   }
 
+  function initCheckedStatusFormData(): void {
+    setCheckedFileInfoFormData(prevChecked => ({ ...prevChecked, status: 'init' }));
+  }
+
   function handleCancel(): void {
     onCancel?.();
     setCanCreate(false);
     initCheckedStatus();
+    initCheckedStatusFormData();
   }
 
   async function submitData(): Promise<void> {
@@ -74,6 +96,22 @@ export function CreateHelmApp({
     await fileStore.uploadPackage('CREATE_APP', data, onOk);
   }
 
+  async function submitDataFormData(): Promise<void | string> {
+    if (!checkedFileInfoFormData?.formData) {
+      return notify.error(t('UPLOAD_PACKAGE_OK_NOTE'));
+    }
+    const { formData, ...restInfo } = checkedFileInfoFormData;
+
+    const data: Record<string, unknown> = getCreateAppParamsFormData({
+      appType: 'helm',
+      workspace,
+      // package: checkedFileInfo?.base64Str,
+      ...restInfo,
+      icon: appIcon,
+    });
+    await fileStore.uploadPackageFormData('CREATE_APP', data, formData, onOkFormData);
+  }
+
   async function handleSubmit() {
     if (checkedUnSuccess) {
       return notify.error(t('UPLOAD_PACKAGE_OK_NOTE'));
@@ -87,16 +125,29 @@ export function CreateHelmApp({
     initCheckedStatus();
   }
 
+  async function handleSubmitFormData() {
+    if (checkedUnSuccessFormData) {
+      return notify.error(t('UPLOAD_PACKAGE_OK_NOTE'));
+    }
+    if (!canCreate) {
+      return setCanCreate(!canCreate);
+    }
+
+    await submitDataFormData();
+    setCanCreate(false);
+    initCheckedStatusFormData();
+  }
+
   return (
     <StyledModal
       width={960}
       titleIcon={<Templet size={40} />}
       title={title || t('UPLOAD_HELM_TITLE')}
       description={description || t('UPLOAD_HELM_CHART_DESC')}
       visible={visible}
-      onOk={handleSubmit}
+      onOk={onOkFormData ? handleSubmitFormData : handleSubmit}
       onCancel={handleCancel}
-      okButtonProps={{ disabled: checkedUnSuccess }}
+      okButtonProps={{ disabled: onOkFormData ? checkedUnSuccessFormData : checkedUnSuccess }}
     >
       <IconHelm size={60} />
       <PackageUpload
@@ -105,18 +156,24 @@ export function CreateHelmApp({
         canCreate={canCreate}
         workspace={workspace}
         onCheckStatusChange={setCheckedFileInfo}
+        initCheckedStatus={initCheckedStatus}
+        onCheckStatusChangeFormData={onOkFormData ? setCheckedFileInfoFormData : undefined}
+        initCheckedStatusFormData={initCheckedStatusFormData}
       />
       {!canCreate ? (
         <>
-          <CheckFiles unSuccess={checkedUnSuccess} />
+          <CheckFiles unSuccess={onOkFormData ? checkedUnSuccessFormData : checkedUnSuccess} />
           {/*{showOutSiteLink() && (*/}
           {/*  <div>*/}
           {/*    💁‍♂️ <span dangerouslySetInnerHTML={{ __html: htmlDesc }} />*/}
           {/*  </div>*/}
           {/*)}*/}
         </>
       ) : (
-        <CreateInfo createInfo={checkedFileInfo} onIconChange={setIconStr} />
+        <CreateInfo
+          createInfo={onOkFormData ? checkedFileInfoFormData : checkedFileInfo}
+          onIconChange={setIconStr}
+        />
       )}
     </StyledModal>
   );

packages/shared/src/components/Apps/AppCreate/index.tsx

@@ -9,14 +9,15 @@ import { Button, Modal, notify } from '@kubed/components';
 import Icon from '../../Icon';
 import { useV3action } from '../../../hooks';
 import { openpitrixStore, workspaceStore } from '../../../stores';
-import { getCreateAppParams } from '../../../utils';
+import { getCreateAppParams, getCreateAppParamsFormData } from '../../../utils';
 import { CreateHelmApp } from './CreateHelmApp';
 import { CreateYamlApp } from './CreateYamlApp';
 import { Header, HeaderFieldItem, Logo, FieldItem } from './styles';
 
 type Props = {
   visible?: boolean;
   onOk?: (data: any, params: any) => void;
+  onOkFormData?: (data: any, formData: FormData, params: any) => void;
   onCancel?: () => void;
   tableRef?: any;
   workspace?: string;
@@ -27,14 +28,15 @@ type Props = {
 
 type ModalType = 'create_helm' | 'create_yaml' | 'create_edge';
 
-const { createApp } = openpitrixStore;
+const { createApp, createAppFormData } = openpitrixStore;
 const { useFetchWorkspaceQuery } = workspaceStore;
 
 export function CreateApp({
   visible,
   onCancel,
   tableRef,
   onOk,
+  onOkFormData,
   workspace = '',
   isDetail,
   appName,
@@ -104,13 +106,35 @@ export function CreateApp({
     onCancel?.();
     tableRef?.current?.refetch();
   }
+
+  // todo When using formData and an external operation function is passed, use onOkFormData
+  async function handleCreateFormData(fileData: any, formData: FormData): Promise<void> {
+    fileData.maintainers = [{ name: globals.user.username }];
+    fileData.workspace = workspace;
+    if (onOkFormData) {
+      onOkFormData(getCreateAppParamsFormData(fileData), formData, { workspace });
+      notify.success(t('UPLOAD_SUCCESSFUL'));
+
+      setModalVisible(false);
+      onCancel?.();
+      tableRef?.current?.refetch();
+      return;
+    }
+    sessionStorage.removeItem('appType');
+    await createAppFormData({ workspace }, fileData, formData);
+    notify.success(t('UPLOAD_SUCCESSFUL'));
+    setModalVisible(false);
+    onCancel?.();
+    tableRef?.current?.refetch();
+  }
   function renderModal() {
     if (modalType === 'create_helm') {
       return (
         <CreateHelmApp
           visible={modalVisible}
           onCancel={() => setModalVisible(false)}
           onOk={handleCreate}
+          onOkFormData={!onOk || onOkFormData ? handleCreateFormData : undefined}
         />
       );
     }

packages/shared/src/components/Apps/PackageUpload/index.tsx

@@ -29,7 +29,11 @@ type Props = {
   appName?: string;
   type?: string;
   onOk?: (data: PackageInfo) => void;
+  onOkFormData?: (data: any, formData: FormData) => void;
   onCheckStatusChange?: (status: any) => void;
+  onCheckStatusChangeFormData?: (status: any) => void;
+  initCheckedStatus?: () => void;
+  initCheckedStatusFormData?: () => void;
   hasPackage?: boolean;
   canCreate?: boolean;
   canEdit?: boolean;
@@ -56,15 +60,28 @@ export function PackageUpload({
   versionID,
   type = 'CREATE_APP',
   onOk,
+  onOkFormData,
   onCheckStatusChange,
+  onCheckStatusChangeFormData,
+  initCheckedStatus,
+  initCheckedStatusFormData,
   updateTime = '',
   packageName,
   className,
   workspace: ws,
   appType,
   disabledUpload,
 }: Props): JSX.Element {
-  const { checkFile, handleFileByBase64Str, validatePackage, uploadPackage } = fileStore;
+  const {
+    checkFile,
+    checkFileFormData,
+    handleFileByBase64Str,
+    handleFileFormData,
+    validatePackage,
+    validatePackageFormData,
+    uploadPackage,
+    uploadPackageFormData,
+  } = fileStore;
   const state: Record<string, any> = {};
   const { workspace = ws } = useParams();
   const [errorInfo, setErrorInfo] = useState<any>('');
@@ -108,16 +125,58 @@ export function PackageUpload({
     }
   }
 
+  async function packageValidatorFormData(formData: FormData): Promise<any> {
+    const result = await validatePackageFormData({
+      formData,
+      appName,
+      workspace,
+    });
+    const status = result.error ? 'error' : 'success';
+    setMissFile(result.missFile);
+    setErrorInfo(result.error);
+    setUploadStatus(status);
+    onCheckStatusChangeFormData?.({ status, formData, ...result });
+
+    // todo when using formdata
+    // todo type === MODIFY_VERSION and an external operation function is passed，use onOkFormData
+    if (type === 'MODIFY_VERSION' && status === 'success') {
+      const uploadData = {
+        versionID: versionID || result.versionID,
+        appName: appName,
+        workspace,
+        name: result.versionName,
+        // package: result.base64Str || base64Str,
+      };
+      uploadPackageFormData(type, uploadData, formData, (data: any, form: FormData) => {
+        onOkFormData?.(data, form);
+      });
+      setUploadStatus('init');
+    }
+  }
+
   async function checkPackage(file: File): Promise<void> {
+    initCheckedStatusFormData?.();
+    initCheckedStatus?.();
+
     setUploadStatus('uploading');
     setFileName(file.name);
 
-    const result = checkFile?.(file, 'package');
-    if (!result) {
-      return handleFileByBase64Str?.(file, packageValidator);
+    if (onCheckStatusChangeFormData || onOkFormData) {
+      const result = checkFileFormData?.(file, 'package');
+      if (!result) {
+        return handleFileFormData?.(file, packageValidatorFormData);
+      }
+
+      setErrorInfo(result);
+    } else {
+      const result = checkFile?.(file, 'package');
+      if (!result) {
+        return handleFileByBase64Str?.(file, packageValidator);
+      }
+
+      setErrorInfo(result);
     }
 
-    setErrorInfo(result);
     setUploadStatus('error');
     return Promise.reject();
   }

packages/shared/src/stores/openpitrix/app.ts

@@ -14,6 +14,7 @@ import {
   request,
   addCreateAppUrl,
   getCreateAppParams,
+  getCreateAppParamsFormData,
 } from '../../utils';
 
 import { BaseUrlParams, defaultUrl, getBaseUrl, useBaseList } from './base';
@@ -94,6 +95,19 @@ export function createApp({ workspace }: BaseUrlParams, data: any): Promise<any>
   return request.post(addCreateAppUrl(url), getCreateAppParams(data));
 }
 
+export function createAppFormData({ workspace }: BaseUrlParams, data: any, formData: FormData) {
+  const url = getBaseUrl({ workspace }, resourceName);
+  const requestData = getCreateAppParamsFormData(data);
+  const jsonData = JSON.stringify(requestData);
+  formData.append('jsonData', jsonData);
+
+  return request.post(addCreateAppUrl(url), formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+}
+
 export function EditApp({ workspace, appName }: BaseUrlParams, params: any): Promise<any> {
   const url = getBaseUrl({ workspace, appName }, resourceName);