Skip to content

Commit

Permalink
Integrations: Update delete modal to support custom verify prompt (#1567
Browse files Browse the repository at this point in the history
)

* Update delete modal to support custom verify prompt

Signed-off-by: Simeon Widdis <[email protected]>

* Update cypress for new delete flow

Signed-off-by: Simeon Widdis <[email protected]>

---------

Signed-off-by: Simeon Widdis <[email protected]>
(cherry picked from commit 46c23ee)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
github-actions[bot] committed Mar 19, 2024
1 parent 668a968 commit f3e9dd9
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('Add nginx integration instance flow', () => {

cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');

cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
cy.get(`input.euiFieldText[placeholder="${testInstance}"]`).focus().type(testInstance, {
delay: 50,
});
cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
Expand Down
9 changes: 6 additions & 3 deletions public/components/common/helpers/delete_modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,21 @@ export const DeleteModal = ({
onConfirm,
title,
message,
prompt,
}: {
onCancel: (
event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
title: string;
message: string;
prompt?: string;
}) => {
const [value, setValue] = useState('');
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
const deletePrompt = prompt ?? 'delete';
return (
<EuiOverlayMask>
<EuiModal onClose={onCancel} initialFocus="[name=input]">
Expand All @@ -49,10 +52,10 @@ export const DeleteModal = ({
<EuiText>The action cannot be undone.</EuiText>
<EuiSpacer />
<EuiForm>
<EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
<EuiFormRow label={`To confirm deletion, enter "${deletePrompt}" in the text field`}>
<EuiFieldText
name="input"
placeholder="delete"
placeholder={deletePrompt}
value={value}
onChange={(e) => onChange(e)}
data-test-subj="popoverModal__deleteTextInput"
Expand All @@ -67,7 +70,7 @@ export const DeleteModal = ({
onClick={() => onConfirm()}
color="danger"
fill
disabled={value !== 'delete'}
disabled={value !== deletePrompt}
data-test-subj="popoverModal__deleteButton"
>
Delete
Expand Down
26 changes: 15 additions & 11 deletions public/components/integrations/components/added_integration.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ export function AddedIntegration(props: AddedIntegrationProps) {

const { setToast } = useToast();

const [stateData, setData] = useState<any>({ data: {} });
const [stateData, setData] = useState<{ data: IntegrationInstanceResult | undefined }>({
data: undefined,
});

useEffect(() => {
chrome.setBreadcrumbs([
Expand All @@ -73,7 +75,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
const [isModalVisible, setIsModalVisible] = useState(false);
const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);

const getModal = () => {
const activateDeleteModal = (integrationName?: string) => {
setModalLayout(
<DeleteModal
onConfirm={() => {
Expand All @@ -83,8 +85,9 @@ export function AddedIntegration(props: AddedIntegrationProps) {
onCancel={() => {
setIsModalVisible(false);
}}
title={`Delete Assets`}
message={`Are you sure you want to delete the selected asset(s)?`}
title={`Delete Integration`}
message={`Are you sure you want to delete the selected Integration?`}
prompt={integrationName}
/>
);
setIsModalVisible(true);
Expand All @@ -97,6 +100,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
setToast(`${stateData.data?.name} integration successfully deleted!`, 'success');
})
.catch((err) => {
console.error(err);

Check warning on line 103 in public/components/integrations/components/added_integration.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/integrations/components/added_integration.tsx#L103

Added line #L103 was not covered by tests
setToast(`Error deleting ${stateData.data?.name} or its assets`, 'danger');
})
.finally(() => {
Expand All @@ -110,7 +114,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
.then((exists) => setData(exists));
}

function AddedOverview(overviewProps: any) {
function AddedOverview(overviewProps: { data: { data?: IntegrationInstanceResult } }) {
const { data } = overviewProps.data;

return (
Expand All @@ -136,7 +140,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
aria-label="Delete"
color="danger"
onClick={() => {
getModal();
activateDeleteModal(data?.name);

Check warning on line 143 in public/components/integrations/components/added_integration.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/integrations/components/added_integration.tsx#L143

Added line #L143 was not covered by tests
}}
data-test-subj="deleteInstanceButton"
/>
Expand Down Expand Up @@ -165,12 +169,12 @@ export function AddedIntegration(props: AddedIntegrationProps) {
);
}

function AddedAssets(assetProps: any) {
function AddedAssets(assetProps: { data: { data?: { assets: AssetReference[] } } }) {
const { data } = assetProps.data;

const assets = data?.assets || [];

const renderAsset = (record: any) => {
const renderAsset = (record: AssetReference) => {
switch (record.assetType) {
case 'dashboard':
return (
Expand Down Expand Up @@ -259,13 +263,13 @@ export function AddedIntegration(props: AddedIntegrationProps) {
name: 'Type',
sortable: true,
truncateText: true,
render: (value, record) => (
<EuiText data-test-subj={`${record.type}IntegrationDescription`}>
render: (_value, record) => (
<EuiText data-test-subj={`${record.assetType}AssetTypeDescription`}>

Check warning on line 267 in public/components/integrations/components/added_integration.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/integrations/components/added_integration.tsx#L267

Added line #L267 was not covered by tests
{_.truncate(record.assetType, { length: 100 })}
</EuiText>
),
},
] as Array<EuiTableFieldDataColumnType<any>>;
] as Array<EuiTableFieldDataColumnType<AssetReference>>;

return (
<EuiPanel>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
<EuiIcon
type={'trash'}
onClick={() => {
getModal(record.id, record.templateName);
activateDeleteModal(record.id, record.name);

Check warning on line 82 in public/components/integrations/components/added_integration_table.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/integrations/components/added_integration_table.tsx#L82

Added line #L82 was not covered by tests
}}
/>
),
Expand All @@ -103,7 +103,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
});
}

const getModal = (integrationInstanceId: string, name: string) => {
const activateDeleteModal = (integrationInstanceId: string, name: string) => {
setModalLayout(
<DeleteModal
onConfirm={() => {
Expand All @@ -113,8 +113,9 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
onCancel={() => {
setIsModalVisible(false);
}}
title={`Delete Assets`}
message={`Are you sure you want to delete the selected asset(s)?`}
title={`Delete Integration`}
message={`Are you sure you want to delete the selected integration?`}
prompt={name}
/>
);
setIsModalVisible(true);
Expand Down

0 comments on commit f3e9dd9

Please sign in to comment.