Skip to content

Commit

Permalink
move file
Browse files Browse the repository at this point in the history
  • Loading branch information
dbadura committed Jan 27, 2025
1 parent 043e79e commit 0246806
Show file tree
Hide file tree
Showing 3 changed files with 269 additions and 252 deletions.
259 changes: 259 additions & 0 deletions src/components/KymaModules/KymaModules.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
import { useRecoilState } from 'recoil';
import { columnLayoutState } from 'state/columnLayoutAtom';
import { useUrl } from 'hooks/useUrl';
import { useParams } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { useDeleteResource } from 'shared/hooks/useDeleteResource.js';
import { t } from 'i18next';
import { useGet } from 'shared/hooks/BackendAPI/useGet.js';
import { cloneDeep } from 'lodash';
import { useNotification } from 'shared/contexts/NotificationContext';
import { useCreateResource } from 'shared/ResourceForm/useCreateResource.js';
import { Button, FlexibleColumnLayout } from '@ui5/webcomponents-react';
import { createPortal } from 'react-dom';
import ExtensibilityDetails from '../Extensibility/ExtensibilityDetails.js';
import { ResourceCreate } from 'shared/components/ResourceCreate/ResourceCreate.js';
import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary.js';

const KymaModulesList = React.lazy(() => import('./KymaModulesList'));

const KymaModulesAddModule = React.lazy(() => import('./KymaModulesAddModule'));

