-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Delete Workspace #24
Delete Workspace #24
Changes from all commits
c49e212
5fcb85a
2b9c602
e3be02c
686adac
8fbf143
74a2726
24d6fb8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import { | ||
EuiButton, | ||
EuiButtonEmpty, | ||
EuiFieldText, | ||
EuiModal, | ||
EuiModalBody, | ||
EuiModalFooter, | ||
EuiModalHeader, | ||
EuiModalHeaderTitle, | ||
EuiSpacer, | ||
EuiText, | ||
} from '@elastic/eui'; | ||
|
||
interface DeleteWorkspaceModalProps { | ||
selectedItems: string[]; | ||
onClose: () => void; | ||
onConfirm: () => void; | ||
} | ||
|
||
export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) { | ||
const [value, setValue] = useState(''); | ||
const { onClose, onConfirm, selectedItems } = props; | ||
|
||
return ( | ||
<EuiModal onClose={onClose}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have |
||
<EuiModalHeader> | ||
<EuiModalHeaderTitle>Delete workspace</EuiModalHeaderTitle> | ||
</EuiModalHeader> | ||
|
||
<EuiModalBody> | ||
<div style={{ lineHeight: 1.5 }}> | ||
<p>The following workspace will be permanently deleted. This action cannot be undone.</p> | ||
<ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }}> | ||
{selectedItems.map((item) => ( | ||
<li key={item}>{item}</li> | ||
))} | ||
</ul> | ||
<EuiSpacer /> | ||
<EuiText color="subdued"> | ||
To confirm your action, type <b style={{ color: '#000' }}>delete</b>. | ||
</EuiText> | ||
<EuiFieldText | ||
placeholder="delete" | ||
fullWidth | ||
value={value} | ||
onChange={(e) => setValue(e.target.value)} | ||
/> | ||
</div> | ||
</EuiModalBody> | ||
|
||
<EuiModalFooter> | ||
<EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty> | ||
<EuiButton | ||
data-test-subj="Delete Confirm button" | ||
onClick={onConfirm} | ||
fill | ||
color="danger" | ||
disabled={value !== 'delete'} | ||
> | ||
Delete | ||
</EuiButton> | ||
</EuiModalFooter> | ||
</EuiModal> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
export * from './delete_workspace_modal'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,17 +3,17 @@ | |
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React from 'react'; | ||
import React, { useState } from 'react'; | ||
import { EuiPageHeader, EuiButton, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; | ||
import { useObservable } from 'react-use'; | ||
import { of } from 'rxjs'; | ||
import { i18n } from '@osd/i18n'; | ||
import { PATHS } from '../../common/constants'; | ||
import { ApplicationStart } from '../../../../core/public'; | ||
import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public'; | ||
import { DeleteWorkspaceModal } from './delete_workspace_modal'; | ||
import { PATHS } from '../../common/constants'; | ||
import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE } from '../../common/constants'; | ||
|
||
import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public'; | ||
|
||
export const WorkspaceOverview = () => { | ||
const { | ||
services: { workspaces, application, notifications }, | ||
|
@@ -23,6 +23,43 @@ export const WorkspaceOverview = () => { | |
workspaces ? workspaces.client.currentWorkspace$ : of(null) | ||
); | ||
|
||
const workspaceId = currentWorkspace?.id; | ||
const workspaceName = currentWorkspace?.name; | ||
const [deleteWorkspaceModalVisible, setDeleteWorkspaceModalVisible] = useState(false); | ||
|
||
const deleteWorkspace = async () => { | ||
if (workspaceId) { | ||
let result; | ||
try { | ||
result = await workspaces?.client.delete(workspaceId); | ||
} catch (error) { | ||
notifications?.toasts.addDanger({ | ||
title: i18n.translate('workspace.delete.failed', { | ||
defaultMessage: 'Failed to delete workspace', | ||
}), | ||
text: error instanceof Error ? error.message : JSON.stringify(error), | ||
}); | ||
return setDeleteWorkspaceModalVisible(false); | ||
} | ||
if (result?.success) { | ||
notifications?.toasts.addSuccess({ | ||
title: i18n.translate('workspace.delete.success', { | ||
defaultMessage: 'Delete workspace successfully', | ||
}), | ||
}); | ||
} else { | ||
notifications?.toasts.addDanger({ | ||
title: i18n.translate('workspace.delete.failed', { | ||
defaultMessage: 'Failed to delete workspace', | ||
}), | ||
text: result?.error, | ||
}); | ||
} | ||
} | ||
setDeleteWorkspaceModalVisible(false); | ||
await application.navigateToApp('home'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I am not sure if there is a enum for core App name, maybe we can take a look in core dashboard repo? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Currently there is no enum for 'home', i think this part of the code can remain unchanged. |
||
}; | ||
|
||
const onUpdateWorkspaceClick = () => { | ||
if (!currentWorkspace || !currentWorkspace.id) { | ||
notifications?.toasts.addDanger({ | ||
|
@@ -42,11 +79,22 @@ export const WorkspaceOverview = () => { | |
<EuiPageHeader | ||
pageTitle="Overview" | ||
rightSideItems={[ | ||
<EuiButton color="danger" onClick={() => setDeleteWorkspaceModalVisible(true)}> | ||
Delete | ||
</EuiButton>, | ||
<EuiButton>Update</EuiButton>, | ||
<EuiButton color="danger">Delete</EuiButton>, | ||
<EuiButton onClick={onUpdateWorkspaceClick}>Update</EuiButton>, | ||
]} | ||
/> | ||
<EuiPanel> | ||
{deleteWorkspaceModalVisible && ( | ||
<DeleteWorkspaceModal | ||
onConfirm={deleteWorkspace} | ||
onClose={() => setDeleteWorkspaceModalVisible(false)} | ||
selectedItems={workspaceName ? [workspaceName] : []} | ||
/> | ||
)} | ||
<EuiTitle size="m"> | ||
<h3>Workspace</h3> | ||
</EuiTitle> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a useEffect here to reset the input value, it should not have been deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In workspace overview page, I add a variable named "deleteWorkspaceModalVisible" to control the visibility of the delete modal:
{deleteWorkspaceModalVisible && <DeleteWorkspaceModal />}
. Therefore, the input value will be reset when the delete modal changes visibility.