Skip to content

Commit

Permalink
feat: Add confirm on module delete (#3054)
Browse files Browse the repository at this point in the history 
* Add confirm on module delete

* Remove old function

* fix: find extension
  • Loading branch information
@akucharska
akucharska authored Jul 10, 2024
1 parent 3561fa4 commit f9609e7
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 70 deletions.
152 changes: 89 additions & 63 deletions src/components/KymaModules/KymaModulesList.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useTranslation } from 'react-i18next';
import { createPortal } from 'react-dom';
import jsyaml from 'js-yaml';

import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
Expand Down Expand Up @@ -35,6 +36,7 @@ import { Label } from 'shared/ResourceForm/components/Label';
import { cloneDeep } from 'lodash';
import { useCreateResource } from 'shared/ResourceForm/useCreateResource';
import { useNotification } from 'shared/contexts/NotificationContext';
import { useDeleteResource } from 'shared/hooks/useDeleteResource';
import { PopoverBadge } from 'shared/components/PopoverBadge/PopoverBadge';
import { isFormOpenState } from 'state/formOpenAtom';

Expand All @@ -50,6 +52,11 @@ export function KymaModulesList(props) {
const setIsFormOpen = useSetRecoilState(isFormOpenState);
const { clusterUrl } = useUrl();

const [DeleteMessageBox, handleResourceDelete] = useDeleteResource({
resourceType: t('kyma-modules.title'),
forceConfirmDelete: true,
});

const { data: kymaResources, loading: kymaResourcesLoading } = useGet(
'/apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas',
);
Expand Down Expand Up @@ -85,6 +92,7 @@ export function KymaModulesList(props) {
const { data: crds } = useGet(crdUrl, {
pollingInterval: 5000,
});
const [chosenModuleIndex, setChosenModuleIndex] = useState(null);

if (kymaResourcesLoading || modulesLoading || kymaResourceLoading) {
return <Spinner />;
Expand Down Expand Up @@ -123,7 +131,7 @@ export function KymaModulesList(props) {
return kymaExt?.find(ext => {
const { resource: extensionResource } =
jsyaml.load(ext.data.general, { json: true }) || {};
return extensionResource === resourceKind;
return extensionResource.kind === resourceKind;
});
};
const checkBeta = module => {
Expand All @@ -132,14 +140,7 @@ export function KymaModulesList(props) {
);
};

// TODO: Remove this function and use newfindCrd instead
const findCrd = moduleName =>
crds?.items?.find(crd =>
crd.metadata.name
.toLocaleLowerCase()
.includes(pluralize(moduleName.replace('-', '').toLocaleLowerCase())),
);
const newfindCrd = resourceKind => {
const findCrd = resourceKind => {
return crds?.items?.find(crd => crd.spec?.names?.kind === resourceKind);
};

Expand All @@ -162,7 +163,7 @@ export function KymaModulesList(props) {
const isError = moduleStatus?.state === 'Error';

const hasExtension = !!findExtension(resource?.resource?.kind);
const hasCrd = !!findCrd(resource.name);
const hasCrd = !!findCrd(resource?.resource?.kind);

return (
(isInstalled || isDeletionFailed || !isError) &&
Expand Down Expand Up @@ -205,7 +206,8 @@ export function KymaModulesList(props) {
type={
moduleStatus?.state === 'Ready'
? 'Success'
: moduleStatus?.state === 'Processing'
: moduleStatus?.state === 'Processing' ||
moduleStatus?.state === 'Deleting'
? 'None'
: moduleStatus?.state || 'None'
}
Expand All @@ -219,7 +221,8 @@ export function KymaModulesList(props) {
type={
moduleStatus?.state === 'Ready'
? 'Success'
: moduleStatus?.state === 'Processing'
: moduleStatus?.state === 'Processing' ||
moduleStatus?.state === 'Deleting'
? 'None'
: moduleStatus?.state || 'None'
}
Expand Down Expand Up @@ -284,22 +287,29 @@ export function KymaModulesList(props) {
return kymaResourceModule.name === resource.name;
});

selectedModules.splice(index, 1);
setKymaResourceState({
...kymaResource,
spec: {
...kymaResource.spec,
modules: selectedModules,
setChosenModuleIndex(index);
handleResourceDelete({
deleteFn: () => {
selectedModules.splice(index, 1);

setKymaResourceState({
...kymaResource,
spec: {
...kymaResource.spec,
modules: selectedModules,
},
});
handleModuleUninstall();
},
});
handleModuleUninstall();
},
},
];

const handleClickResource = (resourceName, resource) => {
const isExtension = !!findExtension(resource?.resource?.kind);
const moduleStatus = findStatus(resourceName);
const moduleCrd = findCrd(resource?.resource?.kind);
const skipRedirect = !hasDetailsLink(resource);

if (skipRedirect) {
Expand All @@ -315,9 +325,7 @@ export function KymaModulesList(props) {
? `${pluralize(
moduleStatus?.resource?.kind || '',
).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
: `${newfindCrd(resource?.resource?.kind)?.metadata?.name}/${
moduleStatus?.resource?.metadata?.name
}`
: `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
}`,
)
: clusterUrl(
Expand All @@ -326,16 +334,14 @@ export function KymaModulesList(props) {
? `${pluralize(
moduleStatus?.resource?.kind || '',
).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
: `${newfindCrd(resource?.resource?.kind)?.metadata?.name}/${
moduleStatus?.resource?.metadata?.name
}`
: `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
}`,
);

if (!isExtension) {
setLayoutColumn({
midColumn: {
resourceType: findCrd(resourceName)?.metadata?.name,
resourceType: moduleCrd?.metadata?.name,
resourceName: moduleStatus?.resource?.metadata?.name,
namespaceId: moduleStatus?.resource?.metadata.namespace || '',
},
Expand Down Expand Up @@ -369,43 +375,63 @@ export function KymaModulesList(props) {
};

return (
<GenericList
actions={actions}
customRowClick={handleClickResource}
extraHeaderContent={[
<Button
key="add-module"
design="Emphasized"
onClick={handleShowAddModule}
>
{t('common.buttons.add')}
</Button>,
]}
customColumnLayout={customColumnLayout}
enableColumnLayout
hasDetailsView
entries={resource?.status?.modules}
headerRenderer={headerRenderer}
rowRenderer={rowRenderer}
noHideFields={['Name', '', 'Namespace']}
displayArrow
title={'Modules'}
sortBy={{
name: (a, b) => a.name?.localeCompare(b.name),
}}
emptyListProps={{
image: 'TntComponents',
titleText: `${t('common.labels.no')} ${t(
'kyma-modules.title',
).toLocaleLowerCase()}`,
subtitleText: t('kyma-modules.no-modules-description'),
url:
'https://help.sap.com/docs/btp/sap-business-technology-platform/kyma-s-modular-approach?locale=en-US&state=DRAFT&version=Cloud',
buttonText: t('common.buttons.add'),
showButton: true,
onClick: handleShowAddModule,
}}
/>
<>
{createPortal(
<DeleteMessageBox
resourceTitle={selectedModules[chosenModuleIndex]?.name}
deleteFn={() => {
selectedModules.splice(chosenModuleIndex, 1);
setKymaResourceState({
...kymaResource,
spec: {
...kymaResource.spec,
modules: selectedModules,
},
});

handleModuleUninstall();
}}
/>,
document.body,
)}
<GenericList
actions={actions}
customRowClick={handleClickResource}
extraHeaderContent={[
<Button
key="add-module"
design="Emphasized"
onClick={handleShowAddModule}
>
{t('common.buttons.add')}
</Button>,
]}
customColumnLayout={customColumnLayout}
enableColumnLayout
hasDetailsView
entries={resource?.status?.modules}
headerRenderer={headerRenderer}
rowRenderer={rowRenderer}
noHideFields={['Name', '', 'Namespace']}
displayArrow
title={'Modules'}
sortBy={{
name: (a, b) => a.name?.localeCompare(b.name),
}}
emptyListProps={{
image: 'TntComponents',
titleText: `${t('common.labels.no')} ${t(
'kyma-modules.title',
).toLocaleLowerCase()}`,
subtitleText: t('kyma-modules.no-modules-description'),
url:
'https://help.sap.com/docs/btp/sap-business-technology-platform/kyma-s-modular-approach?locale=en-US&state=DRAFT&version=Cloud',
buttonText: t('common.buttons.add'),
showButton: true,
onClick: handleShowAddModule,
}}
/>
</>
);
};

Expand Down
17 changes: 10 additions & 7 deletions src/shared/hooks/useDeleteResource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export function useDeleteResource({
layoutNumber,
redirectBack = true,
parentCrdName,
forceConfirmDelete = false,
}) {
const { t } = useTranslation();
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
Expand Down Expand Up @@ -148,7 +149,7 @@ export function useDeleteResource({
};

const handleResourceDelete = ({ resource, resourceUrl, deleteFn }) => {
if (dontConfirmDelete) {
if (dontConfirmDelete && !forceConfirmDelete) {
performDelete(resource, resourceUrl, deleteFn);
} else {
setShowDeleteDialog(true);
Expand Down Expand Up @@ -218,12 +219,14 @@ export function useDeleteResource({
},
)}
</Text>
<CheckBox
checked={dontConfirmDelete}
onChange={() => setDontConfirmDelete(prevState => !prevState)}
text={t('common.delete-dialog.delete-confirm')}
/>
{dontConfirmDelete && (
{!forceConfirmDelete && (
<CheckBox
checked={dontConfirmDelete}
onChange={() => setDontConfirmDelete(prevState => !prevState)}
text={t('common.delete-dialog.delete-confirm')}
/>
)}
{dontConfirmDelete && !forceConfirmDelete && (
<MessageStrip design="Information" hideCloseButton>
{t('common.delete-dialog.information')}
</MessageStrip>
Expand Down

0 comments on commit f9609e7

Please sign in to comment.