Skip to content

Commit 739f5f7

Browse files
chriskarichriskari
authored
chore: Refactor cluster preview (#4655)
1 parent f02f817 commit 739f5f7

File tree

8 files changed

+88
-85
lines changed

8 files changed

+88
-85
lines changed

‎src/components/Clusters/components/ChooseStorage.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ interface ChooseStorageProps {
55
storage: string;
66
setStorage: (storage: string) => void;
77
hideLabel?: boolean;
8+
disabled?: boolean;
9+
name?: string;
810
}
911

1012
export function ChooseStorage({
1113
storage,
1214
setStorage,
1315
hideLabel = false,
16+
disabled = false,
17+
name = 'storage',
1418
}: ChooseStorageProps) {
1519
const { t } = useTranslation();
1620

@@ -30,30 +34,33 @@ export function ChooseStorage({
3034
</Label>
3135
)}
3236
<RadioButton
33-
name="storage"
37+
name={name}
3438
value="localStorage"
3539
checked={storage === 'localStorage'}
3640
text={`${t('clusters.storage.labels.localStorage')}: ${t(
3741
'clusters.storage.descriptions.localStorage',
3842
)}`}
43+
disabled={disabled}
3944
onChange={(event) => setStorage(event.target.value)}
4045
/>
4146
<RadioButton
42-
name="storage"
47+
name={name}
4348
value="sessionStorage"
4449
checked={storage === 'sessionStorage'}
4550
text={`${t('clusters.storage.labels.sessionStorage')}: ${t(
4651
'clusters.storage.descriptions.sessionStorage',
4752
)}`}
53+
disabled={disabled}
4854
onChange={(event) => setStorage(event.target.value)}
4955
/>
5056
<RadioButton
51-
name="storage"
57+
name={name}
5258
value="inMemory"
5359
checked={storage === 'inMemory'}
5460
text={`${t('clusters.storage.labels.inMemory')}: ${t(
5561
'clusters.storage.descriptions.inMemory',
5662
)}`}
63+
disabled={disabled}
5764
onChange={(event) => setStorage(event.target.value)}
5865
/>
5966
</FlexBox>

‎src/components/Clusters/components/ClusterPreview.scss‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
overflow-x: hidden;
33
margin-bottom: 4rem;
44

5+
ui5-text {
6+
display: block;
7+
}
8+
59
&__subtitle {
6-
padding-bottom: 1rem;
10+
padding-bottom: 0.5rem;
711
border-bottom: 1px solid var(--sapList_BorderColor);
812
}
913

@@ -25,21 +29,11 @@
2529
width: 100%;
2630
overflow-wrap: break-word;
2731
word-break: break-all;
28-
font-size: var(--sapFontSize);
29-
}
30-
31-
&__data-header {
32-
color: var(--sapContent_LabelColor);
33-
font-size: var(--sapFontSize);
3432
}
3533

3634
&__edit-button {
37-
align-self: flex-end;
35+
align-self: center;
3836
width: 80%;
39-
40-
@media screen and (max-width: 380px) {
41-
align-self: center;
42-
}
4337
}
4438

4539
&__storage-container {

‎src/components/Clusters/components/ClusterPreview.tsx‎

Lines changed: 50 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Button, FlexBox, RadioButton, Title } from '@ui5/webcomponents-react';
1+
import { Button, Label, Text, Title } from '@ui5/webcomponents-react';
22
import { useTranslation } from 'react-i18next';
33
import './ClusterPreview.scss';
44
import {
55
findInitialValue,
66
findInitialValues,
77
} from '../views/EditCluster/EditCluster';
88
import { getUserIndex } from '../shared';
9+
import { ChooseStorage } from './ChooseStorage';
910
import { isOIDCExec } from './oidc-params';
1011
import {
1112
Kubeconfig,
@@ -27,16 +28,16 @@ const TokenData = ({
2728
<>
2829
{execCommand && (
2930
<>
30-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
31-
{t('clusters.wizard.auth.exec-command')}:
32-
</p>
33-
<div>{execCommand}</div>
31+
<Label className="sap-margin-bottom-tiny" showColon>
32+
{t('clusters.wizard.auth.exec-command')}
33+
</Label>
34+
<Text>{execCommand}</Text>
3435
</>
3536
)}
36-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
37-
{`${t('clusters.token')}:`}
38-
</p>
39-
{token && <div className="cluster-preview__token">{token}</div>}
37+
<Label className="sap-margin-top-small sap-margin-bottom-tiny" showColon>
38+
{t('clusters.token')}
39+
</Label>
40+
{token && <Text className="cluster-preview__token">{token}</Text>}
4041
</>
4142
);
4243
};
@@ -58,34 +59,43 @@ const OidcData = ({
5859
<>
5960
{issuerUrl && (
6061
<>
61-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
62-
{t('clusters.labels.issuer-url')}:
63-
</p>
64-
<div>{issuerUrl}</div>
62+
<Label className="sap-margin-bottom-tiny" showColon>
63+
{t('clusters.labels.issuer-url')}
64+
</Label>
65+
<Text>{issuerUrl}</Text>
6566
</>
6667
)}
6768
{clientId && (
6869
<>
69-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
70-
{t('clusters.labels.client-id')}:
71-
</p>
72-
<div>{clientId}</div>
70+
<Label
71+
className="sap-margin-top-small sap-margin-bottom-tiny"
72+
showColon
73+
>
74+
{t('clusters.labels.client-id')}
75+
</Label>
76+
<Text>{clientId}</Text>
7377
</>
7478
)}
7579
{clientSecret && (
7680
<>
77-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
78-
{t('clusters.labels.client-secret')}:
79-
</p>
80-
<div>{clientSecret}</div>
81+
<Label
82+
className="sap-margin-top-small sap-margin-bottom-tiny"
83+
showColon
84+
>
85+
{t('clusters.labels.client-secret')}
86+
</Label>
87+
<Text>{clientSecret}</Text>
8188
</>
8289
)}
8390
{extraScopes && (
8491
<>
85-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
86-
{t('clusters.labels.scopes')}:
87-
</p>
88-
{<Tokens tokens={extraScopes} />}
92+
<Label
93+
className="sap-margin-top-small sap-margin-bottom-tiny"
94+
showColon
95+
>
96+
{t('clusters.labels.scopes')}
97+
</Label>
98+
<Tokens tokens={extraScopes} />
8999
</>
90100
)}
91101
</>
@@ -138,11 +148,13 @@ export function ClusterPreview({
138148
level="H5"
139149
className="cluster-preview__subtitle sap-margin-y-small"
140150
>{`1. ${t('common.headers.configuration')}`}</Title>
141-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
142-
{t('clusters.name_singular')}:
143-
</p>
144-
<div className="cluster-preview__content sap-margin-top-small sap-margin-bottom-tiny">
145-
<div>{kubeconfig?.['current-context']}</div>
151+
<div className="cluster-preview__content sap-margin-y-small">
152+
<div>
153+
<Label className="sap-margin-bottom-tiny" showColon>
154+
{t('clusters.name_singular')}
155+
</Label>
156+
<Text>{kubeconfig?.['current-context']}</Text>
157+
</div>
146158
<Button
147159
design="Transparent"
148160
onClick={() => setSelected(1)}
@@ -159,7 +171,7 @@ export function ClusterPreview({
159171
className="cluster-preview__subtitle sap-margin-y-small"
160172
>{`2. ${t('clusters.wizard.authentication')}`}</Title>
161173

162-
<div className="cluster-preview__content sap-margin-top-small sap-margin-bottom-tiny">
174+
<div className="cluster-preview__content sap-margin-y-small">
163175
<div className="cluster-preview__auth">
164176
{authenticationType === 'token' ? (
165177
<TokenData token={token} execCommand={exec?.command} />
@@ -187,39 +199,13 @@ export function ClusterPreview({
187199
level="H5"
188200
className="cluster-preview__subtitle sap-margin-y-small"
189201
>{`3. ${t('clusters.wizard.storage')}`}</Title>
190-
<p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
191-
{`${t('clusters.storage.storage-preference')}:`}
192-
</p>
193-
<div className="cluster-preview__content sap-margin-bottom-medium sap-margin-top-tiny">
194-
<FlexBox
195-
direction="Column"
196-
className="cluster-preview__storage-container"
197-
>
198-
<RadioButton
199-
checked={storage === 'localStorage'}
200-
text={`${t('clusters.storage.labels.localStorage')}: ${t(
201-
'clusters.storage.descriptions.localStorage',
202-
)}`}
203-
disabled
204-
className="cluster-preview__storage"
205-
/>
206-
<RadioButton
207-
checked={storage === 'sessionStorage'}
208-
text={`${t('clusters.storage.labels.sessionStorage')}: ${t(
209-
'clusters.storage.descriptions.sessionStorage',
210-
)}`}
211-
disabled
212-
className="cluster-preview__storage"
213-
/>
214-
<RadioButton
215-
checked={storage === 'inMemory'}
216-
text={`${t('clusters.storage.labels.inMemory')}: ${t(
217-
'clusters.storage.descriptions.inMemory',
218-
)}`}
219-
disabled
220-
className="cluster-preview__storage"
221-
/>
222-
</FlexBox>
202+
<div className="cluster-preview__content sap-margin-y-small">
203+
<ChooseStorage
204+
storage={storage}
205+
setStorage={() => {}}
206+
disabled
207+
name="storage-preview"
208+
/>
223209
<Button
224210
design="Transparent"
225211
onClick={() => {

‎src/components/Extensibility/components-form/SimpleList.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,11 @@ export function SimpleList({
117117
)}
118118
</FlexBox>
119119
{isLast(index) && inputInfo && (
120-
<Label wrappingType="Normal" style={{ marginTop: '5px' }}>
120+
<Label
121+
wrappingType="Normal"
122+
showColon={false}
123+
style={{ marginTop: '5px' }}
124+
>
121125
{inputInfo}
122126
</Label>
123127
)}

‎src/shared/ResourceForm/components/FormField.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,11 @@ export function FormField({
8787
...props,
8888
})}
8989
{inputInfo && (
90-
<Label wrappingType="Normal" style={{ marginTop: '5px' }}>
90+
<Label
91+
wrappingType="Normal"
92+
showColon={false}
93+
style={{ marginTop: '5px' }}
94+
>
9195
{inputInfoLink}
9296
</Label>
9397
)}

‎src/shared/ResourceForm/fields/K8sNameField.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,11 @@ export function K8sNameField({
7676
/>
7777
</div>
7878
{showHelp && inputInfo === undefined ? (
79-
<Label wrappingType="Normal" style={{ marginTop: '5px' }}>
79+
<Label
80+
wrappingType="Normal"
81+
showColon={false}
82+
style={{ marginTop: '5px' }}
83+
>
8084
{t('common.tooltips.k8s-name-input')}
8185
</Label>
8286
) : null}

‎src/shared/ResourceForm/fields/MultiInput.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,11 @@ export function MultiInput({
274274
);
275275
})}
276276
{inputInfo && (
277-
<Label wrappingType="Normal" style={{ marginTop: '5px' }}>
277+
<Label
278+
wrappingType="Normal"
279+
showColon={false}
280+
style={{ marginTop: '5px' }}
281+
>
278282
{inputInfoLink}
279283
</Label>
280284
)}

‎src/shared/components/Tokens.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Tag } from '@ui5/webcomponents-react';
22
import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
33

44
const Tokens = ({ tokens }) => (
5-
<>
5+
<div>
66
{tokens?.length
77
? tokens.map((scope) => (
88
<Tag
@@ -16,7 +16,7 @@ const Tokens = ({ tokens }) => (
1616
</Tag>
1717
))
1818
: EMPTY_TEXT_PLACEHOLDER}
19-
</>
19+
</div>
2020
);
2121

2222
export { Tokens };

0 commit comments

Comments
 (0)