diff --git a/locales/en/l10n-clusterManagement-clusterSettings-clusterVisibility.js b/locales/en/l10n-clusterManagement-clusterSettings-clusterVisibility.js index e990d7c7f62..63bb9793a9a 100644 --- a/locales/en/l10n-clusterManagement-clusterSettings-clusterVisibility.js +++ b/locales/en/l10n-clusterManagement-clusterSettings-clusterVisibility.js @@ -33,4 +33,5 @@ module.exports = { 'Enter the workspace name {resource} to confirm that you understand the risks of this operation.', REMOVE_WORKSPACE_CONFIRM_PL: 'Enter the workspace names {resource} to confirm that you understand the risks of this operation.', + REMOVE_WORKSPACE_CONFIRM_TIP: 'Delete projects in the workspace', }; diff --git a/locales/es/l10n-clusterManagement-clusterSettings-clusterVisibility.js b/locales/es/l10n-clusterManagement-clusterSettings-clusterVisibility.js index 801d0a358a5..72f2a386bec 100644 --- a/locales/es/l10n-clusterManagement-clusterSettings-clusterVisibility.js +++ b/locales/es/l10n-clusterManagement-clusterSettings-clusterVisibility.js @@ -33,4 +33,5 @@ module.exports = { 'Enter the workspace name {resource} to confirm that you understand the risks of this operation.', REMOVE_WORKSPACE_CONFIRM_PL: 'Enter the workspace names {resource} to confirm that you understand the risks of this operation.', + REMOVE_WORKSPACE_CONFIRM_TIP: 'Delete projects in the workspace', }; diff --git a/locales/tc/l10n-clusterManagement-clusterSettings-clusterVisibility.js b/locales/tc/l10n-clusterManagement-clusterSettings-clusterVisibility.js index 6cc0cd87ca1..9ae99ea81bc 100644 --- a/locales/tc/l10n-clusterManagement-clusterSettings-clusterVisibility.js +++ b/locales/tc/l10n-clusterManagement-clusterSettings-clusterVisibility.js @@ -32,4 +32,5 @@ module.exports = { '請輸入企業空間名稱 {resource} 確保您已了解操作所带来的風險。', REMOVE_WORKSPACE_CONFIRM_PL: '請輸入企業空間名稱 {resource} 確保您已了解操作所带来的風險。', + REMOVE_WORKSPACE_CONFIRM_TIP: '刪除企業空間的項目', }; diff --git a/locales/zh/l10n-clusterManagement-clusterSettings-clusterVisibility.js b/locales/zh/l10n-clusterManagement-clusterSettings-clusterVisibility.js index 1281f5f4a43..659732ccbeb 100644 --- a/locales/zh/l10n-clusterManagement-clusterSettings-clusterVisibility.js +++ b/locales/zh/l10n-clusterManagement-clusterSettings-clusterVisibility.js @@ -32,4 +32,5 @@ module.exports = { '请输入企业空间名称 {resource} 确保您已了解操作所带来的风险。', REMOVE_WORKSPACE_CONFIRM_PL: '请输入企业空间名称 {resource} 确保您已了解操作所带来的风险。', + REMOVE_WORKSPACE_CONFIRM_TIP: '删除企业空间的项目', }; diff --git a/packages/console/src/pages/access/containers/Workspaces/index.tsx b/packages/console/src/pages/access/containers/Workspaces/index.tsx index 4f5fbfd94df..38853dc43e0 100644 --- a/packages/console/src/pages/access/containers/Workspaces/index.tsx +++ b/packages/console/src/pages/access/containers/Workspaces/index.tsx @@ -5,7 +5,7 @@ import React, { useRef, useState } from 'react'; import { Link } from 'react-router-dom'; -import { Banner, Field, notify, Empty, Card } from '@kubed/components'; +import { Banner, Field, notify, Empty, Card, Checkbox } from '@kubed/components'; import { Enterprise, Trash, Pen } from '@kubed/icons'; import { DataTable, @@ -32,7 +32,7 @@ import { CreateWorkspacesModal } from '../../../workspaces/components/Modals'; import type { FormattedWorkspace, WorkspaceFormValues } from '@ks-console/shared'; -import { FieldLabel, Wrapper } from './styles'; +import { FieldLabel, Wrapper, CheckboxWrapper } from './styles'; const { fetchList } = clusterStore; const { getListUrl, mapper: workspaceMapper, usePostMutation } = workspaceStore; @@ -40,6 +40,7 @@ const { getListUrl, mapper: workspaceMapper, usePostMutation } = workspaceStore; export default function Workspaces(): JSX.Element { const url = getListUrl({}); const tableRef = useRef(); + const checkkboxRef = useRef(false); const [createVisible, setCreateVisible] = useState(false); const refetch = () => { @@ -78,10 +79,45 @@ export default function Workspaces(): JSX.Element { action: 'delete', onClick: () => { const selectedRows = tableRef.current?.getSelectedFlatRows() || []; - del({ resource: selectedRows, type: 'WORKSPACE' }); - removeDashboardHistory( - globals.user.username, - selectedRows.map((r: { uid: string }) => r.uid), + const onSuccess = () => { + removeDashboardHistory( + globals.user.username, + selectedRows.map((r: { uid: string }) => r.uid), + ); + }; + del( + { + resource: selectedRows, + type: 'WORKSPACE', + child: ( + + { + checkkboxRef.current = e.target.checked; + }} + /> + + ), + onOk: async params => { + const deleteParams = selectedRows.map( + (item: { namespace?: string; name: string }) => ({ + namespace: item.namespace, + name: item.name, + deleteProject: checkkboxRef.current, + ...params, + }), + ); + await workspaceStore.batchDelete(deleteParams); + notify.success(t('DELETED_SUCCESSFULLY')); + onSuccess(); + refetch(); + }, + onCancel: () => { + checkkboxRef.current = false; + }, + }, + '', ); }, props: { @@ -110,8 +146,41 @@ export default function Workspaces(): JSX.Element { action: 'delete', show: row => !isSystemWorkspaces(row), onClick: (_, record) => { - del({ type: 'WORKSPACE', resource: [record] }); - removeDashboardHistory(globals.user.username, record.uid); + const onSuccess = () => { + removeDashboardHistory(globals.user.username, record.uid); + }; + del( + { + type: 'WORKSPACE', + resource: [record], + child: ( + + { + checkkboxRef.current = e.target.checked; + }} + /> + + ), + onOk: async params => { + const deleteParams = [record].map(item => ({ + namespace: item.namespace, + name: item.name, + deleteProject: checkkboxRef.current, + ...params, + })); + await workspaceStore.batchDelete(deleteParams); + notify.success(t('DELETED_SUCCESSFULLY')); + onSuccess(); + refetch(); + }, + onCancel: () => { + checkkboxRef.current = false; + }, + }, + '', + ); }, }, ], diff --git a/packages/console/src/pages/access/containers/Workspaces/styles.ts b/packages/console/src/pages/access/containers/Workspaces/styles.ts index 2a5ae135da3..5642098737d 100644 --- a/packages/console/src/pages/access/containers/Workspaces/styles.ts +++ b/packages/console/src/pages/access/containers/Workspaces/styles.ts @@ -20,3 +20,8 @@ export const Wrapper = styled.div` overflow-y: auto; overflow-x: hidden; `; + +export const CheckboxWrapper = styled.div` + margin-top: 12px; + color: #79879c; +`; diff --git a/packages/shared/src/components/Modals/DeleteConfirm/DeleteConfirm.tsx b/packages/shared/src/components/Modals/DeleteConfirm/DeleteConfirm.tsx index 8cb10f25fb8..4b1e06d80b4 100644 --- a/packages/shared/src/components/Modals/DeleteConfirm/DeleteConfirm.tsx +++ b/packages/shared/src/components/Modals/DeleteConfirm/DeleteConfirm.tsx @@ -31,6 +31,7 @@ interface DeleteConfirmContentProps { title?: ReactNode; tip?: string; desc?: ReactNode; + child?: ReactNode; onOk?: (data: any[] | undefined) => void; onCancel?: () => void; } @@ -67,6 +68,7 @@ export function DeleteConfirmContent({ desc, onCancel = () => {}, onOk = () => {}, + child, }: // ...rest DeleteConfirmContentProps) { // @ts-ignore @@ -163,6 +165,7 @@ DeleteConfirmContentProps) { /> )} {desc} + {child ?? child}