export const KymaModules = ({ defaultColumn = 'list', namespaced = false }) => {
const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
const { clusterUrl, namespaceUrl } = useUrl();
const layout = 'OneColumn';
const url = namespaced
? namespaceUrl('kymamodules')
: clusterUrl('kymamodules');

if (layoutState.layout === layout) {
window.history.pushState(window.history.state, '', url);
}

const { resourceName, resourceType, namespace } = useParams();

const initialLayoutState = {
layout: layout,
midColumn: {
resourceName: resourceName,
resourceType: resourceType,
namespaceId: namespace,
},
endColumn: null,
};

useEffect(() => {
if (layout && resourceName && resourceType) {
setLayoutColumn(initialLayoutState);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [layout, namespace, resourceName, resourceType]);

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',
);
const kymaResourceName =
kymaResources?.items.find(kymaResource => kymaResource?.status)?.metadata
.name || kymaResources?.items[0]?.metadata?.name;
const resourceUrl = `/apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas/${kymaResourceName}`;

const { data: kymaResource, loading: kymaResourceLoading } = useGet(
resourceUrl,
{
pollingInterval: 3000,
skip: !kymaResourceName,
},
);
const [activeKymaModules, setActiveKymaModules] = useState(
kymaResource?.spec?.modules ?? [],
);
const [detailsOpen, setDetailsOpen] = useState(false);
const [openedModuleIndex, setOpenedModuleIndex] = useState();
useEffect(() => {
if (kymaResource) {
setActiveKymaModules(kymaResource?.spec?.modules || []);
setKymaResourceState(kymaResource);
setInitialUnchangedResource(cloneDeep(kymaResource));
}
}, [kymaResource]);

useEffect(() => {
if (layoutState?.layout) {
setDetailsOpen(layoutState?.layout !== 'OneColumn');
}
}, [layoutState]);

const [initialUnchangedResource, setInitialUnchangedResource] = useState();
const [kymaResourceState, setKymaResourceState] = useState();
const notification = useNotification();
const handleModuleUninstall = useCreateResource({
singularName: 'Kyma',
pluralKind: 'Kymas',
resource: kymaResourceState,
initialUnchangedResource: initialUnchangedResource,
createUrl: resourceUrl,
afterCreatedFn: () =>
notification.notifySuccess({
content: t('kyma-modules.module-uninstall'),
}),
});

let startColumnComponent = null;

const headerActions = (
<div>
<Button onClick={() => handleResourceDelete({})} design="Transparent">
{t('common.buttons.delete-module')}
</Button>
{createPortal(
<DeleteMessageBox
resourceTitle={activeKymaModules[openedModuleIndex]?.name}
deleteFn={() => {
activeKymaModules.splice(openedModuleIndex, 1);
setKymaResourceState({
...kymaResource,
spec: {
...kymaResource.spec,
modules: activeKymaModules,
},
});
handleModuleUninstall();
setInitialUnchangedResource(cloneDeep(kymaResourceState));
setLayoutColumn({
layout: 'OneColumn',
midColumn: null,
endColumn: null,
});
}}
/>,
document.body,
)}
</div>
);

if (!layout && defaultColumn === 'details') {
startColumnComponent = (
<ExtensibilityDetails
layoutCloseCreateUrl={url}
resourceName={layoutState?.midColumn?.resourceName || resourceName}
resourceType={layoutState?.midColumn?.resourceType || resourceType}
namespaceId={
layoutState?.midColumn?.namespaceId ||
layoutState?.midColumn?.namespaceId === ''
? layoutState?.midColumn?.namespaceId
: namespace
}
isModule={true}
headerActions={headerActions}
/>
);
} else {
startColumnComponent = (
<KymaModulesList
DeleteMessageBox={DeleteMessageBox}
handleResourceDelete={handleResourceDelete}
handleModuleUninstall={handleModuleUninstall}
setKymaResourceState={setKymaResourceState}
setInitialUnchangedResource={setInitialUnchangedResource}
resourceName={kymaResourceName}
resourceUrl={resourceUrl}
kymaResource={kymaResource}
kymaResourceLoading={kymaResourceLoading}
kymaResourcesLoading={kymaResourcesLoading}
kymaResourceState={kymaResourceState}
selectedModules={activeKymaModules}
setOpenedModuleIndex={setOpenedModuleIndex}
detailsOpen={detailsOpen}
namespaced={namespaced}
/>
);
}

let detailsMidColumn = getDetailsMidColumn(
layoutState,
{
resourceName,
resourceType,
namespace,
url,
},
headerActions,
);

const createMidColumn = (
<ResourceCreate
title={t('kyma-modules.add-module')}
confirmText={t('common.buttons.add')}
layoutCloseCreateUrl={url}
renderForm={renderProps => {
return (
<ErrorBoundary>
<KymaModulesAddModule
resourceName={kymaResourceName}
kymaResourceUrl={resourceUrl}
initialKymaResource={kymaResource}
loading={kymaResourcesLoading || kymaResourceLoading}
activeKymaModules={activeKymaModules}
initialUnchangedResource={initialUnchangedResource}
kymaResource={kymaResourceState}
setKymaResource={setKymaResourceState}
props={renderProps}
/>
</ErrorBoundary>
);
}}
/>
);

return (
<FlexibleColumnLayout
style={{ height: '100%' }}
layout={layoutState?.layout || 'OneColumn'}
startColumn={<div className="column-content">{startColumnComponent}</div>}
midColumn={
<>
{!layoutState?.showCreate &&
(defaultColumn !== 'details' || layout) && (
<div className="column-content">{detailsMidColumn}</div>
)}
{!layoutState?.midColumn &&
(defaultColumn !== 'details' || layout) && (
<div className="column-content">{createMidColumn}</div>
)}
</>
}
/>
);
};

const getDetailsMidColumn = (
layoutState,
{ resourceName, resourceType, namespace, url },
headerActions,
) => {
if (!layoutState?.showCreate && layoutState?.midColumn) {
return (
<ExtensibilityDetails
layoutCloseCreateUrl={url}
resourceName={layoutState?.midColumn?.resourceName || resourceName}
resourceType={layoutState?.midColumn?.resourceType || resourceType}
namespaceId={
layoutState?.midColumn?.namespaceId ||
layoutState?.midColumn?.namespaceId === ''
? layoutState?.midColumn?.namespaceId
: namespace
}
isModule={true}
headerActions={headerActions}
/>
);
} else {
return null;
}
};
2 changes: 1 addition & 1 deletion src/components/KymaModules/KymaModulesQuery.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useGet } from 'shared/hooks/BackendAPI/useGet';

export function useKymaModulesQuery(skip = false) {
export function useKymaModulesQuery() {
const {
data: kymaResources,
loading: loadingKymaResources,
Expand Down
Loading

0 comments on commit 0246806

Please sign in to comment.