Skip to content

Commit b950575

Browse files
KonradPietochaKonradPietocha
authored
fix: UX of the Modules view is very bad (#3952)
* Add Suspense for KymaModules * Reorganization of the starting and middle columns * Use deferred value for start column
1 parent 3bab426 commit b950575

File tree

1 file changed

+93
-104
lines changed

1 file changed

+93
-104
lines changed

‎src/resources/other/kymaModules.routes.js‎

Lines changed: 93 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FlexibleColumnLayout } from '@ui5/webcomponents-react';
2-
import React, { Suspense } from 'react';
2+
import React, { Suspense, useDeferredValue } from 'react';
33
import { Route, useParams } from 'react-router';
44
import { useRecoilState } from 'recoil';
55
import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
@@ -23,7 +23,7 @@ const KymaModulesAddModule = React.lazy(() =>
2323
import('../../components/KymaModules/KymaModulesAddModule'),
2424
);
2525

26-
const ColumnWraper = ({
26+
const ColumnWrapper = ({
2727
defaultColumn = 'list',
2828
namespaced = false,
2929
DeleteMessageBox,
@@ -52,102 +52,100 @@ const ColumnWraper = ({
5252
rawResourceTypeName: 'Kyma',
5353
});
5454

55-
let startColumnComponent = null;
56-
57-
if (layoutState.layout === 'OneColumn' && defaultColumn === 'details') {
58-
startColumnComponent = (
59-
<ExtensibilityDetails
60-
layoutCloseCreateUrl={url}
61-
resourceName={layoutState?.midColumn?.resourceName || resourceName}
62-
resourceType={layoutState?.midColumn?.resourceType || resourceType}
63-
namespaceId={
64-
layoutState?.midColumn?.namespaceId ||
65-
layoutState?.midColumn?.namespaceId === ''
66-
? layoutState?.midColumn?.namespaceId
67-
: namespace
68-
}
69-
isModule={true}
70-
/>
71-
);
72-
} else {
73-
startColumnComponent = <KymaModulesList namespaced={namespaced} />;
74-
}
75-
76-
let detailsMidColumn = null;
77-
if (!layoutState?.showCreate && layoutState?.midColumn) {
78-
detailsMidColumn = (
79-
<ExtensibilityDetails
80-
layoutCloseCreateUrl={url}
81-
resourceName={layoutState?.midColumn?.resourceName || resourceName}
82-
resourceType={layoutState?.midColumn?.resourceType || resourceType}
83-
namespaceId={
84-
layoutState?.midColumn?.namespaceId ||
85-
layoutState?.midColumn?.namespaceId === ''
86-
? layoutState?.midColumn?.namespaceId
87-
: namespace
88-
}
89-
isModule={true}
90-
/>
91-
);
92-
}
55+
const startColumnComponent = useDeferredValue(
56+
<div className="column-content">
57+
{layoutState.layout === 'OneColumn' && defaultColumn === 'details' ? (
58+
<ExtensibilityDetails
59+
layoutCloseCreateUrl={url}
60+
resourceName={layoutState?.midColumn?.resourceName || resourceName}
61+
resourceType={layoutState?.midColumn?.resourceType || resourceType}
62+
namespaceId={
63+
layoutState?.midColumn?.namespaceId ||
64+
layoutState?.midColumn?.namespaceId === ''
65+
? layoutState?.midColumn?.namespaceId
66+
: namespace
67+
}
68+
isModule={true}
69+
/>
70+
) : (
71+
<KymaModulesList namespaced={namespaced} />
72+
)}
73+
</div>,
74+
);
9375

94-
const createMidColumn = (
95-
<ResourceCreate
96-
title={t('kyma-modules.add-module')}
97-
confirmText={t('common.buttons.add')}
98-
layoutCloseCreateUrl={url}
99-
renderForm={renderProps => {
100-
return (
101-
<ErrorBoundary>
102-
<KymaModulesAddModule {...renderProps} />
103-
</ErrorBoundary>
104-
);
105-
}}
106-
/>
76+
const midColumnComponent = (
77+
<>
78+
{/* details */}
79+
{!layoutState?.showCreate &&
80+
layoutState?.midColumn &&
81+
(defaultColumn !== 'details' || layoutState.layout !== 'OneColumn') && (
82+
<div className="column-content">
83+
<ExtensibilityDetails
84+
layoutCloseCreateUrl={url}
85+
resourceName={
86+
layoutState?.midColumn?.resourceName || resourceName
87+
}
88+
resourceType={
89+
layoutState?.midColumn?.resourceType || resourceType
90+
}
91+
namespaceId={
92+
layoutState?.midColumn?.namespaceId ||
93+
layoutState?.midColumn?.namespaceId === ''
94+
? layoutState?.midColumn?.namespaceId
95+
: namespace
96+
}
97+
isModule={true}
98+
/>
99+
</div>
100+
)}
101+
{/* create */}
102+
{!layoutState?.midColumn &&
103+
(defaultColumn !== 'details' || layoutState.layout !== 'OneColumn') && (
104+
<div className="column-content">
105+
<ResourceCreate
106+
title={t('kyma-modules.add-module')}
107+
confirmText={t('common.buttons.add')}
108+
layoutCloseCreateUrl={url}
109+
renderForm={renderProps => {
110+
return (
111+
<ErrorBoundary>
112+
<KymaModulesAddModule {...renderProps} />
113+
</ErrorBoundary>
114+
);
115+
}}
116+
/>
117+
</div>
118+
)}
119+
</>
107120
);
108121

109122
return (
110-
<>
111-
<ModuleTemplatesContextProvider>
112-
<KymaModuleContextProvider
123+
<ModuleTemplatesContextProvider>
124+
<KymaModuleContextProvider
125+
setLayoutColumn={setLayoutColumn}
126+
layoutState={layoutState}
127+
DeleteMessageBox={DeleteMessageBox}
128+
handleResourceDelete={handleResourceDelete}
129+
showDeleteDialog={showDeleteDialog}
130+
>
131+
<CommunityModuleContextProvider
113132
setLayoutColumn={setLayoutColumn}
114133
layoutState={layoutState}
115134
DeleteMessageBox={DeleteMessageBox}
116135
handleResourceDelete={handleResourceDelete}
117136
showDeleteDialog={showDeleteDialog}
118137
>
119-
<CommunityModuleContextProvider
120-
setLayoutColumn={setLayoutColumn}
121-
layoutState={layoutState}
122-
DeleteMessageBox={DeleteMessageBox}
123-
handleResourceDelete={handleResourceDelete}
124-
showDeleteDialog={showDeleteDialog}
125-
>
138+
<Suspense fallback={<Spinner />}>
126139
<FlexibleColumnLayout
127140
style={{ height: '100%' }}
128141
layout={layoutState?.layout}
129-
startColumn={
130-
<div className="column-content">{startColumnComponent}</div>
131-
}
132-
midColumn={
133-
<>
134-
{!layoutState?.showCreate &&
135-
(defaultColumn !== 'details' ||
136-
layoutState.layout !== 'OneColumn') && (
137-
<div className="column-content">{detailsMidColumn}</div>
138-
)}
139-
{!layoutState?.midColumn &&
140-
(defaultColumn !== 'details' ||
141-
layoutState.layout !== 'OneColumn') && (
142-
<div className="column-content">{createMidColumn}</div>
143-
)}
144-
</>
145-
}
142+
startColumn={startColumnComponent}
143+
midColumn={midColumnComponent}
146144
/>
147-
</CommunityModuleContextProvider>
148-
</KymaModuleContextProvider>
149-
</ModuleTemplatesContextProvider>
150-
</>
145+
</Suspense>
146+
</CommunityModuleContextProvider>
147+
</KymaModuleContextProvider>
148+
</ModuleTemplatesContextProvider>
151149
);
152150
};
153151

@@ -161,26 +159,21 @@ const KymaModules = ({ defaultColumn, namespaced }) => {
161159
forceConfirmDelete: true,
162160
});
163161
return (
164-
<ColumnWraper
165-
defaultColumn={defaultColumn}
166-
namespaced={namespaced}
167-
DeleteMessageBox={DeleteMessageBox}
168-
handleResourceDelete={handleResourceDelete}
169-
showDeleteDialog={showDeleteDialog}
170-
/>
162+
<Suspense fallback={<Spinner />}>
163+
<ColumnWrapper
164+
defaultColumn={defaultColumn}
165+
namespaced={namespaced}
166+
DeleteMessageBox={DeleteMessageBox}
167+
handleResourceDelete={handleResourceDelete}
168+
showDeleteDialog={showDeleteDialog}
169+
/>
170+
</Suspense>
171171
);
172172
};
173173

174174
export default (
175175
<>
176-
<Route
177-
path={'kymamodules'}
178-
element={
179-
<Suspense fallback={<Spinner />}>
180-
<KymaModules />
181-
</Suspense>
182-
}
183-
/>
176+
<Route path={'kymamodules'} element={<KymaModules />} />
184177
<Route
185178
path="kymamodules/namespaces/:namespace/:resourceType/:resourceName"
186179
element={<KymaModules defaultColumn="details" />}
@@ -191,11 +184,7 @@ export default (
191184
/>
192185
<Route
193186
path={'namespaces/:globalnamespace/kymamodules'}
194-
element={
195-
<Suspense fallback={<Spinner />}>
196-
<KymaModules namespaced={true} />
197-
</Suspense>
198-
}
187+
element={<KymaModules namespaced={true} />}
199188
/>
200189
<Route
201190
path="namespaces/:globalnamespace/kymamodules/namespaces/:namespace/:resourceType/:resourceName"

0 commit comments

Comments
 (0)