Skip to content

Commit

Permalink
[master] feat: add formdata version of creating helm app (#4409)
Browse files Browse the repository at this point in the history 
* feat: add formdata version of creating helm app

Signed-off-by: ROOMrepair <[email protected]>

* fix: change comments to English

Signed-off-by: ROOMrepair <[email protected]>

---------

Signed-off-by: ROOMrepair <[email protected]>
Co-authored-by: ROOMrepair <[email protected]>
  • Loading branch information
@ks-ci-bot @ROOMrepair
ks-ci-bot and ROOMrepair authored Jan 3, 2025
1 parent a672c34 commit ab34638
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 13 deletions.
67 changes: 62 additions & 5 deletions packages/shared/src/components/Apps/AppCreate/CreateHelmApp/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -22,6 +22,13 @@ type FormattedFileInfo = {
icon?: string;
};

type FormattedFileInfoFormData = {
status?: string;
name?: string;
formData?: FormData;
icon?: string;
};

type Props = {
visible: boolean;
title?: ReactNode;
Expand All @@ -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;
};

Expand All @@ -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> {
Expand All @@ -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'));
Expand All @@ -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
Expand All @@ -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>
);
Expand Down
28 changes: 26 additions & 2 deletions packages/shared/src/components/Apps/AppCreate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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}
/>
);
}
Expand Down
69 changes: 64 additions & 5 deletions packages/shared/src/components/Apps/PackageUpload/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>('');
Expand Down Expand Up @@ -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();
}
Expand Down
14 changes: 14 additions & 0 deletions packages/shared/src/stores/openpitrix/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
request,
addCreateAppUrl,
getCreateAppParams,
getCreateAppParamsFormData,
} from '../../utils';

import { BaseUrlParams, defaultUrl, getBaseUrl, useBaseList } from './base';
Expand Down Expand Up @@ -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);

Expand Down
Loading

0 comments on commit ab34638

Please sign in to comment.