[Enterprise Search] Provide UX feedback for rechecking connector (#138432) (#138444)

(cherry picked from commit 59b403c9d8)

Co-authored-by: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2022-08-09 15:26:53 -04:00 committed by GitHub
parent 9b27de2096
commit 716d0f3c9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 5 deletions

View file

@ -33,12 +33,12 @@ import { generateEncodedPath } from '../../../../shared/encode_path_params';
import { EuiButtonTo, EuiLinkTo } from '../../../../shared/react_router_helpers';
import { GenerateConnectorApiKeyApiLogic } from '../../../api/connector_package/generate_connector_api_key_api_logic';
import { FetchIndexApiLogic } from '../../../api/index/fetch_index_api_logic';
import { SEARCH_INDEX_TAB_PATH } from '../../../routes';
import { isConnectorIndex } from '../../../utils/indices';
import { IndexNameLogic } from '../index_name_logic';
import { IndexViewLogic } from '../index_view_logic';
import { SearchIndexTabId } from '../search_index';
import { ApiKeyConfig } from './api_key_configuration';
@ -46,10 +46,9 @@ import { ConnectorConfigurationConfig } from './connector_configuration_config';
export const ConnectorConfiguration: React.FC = () => {
const { data: apiKeyData } = useValues(GenerateConnectorApiKeyApiLogic);
const { data: indexData } = useValues(FetchIndexApiLogic);
const { index: indexData, recheckIndexLoading } = useValues(IndexViewLogic);
const { indexName } = useValues(IndexNameLogic);
const { makeRequest: fetchIndex } = useActions(FetchIndexApiLogic);
const { recheckIndex } = useActions(IndexViewLogic);
if (!isConnectorIndex(indexData)) {
return <></>;
}
@ -192,7 +191,11 @@ export const ConnectorConfiguration: React.FC = () => {
}
)}
<EuiSpacer size="s" />
<EuiButton iconType="refresh" onClick={() => fetchIndex({ indexName })}>
<EuiButton
iconType="refresh"
onClick={() => recheckIndex()}
isLoading={recheckIndexLoading}
>
{i18n.translate(
'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnector.button.label',
{

View file

@ -35,6 +35,7 @@ const DEFAULT_VALUES = {
isWaitingForSync: false,
lastUpdated: null,
localSyncNowValue: false,
recheckIndexLoading: false,
syncStatus: null,
};
@ -52,6 +53,7 @@ describe('IndexViewLogic', () => {
const { mount: fetchIndexMount } = new LogicMounter(FetchIndexApiLogic);
const indexNameLogic = new LogicMounter(IndexNameLogic);
const { mount } = new LogicMounter(IndexViewLogic);
const { flashSuccessToast } = mockFlashMessageHelpers;
beforeEach(() => {
jest.clearAllMocks();
@ -132,6 +134,15 @@ describe('IndexViewLogic', () => {
expect(IndexViewLogic.actions.createNewFetchIndexTimeout).toHaveBeenCalled();
expect(IndexViewLogic.actions.fetchCrawlerData).not.toHaveBeenCalled();
});
it('should flash success if recheckFetchIndexLoading', () => {
IndexViewLogic.actions.resetRecheckIndexLoading = jest.fn();
IndexNameLogic.actions.setIndexName('api');
IndexViewLogic.actions.recheckIndex();
FetchIndexApiLogic.actions.apiSuccess(apiIndex);
expect(IndexViewLogic.actions.createNewFetchIndexTimeout).toHaveBeenCalled();
expect(flashSuccessToast).toHaveBeenCalled();
});
});
describe('fetchIndex.apiError', () => {
@ -195,6 +206,28 @@ describe('IndexViewLogic', () => {
});
});
describe('recheckIndexLoading', () => {
it('should be set to true on recheckIndex', () => {
IndexViewLogic.actions.recheckIndex();
expect(IndexViewLogic.values).toEqual(
expect.objectContaining({
...DEFAULT_VALUES,
recheckIndexLoading: true,
})
);
});
it('should be set to false on resetRecheckIndexLoading', () => {
IndexViewLogic.actions.recheckIndex();
IndexViewLogic.actions.resetRecheckIndexLoading();
expect(IndexViewLogic.values).toEqual(
expect.objectContaining({
...DEFAULT_VALUES,
recheckIndexLoading: false,
})
);
});
});
describe('listeners', () => {
it('calls clearFlashMessages on makeStartSyncRequest', () => {
IndexViewLogic.actions.makeStartSyncRequest({ connectorId: 'connectorId' });

View file

@ -49,7 +49,9 @@ export interface IndexViewActions {
fetchIndexApiSuccess: FetchIndexApiValues['apiSuccess'];
makeFetchIndexRequest: FetchIndexApiValues['makeRequest'];
makeStartSyncRequest: StartSyncApiValues['makeRequest'];
recheckIndex: () => void;
resetFetchIndexApi: FetchIndexApiValues['apiReset'];
resetRecheckIndexLoading: () => void;
setFetchIndexTimeoutId(timeoutId: NodeJS.Timeout): { timeoutId: NodeJS.Timeout };
startFetchIndexPoll(): void;
startSync(): void;
@ -69,6 +71,8 @@ export interface IndexViewValues {
isWaitingForSync: boolean;
lastUpdated: string | null;
localSyncNowValue: boolean; // holds local value after update so UI updates correctly
recheckIndexLoading: boolean;
resetFetchIndexLoading: boolean;
syncStatus: SyncStatus | null;
}
@ -77,6 +81,8 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
clearFetchIndexTimeout: true,
createNewFetchIndexTimeout: (duration) => ({ duration }),
fetchIndex: true,
recheckIndex: true,
resetRecheckIndexLoading: true,
setFetchIndexTimeoutId: (timeoutId) => ({ timeoutId }),
startFetchIndexPoll: true,
startSync: true,
@ -136,8 +142,20 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
if (isCrawlerIndex(index) && index.name === values.indexName) {
actions.fetchCrawlerData();
}
if (values.recheckIndexLoading) {
actions.resetRecheckIndexLoading();
flashSuccessToast(
i18n.translate(
'xpack.enterpriseSearch.content.searchIndex.index.recheckSuccess.message',
{
defaultMessage: 'Successfully rechecked your connector',
}
)
);
}
},
makeStartSyncRequest: () => clearFlashMessages(),
recheckIndex: () => actions.fetchIndex(),
setIndexName: () => {
if (values.fetchIndexTimeoutId) {
clearTimeout(values.fetchIndexTimeoutId);
@ -188,6 +206,13 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
startSyncApiSuccess: () => true,
},
],
recheckIndexLoading: [
false,
{
recheckIndex: () => true,
resetRecheckIndexLoading: () => false,
},
],
},
selectors: ({ selectors }) => ({
index: [() => [selectors.data], (data) => (data ? indexToViewIndex(data) : undefined)],