Skip to content

Commit 586dace

Browse files
KonradPietochaKonradPietocha
committed
Refactored components
1 parent 26c8c90 commit 586dace

File tree

6 files changed

+115
-48
lines changed

6 files changed

+115
-48
lines changed

‎src/components/BusolaExtensions/BusolaExtensionCreate.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@ import { clusterAtom } from 'state/clusterAtom';
1515
import { usePrepareLayout } from 'shared/hooks/usePrepareLayout';
1616
import { columnLayoutAtom } from 'state/columnLayoutAtom';
1717
import { useNavigate } from 'react-router';
18-
// Todo: after merge previous PR, check if this type already exists
19-
type Crd = {
20-
spec: { group: string; names: { plural: string; kind: string } };
21-
apiVersion: string;
22-
metadata: { name: string; namespace?: string };
23-
};
18+
import { Crd } from 'types';
2419

2520
type BusolaExtensionCreateProps = {
2621
formElementRef: RefObject<HTMLFormElement>;

src/components/Clusters/components/ContextChooser/ContextChooser.jsx renamed to src/components/Clusters/components/ContextChooser/ContextChooser.tsx

Lines changed: 70 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,62 +9,88 @@ import {
99
Label,
1010
List,
1111
ListItemCustom,
12+
Ui5CustomEvent,
13+
ListDomRef,
1214
} from '@ui5/webcomponents-react';
1315
import { ResourceForm } from 'shared/ResourceForm';
1416
import { getUserDetail } from './helpers';
17+
import { ResourceFormWrapperProps } from 'shared/ResourceForm/components/Wrapper';
18+
import { ListItemClickEventDetail } from '@ui5/webcomponents/dist/List';
1519

1620
import './ContextChooser.scss';
1721

18-
export function ContextChooser(params) {
19-
const kubeconfig = params.resource;
22+
type ContextChooserProps = {
23+
resource: Record<string, any>;
24+
chosenContext: string;
25+
setChosenContext: (context: string) => void;
26+
} & ResourceFormWrapperProps;
27+
28+
export function ContextChooser({
29+
resource,
30+
chosenContext,
31+
setChosenContext,
32+
...props
33+
}: ContextChooserProps) {
2034
const { t } = useTranslation();
2135

22-
if (!Array.isArray(kubeconfig.contexts)) {
36+
if (!Array.isArray(resource?.contexts)) {
2337
return '';
2438
}
2539

2640
return (
2741
<div className="add-cluster__content-container">
28-
<ResourceForm.Wrapper {...params}>
42+
<ResourceForm.Wrapper resource={resource} {...props}>
2943
<Title className="sap-margin-bottom-small" level="H5">
3044
{t('clusters.wizard.provide-context')}
3145
</Title>
3246
<ResourceForm.FormField
3347
required
34-
value={params.chosenContext}
48+
value={chosenContext}
3549
propertyPath='$["current-context"]'
3650
label={t('clusters.wizard.context')}
37-
validate={(value) => !!value}
51+
validate={(value: string) => !!value}
3852
input={({ setValue }) => (
3953
<ContextButtons
40-
contexts={kubeconfig.contexts}
41-
users={kubeconfig?.users}
54+
contexts={resource?.contexts}
55+
users={resource?.users}
4256
setValue={setValue}
43-
chosenContext={params.chosenContext}
44-
setChosenContext={params.setChosenContext}
57+
chosenContext={chosenContext}
58+
setChosenContext={setChosenContext}
4559
/>
4660
)}
4761
/>
4862
</ResourceForm.Wrapper>
4963
</div>
5064
);
5165
}
66+
67+
type ContextButtonsProps = {
68+
users?: Array<{ name: string; user: { exec: { args?: string[] } } }>;
69+
contexts: { name: string }[];
70+
chosenContext: string;
71+
setValue: (context: string) => void;
72+
setChosenContext?: (context: string) => void;
73+
};
74+
5275
export function ContextButtons({
5376
users,
5477
contexts,
55-
setValue,
5678
chosenContext,
79+
setValue,
5780
setChosenContext,
58-
}) {
81+
}: ContextButtonsProps) {
5982
return (
6083
<List
61-
onItemClick={(e) => {
62-
setValue(e?.detail?.item?.children[0]?.children[0].value);
63-
if (setChosenContext)
64-
setChosenContext(e?.detail?.item?.children[0]?.children[0].value);
84+
onItemClick={(
85+
e: Ui5CustomEvent<ListDomRef, ListItemClickEventDetail>,
86+
) => {
87+
const contextElement = e?.detail?.item?.children?.[0]
88+
?.children?.[0] as HTMLInputElement;
89+
setValue(contextElement?.value);
90+
if (setChosenContext) setChosenContext(contextElement?.value);
6591
}}
6692
>
67-
{contexts.map((context) => {
93+
{contexts?.map((context) => {
6894
return (
6995
<ListItemCustom key={context.name} style={{}}>
7096
<div>
@@ -89,7 +115,21 @@ export function ContextButtons({
89115
</List>
90116
);
91117
}
92-
export function ContextChooserMessage({ contextState, setValue, onCancel }) {
118+
119+
type ContextChooserMessageProps = {
120+
contextState?: {
121+
users?: Array<{ name: string; user: { exec: { args?: string[] } } }>;
122+
contexts?: { name: string }[];
123+
};
124+
setValue: (context: string) => void;
125+
onCancel: () => void;
126+
};
127+
128+
export function ContextChooserMessage({
129+
contextState,
130+
setValue,
131+
onCancel,
132+
}: ContextChooserMessageProps) {
93133
const { t } = useTranslation();
94134
const [chosenContext, setChosenContext] = useState('');
95135

@@ -118,10 +158,12 @@ export function ContextChooserMessage({ contextState, setValue, onCancel }) {
118158
>
119159
<List
120160
onItemClick={(e) => {
121-
setChosenContext(e?.detail?.item?.children[0]?.children[0].value);
161+
const contextElement = e?.detail?.item?.children?.[0]
162+
?.children?.[0] as HTMLInputElement;
163+
setChosenContext(contextElement?.value);
122164
}}
123165
>
124-
{contextState.contexts.map((context) => (
166+
{contextState?.contexts?.map((context) => (
125167
<ListItemCustom key={context.name} style={{}}>
126168
<div>
127169
<RadioButton
@@ -135,8 +177,8 @@ export function ContextChooserMessage({ contextState, setValue, onCancel }) {
135177
/>
136178
{contextState?.users && (
137179
<AuthContextData
138-
contextName={context.name}
139-
users={contextState.users}
180+
contextName={context?.name}
181+
users={contextState?.users}
140182
/>
141183
)}
142184
</div>
@@ -147,7 +189,12 @@ export function ContextChooserMessage({ contextState, setValue, onCancel }) {
147189
);
148190
}
149191

150-
function AuthContextData({ contextName, users }) {
192+
type AuthContextDataProps = {
193+
contextName: string;
194+
users?: Array<{ name: string; user: { exec: { args?: string[] } } }>;
195+
};
196+
197+
function AuthContextData({ contextName, users }: AuthContextDataProps) {
151198
const { t } = useTranslation();
152199

153200
const issuerUrl = getUserDetail(contextName, '--oidc-issuer-url=', users);

src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.jsx renamed to src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,27 @@ import { Title } from '@ui5/webcomponents-react';
44
import { useTranslation } from 'react-i18next';
55
import { HintButton } from 'shared/components/HintButton/HintButton';
66

7-
export function KubeconfigFileUpload({ onKubeconfigTextAdded }) {
7+
type KubeconfigFileUploadProps = {
8+
onKubeconfigTextAdded: (kubeconfigText: string) => void;
9+
};
10+
11+
export function KubeconfigFileUpload({
12+
onKubeconfigTextAdded,
13+
}: KubeconfigFileUploadProps) {
814
const { t } = useTranslation();
915
const [showTitleDescription, setShowTitleDescription] = useState(false);
1016

11-
const readFile = (file) => {
17+
const readFile = (file: File) => {
1218
return new Promise((resolve) => {
1319
const reader = new FileReader();
14-
reader.onload = (e) => resolve(e.target.result);
20+
reader.onload = (e) => resolve(e?.target?.result);
1521
reader.readAsText(file);
1622
});
1723
};
1824

19-
const onKubeconfigFileUploaded = async (files) => {
25+
const onKubeconfigFileUploaded = async (files: FileList) => {
2026
const fileContent = await readFile(files[0]);
21-
onKubeconfigTextAdded(fileContent);
27+
onKubeconfigTextAdded(fileContent as string);
2228
};
2329

2430
return (
@@ -35,6 +41,7 @@ export function KubeconfigFileUpload({ onKubeconfigTextAdded }) {
3541
/>
3642
</>
3743
</Title>
44+
{/*@ts-expect-error Type mismatch between js and ts*/}
3845
<FileInput
3946
fileInputChanged={onKubeconfigFileUploaded}
4047
acceptedFileFormats=".yaml,.yml"

src/components/Clusters/components/KubeconfigUpload/KubeconfigUpload.jsx renamed to src/components/Clusters/components/KubeconfigUpload/KubeconfigUpload.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,43 @@
1-
import { useState, useCallback } from 'react';
1+
import { useState, useCallback, RefObject } from 'react';
22
import { MessageStrip } from '@ui5/webcomponents-react';
33
import { useTranslation } from 'react-i18next';
44
import { KubeconfigFileUpload } from './KubeconfigFileUpload';
55
import jsyaml from 'js-yaml';
6+
import { ClusterDataForm } from 'components/Clusters/views/EditCluster/EditCluster';
67

78
import './KubeconfigUpload.scss';
8-
import { ClusterDataForm } from 'components/Clusters/views/EditCluster/EditCluster';
99

10-
export function KubeconfigUpload({ kubeconfig, setKubeconfig, formRef }) {
11-
const [error, setError] = useState('');
10+
type KubeconfigUploadProps = {
11+
kubeconfig: Record<string, any>;
12+
setKubeconfig: (config: Record<string, any>) => void;
13+
formRef: RefObject<HTMLDivElement>;
14+
};
15+
16+
export function KubeconfigUpload({
17+
kubeconfig,
18+
setKubeconfig,
19+
formRef,
20+
}: KubeconfigUploadProps) {
21+
const [error, setError] = useState<string | null>(null);
1222

1323
const { t } = useTranslation();
1424

1525
const updateKubeconfig = useCallback(
16-
(text) => {
26+
(text: string) => {
1727
try {
1828
const config = jsyaml.load(text);
1929

2030
if (typeof config !== 'object') {
2131
setError(t('clusters.wizard.not-an-object'));
2232
} else {
23-
setKubeconfig(config);
33+
setKubeconfig(config as Record<string, any>);
2434

2535
setError(null);
2636
}
27-
} catch ({ message }) {
37+
} catch (e) {
38+
const message = (e as Error)?.message;
2839
// get the message until the newline
29-
setError(message.substr(0, message.indexOf('\n')));
40+
setError(message.slice(0, message.indexOf('\n')));
3041
}
3142
},
3243
[t, setError, setKubeconfig],
@@ -41,9 +52,10 @@ export function KubeconfigUpload({ kubeconfig, setKubeconfig, formRef }) {
4152
}}
4253
/>
4354
</div>
55+
{/*@ts-expect-error Type mismatch between js and ts*/}
4456
<ClusterDataForm
4557
kubeconfig={kubeconfig}
46-
setResource={(modified) => {
58+
setResource={(modified: Record<string, any>) => {
4759
if (modified) setKubeconfig({ ...modified });
4860
}}
4961
onChange={updateKubeconfig}

‎src/components/CustomResources/GroupingListPage.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,9 @@ import { SearchInput } from 'shared/components/GenericList/SearchInput';
1212
import YamlUploadDialog from 'resources/Namespaces/YamlUpload/YamlUploadDialog';
1313
import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
1414
import { createPortal } from 'react-dom';
15+
import { Crd } from 'types';
1516
import './GroupingListPage.scss';
1617

17-
type Crd = {
18-
metadata: { name: string };
19-
spec: { names: { categories?: string[] }; group: string; scope: string };
20-
};
21-
2218
type GroupingListPageProps = {
2319
title: string;
2420
description?: string;

‎src/types/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,14 @@ export interface K8sAPIResource {
3939
base: string;
4040
}
4141

42+
export type Crd = {
43+
spec: {
44+
group: string;
45+
scope: string;
46+
names: { plural: string; kind: string; categories?: string[] };
47+
};
48+
apiVersion: string;
49+
metadata: { name: string; namespace?: string };
50+
};
51+
4252
export * from './kubeconfig';

0 commit comments

Comments
 (0)