Skip to content

Commit bbd9339

Browse files
andreaskienleandreaskienle
committed
Fixes
1 parent 06ecd0a commit bbd9339

File tree

7 files changed

+105
-123
lines changed

7 files changed

+105
-123
lines changed

‎public/locales/en.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,9 @@
119119
"DeleteConfirmationDialog": {
120120
"deleteButton": "Delete",
121121
"cancelButton": "Cancel",
122-
"deleteMessage": "You are about to delete the resource",
123-
"deleteMessageType": "Please type",
124-
"deleteMessageConfirm": "to confirm deletion!"
122+
"header": "Delete {{resourceName}}",
123+
"deleteMessage": "You are about to delete the resource <b>{{resourceName}}</b>.",
124+
"deleteConfirmation": "To confirm, type “{{resourceName}}” in the box below"
125125
},
126126
"Loading": {
127127
"title": "Getting Ready",
@@ -296,8 +296,7 @@
296296
"search": "Search",
297297
"components": "Components",
298298
"notSelected": "Not selected",
299-
"btp": "BTP",
300-
"options": "Options"
299+
"btp": "BTP"
301300
},
302301
"buttons": {
303302
"viewResource": "View resource",

‎src/components/Dialogs/DeleteConfirmationDialog.cy.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,9 @@ describe('DeleteConfirmationDialog', () => {
2222

2323
cy.get('ui5-dialog').should('be.visible').should('have.attr', 'open');
2424

25-
cy.contains('Confirm deletion').should('be.visible');
25+
cy.contains('Delete test-resource').should('be.visible');
2626

27-
cy.contains('You are about to delete the resource test-resource').should(
28-
'be.visible',
29-
);
27+
cy.contains('You are about to delete the resource test-resource').should('be.visible');
3028
});
3129

3230
it('should not be visible when isOpen is false', () => {
@@ -44,19 +42,15 @@ describe('DeleteConfirmationDialog', () => {
4442
it('should enable Delete button when correct resource name is typed', () => {
4543
mountDialog();
4644

47-
cy.get('ui5-input[id*="mcp-name-input"]')
48-
.find(' input[id*="inner"]')
49-
.type('test-resource', { force: true });
45+
cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
5046

5147
cy.get('ui5-button').contains('Delete').should('not.have.attr', 'disabled');
5248
});
5349

5450
it('should keep Delete button disabled when incorrect name is typed', () => {
5551
mountDialog();
5652

57-
cy.get('ui5-input[id*="mcp-name-input"]')
58-
.find(' input[id*="inner"]')
59-
.type('wrong-name', { force: true });
53+
cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('wrong-name', { force: true });
6054

6155
cy.get('ui5-button').contains('Delete').should('have.attr', 'disabled');
6256
});
@@ -74,9 +68,7 @@ describe('DeleteConfirmationDialog', () => {
7468
it('should call onDeletionConfirmed and setIsOpen when Delete is confirmed', () => {
7569
mountDialog();
7670

77-
cy.get('ui5-input[id*="mcp-name-input"]')
78-
.find(' input[id*="inner"]')
79-
.type('test-resource');
71+
cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource');
8072

8173
cy.get('ui5-button').contains('Delete').click();
8274

@@ -90,30 +82,22 @@ describe('DeleteConfirmationDialog', () => {
9082
mountDialog();
9183

9284
// Type something
93-
cy.get('ui5-input[id*="mcp-name-input"]')
94-
.find(' input[id*="inner"]')
95-
.type('test-resource', { force: true });
85+
cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
9686

9787
// Close dialog
9888
cy.get('ui5-button').contains('Cancel').click();
9989

10090
// Reopen dialog
10191
mountDialog();
10292

103-
cy.get('ui5-input[id*="mcp-name-input"]')
104-
.find(' input[id*="inner"]')
105-
.should('have.value', '');
93+
cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').should('have.value', '');
10694
});
10795

10896
it('should display correct resource name in all labels', () => {
10997
mountDialog({ resourceName: 'custom-resource' });
11098

111-
cy.contains('You are about to delete the resource custom-resource.').should(
112-
'be.visible',
113-
);
99+
cy.contains('You are about to delete the resource custom-resource.').should('be.visible');
114100

115-
cy.contains('Please type custom-resource to confirm deletion!').should(
116-
'be.visible',
117-
);
101+
cy.contains('To confirm, type “custom-resource” in the box below').should('be.visible');
118102
});
119103
});

‎src/components/Dialogs/DeleteConfirmationDialog.module.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.dialogContent {
2+
display: flex;
3+
flex-direction: column;
4+
margin-block-end: 1rem;
5+
align-items: flex-start;
6+
}
7+
8+
.message {
9+
color: var(--sapContent_LabelColor);
10+
}
11+
12+
.confirmLabel {
13+
margin-block-start: 1rem;
14+
font-weight: bold;
15+
}
16+
17+
.confirmationInput {
18+
width: 100%;
19+
}
20+

‎src/components/Dialogs/DeleteConfirmationDialog.tsx‎

Lines changed: 65 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { ReactNode, useEffect, useRef, useState } from 'react';
2-
import { Bar, Button, Dialog, Form, FormGroup, FormItem, Input, InputDomRef, Label } from '@ui5/webcomponents-react';
1+
import { ReactNode, useState } from 'react';
2+
import { Bar, Button, Dialog, Input, InputDomRef, Label } from '@ui5/webcomponents-react';
33
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
4-
import { useTranslation } from 'react-i18next';
4+
import { Trans, useTranslation } from 'react-i18next';
5+
6+
import styles from './DeleteConfirmationDialog.module.css';
7+
import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
58

69
interface DeleteConfirmationDialogProps {
710
isOpen: boolean;
@@ -20,89 +23,70 @@ export function DeleteConfirmationDialog({
2023
onCanceled,
2124
kubectl,
2225
}: DeleteConfirmationDialogProps) {
23-
const [confirmed, setConfirmed] = useState(false);
24-
const confirmationInput = useRef<InputDomRef>(null);
26+
const [confirmationText, setConfirmationText] = useState('');
2527
const { t } = useTranslation();
2628

27-
useEffect(() => {
28-
return () => {
29-
setConfirmed(false);
30-
if (confirmationInput.current) {
31-
confirmationInput.current.value = '';
32-
}
33-
};
34-
}, [isOpen]);
35-
36-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
37-
const onConfirmationInputChange = (event: any) => {
38-
if (event.target.value === resourceName) {
39-
setConfirmed(true);
40-
} else {
41-
setConfirmed(false);
42-
}
29+
const onConfirmationInputChange = (event: Ui5CustomEvent<InputDomRef>) => {
30+
setConfirmationText(event.target.value);
4331
};
4432

33+
const isConfirmed = confirmationText === resourceName;
34+
4535
return (
46-
<>
47-
<Dialog
48-
stretch={false}
49-
headerText="Confirm deletion"
50-
open={isOpen}
51-
footer={
52-
<Bar
53-
design="Footer"
54-
endContent={
55-
<>
56-
<Button
57-
design={ButtonDesign.Transparent}
58-
onClick={() => {
59-
setIsOpen(false);
60-
onCanceled && onCanceled();
61-
}}
62-
>
63-
{t('DeleteConfirmationDialog.cancelButton')}
64-
</Button>
65-
<Button
66-
design={ButtonDesign.Negative}
67-
disabled={!confirmed}
68-
onClick={() => {
69-
setIsOpen(false);
70-
onDeletionConfirmed && onDeletionConfirmed();
71-
}}
72-
>
73-
{t('DeleteConfirmationDialog.deleteButton')}
74-
</Button>
75-
</>
76-
}
36+
<Dialog
37+
stretch={false}
38+
headerText={t('DeleteConfirmationDialog.header', { resourceName })}
39+
open={isOpen}
40+
footer={
41+
<Bar
42+
design="Footer"
43+
endContent={
44+
<>
45+
<Button
46+
design={ButtonDesign.Transparent}
47+
onClick={() => {
48+
setIsOpen(false);
49+
onCanceled && onCanceled();
50+
}}
51+
>
52+
{t('DeleteConfirmationDialog.cancelButton')}
53+
</Button>
54+
<Button
55+
design={ButtonDesign.Negative}
56+
disabled={!isConfirmed}
57+
onClick={() => {
58+
setIsOpen(false);
59+
onDeletionConfirmed && onDeletionConfirmed();
60+
}}
61+
>
62+
{t('DeleteConfirmationDialog.deleteButton')}
63+
</Button>
64+
{kubectl}
65+
</>
66+
}
67+
/>
68+
}
69+
>
70+
<div className={styles.dialogContent}>
71+
<span className={styles.message}>
72+
<Trans
73+
i18nKey="DeleteConfirmationDialog.deleteMessage"
74+
values={{ resourceName }}
75+
components={{
76+
b: <b />,
77+
}}
7778
/>
78-
}
79-
>
80-
<Form layout="S1 M1 L1 XL1">
81-
<FormGroup>
82-
<Label>
83-
{t('DeleteConfirmationDialog.deleteMessage')} {resourceName}.
84-
</Label>
85-
<Label>
86-
{' '}
87-
{t('DeleteConfirmationDialog.deleteMessageType')} <b>{resourceName}</b>{' '}
88-
{t('DeleteConfirmationDialog.deleteMessageConfirm')}
89-
</Label>
90-
</FormGroup>
91-
<FormGroup>
92-
<FormItem
93-
labelContent={
94-
<Label>
95-
{t('DeleteConfirmationDialog.deleteMessageType')} {resourceName}{' '}
96-
{t('DeleteConfirmationDialog.deleteMessageConfirm')}
97-
</Label>
98-
}
99-
>
100-
<Input ref={confirmationInput} id="mcp-name-input" placeholder="" onInput={onConfirmationInputChange} />
101-
</FormItem>
102-
<FormItem>{kubectl}</FormItem>
103-
</FormGroup>
104-
</Form>
105-
</Dialog>
106-
</>
79+
</span>
80+
<Label className={styles.confirmLabel} for="mcp-name-input">
81+
{t('DeleteConfirmationDialog.deleteConfirmation', { resourceName })}
82+
</Label>
83+
<Input
84+
id="mcp-name-input"
85+
value={confirmationText}
86+
className={styles.confirmationInput}
87+
onInput={onConfirmationInputChange}
88+
/>
89+
</div>
90+
</Dialog>
10791
);
10892
}

‎src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteProject.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useState } from 'react';
22

33
import { KubectlInfoButton } from '../KubectlInfoButton';
4-
import { DeleteProjectDialog } from '../KubectlDeleteProjectDialog.tsx';
4+
import { KubectlDeleteProjectDialog } from '../KubectlDeleteProjectDialog.tsx';
55

6-
interface KubectlDeleteWorkspaceProps {
6+
interface KubectlDeleteProjectProps {
77
projectName?: string;
88
}
99

10-
export const KubectlDeleteProject = ({ projectName }: KubectlDeleteWorkspaceProps) => {
10+
export const KubectlDeleteProject = ({ projectName }: KubectlDeleteProjectProps) => {
1111
const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
1212

1313
const openInfoDialog = () => setIsInfoDialogOpen(true);
@@ -16,7 +16,7 @@ export const KubectlDeleteProject = ({ projectName }: KubectlDeleteWorkspaceProp
1616
return (
1717
<>
1818
<KubectlInfoButton onClick={openInfoDialog} />
19-
<DeleteProjectDialog projectName={projectName} isOpen={isInfoDialogOpen} onClose={closeInfoDialog} />
19+
<KubectlDeleteProjectDialog projectName={projectName} isOpen={isInfoDialogOpen} onClose={closeInfoDialog} />
2020
</>
2121
);
2222
};

‎src/components/Dialogs/KubectlCommandInfo/KubectlDeleteProjectDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { Text } from '@ui5/webcomponents-react';
33
import { useTranslation, Trans } from 'react-i18next';
44
import { Fragment } from 'react/jsx-runtime';
55

6-
interface DeleteProjectDialogProps {
6+
interface KubectlDeleteProjectDialogProps {
77
onClose: () => void;
88
resourceName?: string;
99
projectName?: string;
1010
isOpen: boolean;
1111
}
1212

13-
export const DeleteProjectDialog = ({ onClose, projectName, isOpen }: DeleteProjectDialogProps) => {
13+
export const KubectlDeleteProjectDialog = ({ onClose, projectName, isOpen }: KubectlDeleteProjectDialogProps) => {
1414
const { t } = useTranslation();
1515

1616
const projectNamespace = projectName ?? '<project-names>"';
@@ -32,7 +32,7 @@ export const DeleteProjectDialog = ({ onClose, projectName, isOpen }: DeleteProj
3232
</Text>
3333
<Text>
3434
<Trans
35-
i18nKey={t('DeleteProjectDialog.introSection2')}
35+
i18nKey="DeleteProjectDialog.introSection2"
3636
components={{
3737
bold1: <b />,
3838
bold2: <b />,

‎src/lib/api/types/crate/deleteProject.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import { Resource } from '../resource';
22

3-
export interface DeleteProjectType {
4-
name: string;
5-
namespace: string;
6-
}
7-
83
export const DeleteProjectResource = (projectName: string): Resource<undefined> => {
94
return {
105
path: `/apis/core.openmcp.cloud/v1alpha1/projects/${projectName}`,

0 commit comments

Comments
 (0)