[Enterprise Search] Fix index delete modal (#142447) (#142705)

* Disable index delete button during process

* Change cancel to close during delete process

(cherry picked from commit cc263538ad)

Co-authored-by: Nav <13634519+navarone-feekery@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2022-10-05 04:31:49 -06:00 committed by GitHub
parent 77fdc2660a
commit 3fa9cb480c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 7 deletions

View file

@ -22,6 +22,7 @@ export const DeleteIndexModal: React.FC = () => {
deleteModalIndexName: indexName,
deleteModalIngestionMethod: ingestionMethod,
isDeleteModalVisible,
isDeleteLoading,
} = useValues(IndicesLogic);
return isDeleteModalVisible ? (
<EuiConfirmModal
@ -35,12 +36,21 @@ export const DeleteIndexModal: React.FC = () => {
onConfirm={() => {
deleteIndex({ indexName });
}}
cancelButtonText={i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.deleteModal.cancelButton.title',
{
defaultMessage: 'Cancel',
}
)}
cancelButtonText={
isDeleteLoading
? i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.deleteModal.closeButton.title',
{
defaultMessage: 'Close',
}
)
: i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.deleteModal.cancelButton.title',
{
defaultMessage: 'Cancel',
}
)
}
confirmButtonText={i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.deleteModal.confirmButton.title',
{
@ -49,6 +59,7 @@ export const DeleteIndexModal: React.FC = () => {
)}
defaultFocusedButton="confirm"
buttonColor="danger"
isLoading={isDeleteLoading}
>
<p>
{i18n.translate(

View file

@ -31,8 +31,10 @@ const DEFAULT_VALUES = {
deleteModalIndex: null,
deleteModalIndexName: '',
deleteModalIngestionMethod: IngestionMethod.API,
deleteStatus: Status.IDLE,
hasNoIndices: false,
indices: [],
isDeleteLoading: false,
isDeleteModalVisible: false,
isFirstRequest: true,
isLoading: true,
@ -255,6 +257,36 @@ describe('IndicesLogic', () => {
});
});
});
describe('deleteRequest', () => {
it('should update isDeleteLoading to true on deleteIndex', () => {
IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' });
expect(IndicesLogic.values).toEqual({
...DEFAULT_VALUES,
deleteStatus: Status.LOADING,
isDeleteLoading: true,
});
});
it('should update isDeleteLoading to to false on apiError', () => {
IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' });
IndicesLogic.actions.deleteError({} as HttpError);
expect(IndicesLogic.values).toEqual({
...DEFAULT_VALUES,
deleteStatus: Status.ERROR,
isDeleteLoading: false,
});
});
it('should update isDeleteLoading to to false on apiSuccess', () => {
IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' });
IndicesLogic.actions.deleteSuccess();
expect(IndicesLogic.values).toEqual({
...DEFAULT_VALUES,
deleteStatus: Status.SUCCESS,
isDeleteLoading: false,
});
});
});
});
describe('listeners', () => {

View file

@ -72,8 +72,10 @@ export interface IndicesValues {
deleteModalIndex: ElasticsearchViewIndex | null;
deleteModalIndexName: string;
deleteModalIngestionMethod: IngestionMethod;
deleteStatus: typeof DeleteIndexApiLogic.values.status;
hasNoIndices: boolean;
indices: ElasticsearchViewIndex[];
isDeleteLoading: boolean;
isDeleteModalVisible: boolean;
isFirstRequest: boolean;
isLoading: boolean;
@ -101,7 +103,12 @@ export const IndicesLogic = kea<MakeLogicType<IndicesValues, IndicesActions>>({
DeleteIndexApiLogic,
['apiError as deleteError', 'apiSuccess as deleteSuccess', 'makeRequest as deleteIndex'],
],
values: [FetchIndicesAPILogic, ['data', 'status']],
values: [
FetchIndicesAPILogic,
['data', 'status'],
DeleteIndexApiLogic,
['status as deleteStatus'],
],
},
listeners: ({ actions, values }) => ({
apiError: (e) => flashAPIErrors(e),
@ -181,6 +188,10 @@ export const IndicesLogic = kea<MakeLogicType<IndicesValues, IndicesActions>>({
() => [selectors.data],
(data) => (data?.indices ? data.indices.map(indexToViewIndex) : []),
],
isDeleteLoading: [
() => [selectors.deleteStatus],
(status: IndicesValues['deleteStatus']) => [Status.LOADING].includes(status),
],
isLoading: [
() => [selectors.status, selectors.isFirstRequest],
(status, isFirstRequest) => [Status.LOADING, Status.IDLE].includes(status) && isFirstRequest,