Change non-implemented buttons

This commit is contained in:
Efe Gürkan YALAMAN 2024-06-25 17:15:31 +02:00
parent 886e0318da
commit f5ebccc5e3
9 changed files with 106 additions and 83 deletions

View file

@ -34,7 +34,7 @@ export const DockerInstructionsStep: React.FC<DockerInstructionsStepProps> = ({
isWaitingForConnector,
serviceType,
}) => {
const [isOpen, setIsOpen] = React.useState<EuiAccordionProps['forceState']>('closed');
const [isOpen, setIsOpen] = React.useState<EuiAccordionProps['forceState']>('open');
const { elasticsearchUrl } = useCloudDetails();
useEffect(() => {

View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiButton, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
export interface GenerateConfigButtonProps {
@ -41,21 +41,6 @@ export const GenerateConfigButton: React.FC<GenerateConfigButtonProps> = ({
)}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
data-test-subj="entSearchContent-connector-configuration-moreOptionsButton"
data-telemetry-id="entSearchContent-connector-configuration-moreOptionsButton"
display="fill"
iconType="boxesVertical"
size="m"
aria-label={i18n.translate(
'xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.generateApiKey.moreOptionsButton.label',
{
defaultMessage: 'More options',
}
)}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
};

View file

@ -46,7 +46,7 @@ export const RunFromSourceStep: React.FC<RunFromSourceStepProps> = ({
isWaitingForConnector,
serviceType,
}) => {
const [isOpen, setIsOpen] = React.useState<EuiAccordionProps['forceState']>('closed');
const [isOpen, setIsOpen] = React.useState<EuiAccordionProps['forceState']>('open');
useEffect(() => {
if (!isWaitingForConnector) {
setIsOpen('closed');

View file

@ -14,11 +14,13 @@ export interface WaitingForConnectorStepProps {
isLoading: boolean;
isRecheckDisabled: boolean;
recheck: () => void;
showFinishLaterButton?: boolean;
}
export const WaitingForConnectorStep: React.FC<WaitingForConnectorStepProps> = ({
recheck,
isLoading,
isRecheckDisabled,
showFinishLaterButton = false,
}) => {
return (
<>
@ -61,22 +63,24 @@ export const WaitingForConnectorStep: React.FC<WaitingForConnectorStepProps> = (
)}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
color="warning"
data-test-subj="entSearchContent-connector-waitingForConnector-callout-finishLaterButton"
data-telemetry-id="entSearchContent-connector-waitingForConnector-callout-finishLaterButton"
iconType="save"
onClick={() => {}}
>
{i18n.translate(
'xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.waitingForConnector.callout.finishLaterButton.label',
{
defaultMessage: 'Finish deployment later',
}
)}
</EuiButton>
</EuiFlexItem>
{showFinishLaterButton && (
<EuiFlexItem grow={false}>
<EuiButton
color="warning"
data-test-subj="entSearchContent-connector-waitingForConnector-callout-finishLaterButton"
data-telemetry-id="entSearchContent-connector-waitingForConnector-callout-finishLaterButton"
iconType="save"
onClick={() => {}}
>
{i18n.translate(
'xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.waitingForConnector.callout.finishLaterButton.label',
{
defaultMessage: 'Finish deployment later',
}
)}
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiCallOut>
</>

View file

@ -7,27 +7,57 @@
import React from 'react';
import { useValues } from 'kea';
import {
EuiButton,
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiProgress,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { ConnectorStatus } from '@kbn/search-connectors';
import { generateEncodedPath } from '../../../../shared/encode_path_params';
import { KibanaLogic } from '../../../../shared/kibana';
import { EuiButtonTo } from '../../../../shared/react_router_helpers';
import { CONNECTOR_DETAIL_TAB_PATH } from '../../../routes';
import { SyncsContextMenu } from '../../shared/header_actions/syncs_context_menu';
import { ConnectorDetailTabId } from '../connector_detail';
export interface WhatsNextBoxProps {
disabled?: boolean;
isWaitingForConnector?: boolean;
connectorId: string;
connectorIndex?: string;
connectorStatus: ConnectorStatus;
isSyncing?: boolean;
}
export const WhatsNextBox: React.FC<WhatsNextBoxProps> = ({ disabled = false }) => {
export const WhatsNextBox: React.FC<WhatsNextBoxProps> = ({
disabled = false,
isWaitingForConnector = false,
connectorId,
connectorIndex,
connectorStatus,
isSyncing = false,
}) => {
const { navigateToUrl } = useValues(KibanaLogic);
const isConfigured = !(
connectorStatus === ConnectorStatus.NEEDS_CONFIGURATION ||
connectorStatus === ConnectorStatus.CREATED
);
return (
<EuiPanel hasBorder>
<EuiPanel hasBorder style={{ position: 'relative' }}>
{isSyncing && <EuiProgress size="xs" position="absolute" />}
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.enterpriseSearch.whatsNextBox.whatsNextPanelLabel', {
@ -51,6 +81,11 @@ export const WhatsNextBox: React.FC<WhatsNextBoxProps> = ({ disabled = false })
data-test-subj="enterpriseSearchWhatsNextBoxSearchPlaygroundButton"
iconType="sparkles"
disabled={disabled}
onClick={() => {
navigateToUrl('/app/enterprise_search/applications/playground', {
shouldNotCreateHref: true,
});
}}
>
<FormattedMessage
id="xpack.enterpriseSearch.whatsNextBox.searchPlaygroundButtonLabel"
@ -59,51 +94,29 @@ export const WhatsNextBox: React.FC<WhatsNextBoxProps> = ({ disabled = false })
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="enterpriseSearchWhatsNextBoxButton"
iconType="eye"
disabled={disabled}
<EuiButtonTo
data-test-subj="entSearchContent-connector-configuration-setScheduleAndSync"
data-telemetry-id="entSearchContent-connector-configuration-setScheduleAndSync"
isDisabled={isWaitingForConnector || !connectorIndex || !isConfigured}
to={`${generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId,
tabId: ConnectorDetailTabId.SCHEDULING,
})}`}
>
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem grow={false}>
{i18n.translate('xpack.enterpriseSearch.whatsNextBox.exploreDataFlexItemLabel', {
defaultMessage: 'Explore data',
})}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="arrowDown" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiButton>
{i18n.translate(
'xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.schedule.button.label',
{
defaultMessage: 'Set schedule and sync',
}
)}
</EuiButtonTo>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiButton
disabled={disabled}
data-test-subj="enterpriseSearchWhatsNextBoxButton"
iconType="refresh"
fill
>
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem grow={false}>
{i18n.translate('xpack.enterpriseSearch.whatsNextBox.syncDataFlexItemLabel', {
defaultMessage: 'Sync data',
})}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="arrowDown" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
disabled={disabled}
display="fill"
size="m"
data-test-subj="enterpriseSearchWhatsNextBoxButton"
iconType="boxesVertical"
<SyncsContextMenu
disabled={isWaitingForConnector || !connectorIndex || !isConfigured}
/>
</EuiFlexItem>
</EuiFlexGroup>

View file

@ -30,6 +30,8 @@ import { hasNonEmptyAdvancedSnippet, isExampleConnector } from '../../utils/conn
import { ConnectorFilteringLogic } from '../search_index/connector/sync_rules/connector_filtering_logic';
import { IndexViewLogic } from '../search_index/index_view_logic';
import { AttachIndexBox } from './attach_index_box';
import { AdvancedConfigOverrideCallout } from './components/advanced_config_override_callout';
import { ConfigurationSkeleton } from './components/configuration_skeleton';
@ -41,6 +43,7 @@ import { NativeConnectorConfiguration } from './native_connector_configuration';
export const ConnectorConfiguration: React.FC = () => {
const { connector, updateConnectorConfigurationStatus } = useValues(ConnectorViewLogic);
const { isSyncing, isWaitingForSync } = useValues(IndexViewLogic);
const { hasPlatinumLicense } = useValues(LicensingLogic);
const { http } = useValues(HttpLogic);
const { advancedSnippet } = useValues(ConnectorFilteringLogic);
@ -108,10 +111,17 @@ export const ConnectorConfiguration: React.FC = () => {
}
/>
</EuiPanel>
<EuiSpacer />
<WhatsNextBox
connectorId={connector.id}
disabled={isWaitingForConnector || !connector.last_synced}
isWaitingForConnector={isWaitingForConnector}
connectorIndex={connector.index_name}
connectorStatus={connector.status}
isSyncing={Boolean(isSyncing || isWaitingForSync)}
/>
</>
)}
<EuiSpacer />
<WhatsNextBox />
</EuiFlexItem>
</EuiFlexGroup>
</>

View file

@ -77,8 +77,6 @@ export interface ConnectorViewValues {
isCanceling: boolean;
isHiddenIndex: boolean;
isLoading: boolean;
isSyncing: boolean;
isWaitingForSync: boolean;
lastUpdated: string | null;
pipelineData: IngestPipelineParams | undefined;
recheckIndexLoading: boolean;

View file

@ -9,6 +9,9 @@ import React, { useState, useEffect } from 'react';
import { useActions, useValues } from 'kea';
import { omit } from 'lodash';
import useLocalStorage from 'react-use/lib/useLocalStorage';
import {
EuiCheckbox,
EuiConfirmModal,
@ -30,7 +33,11 @@ export interface DeleteConnectorModalProps {
isCrawler: boolean;
}
export const DeleteConnectorModal: React.FC<DeleteConnectorModalProps> = ({ isCrawler }) => {
const [connectorUiOptions, setConnectorUiOptions] = useLocalStorage<
Record<string, { deploymentMethod: 'docker' | 'source' | null }>
>('search:connector-ui-options', {});
const { closeDeleteModal, deleteConnector, deleteIndex } = useActions(ConnectorsLogic);
const {
deleteModalConnectorId: connectorId,
deleteModalConnectorName,
@ -75,6 +82,7 @@ export const DeleteConnectorModal: React.FC<DeleteConnectorModalProps> = ({ isCr
connectorId,
shouldDeleteIndex,
});
setConnectorUiOptions(omit(connectorUiOptions, connectorId));
}
}}
cancelButtonText={

View file

@ -34,7 +34,11 @@ import { IndexViewLogic } from '../../search_index/index_view_logic';
import { SyncsLogic } from './syncs_logic';
export const SyncsContextMenu: React.FC = () => {
export interface SyncsContextMenuProps {
disabled?: boolean;
}
export const SyncsContextMenu: React.FC<SyncsContextMenuProps> = ({ disabled = false }) => {
const { config, productFeatures } = useValues(KibanaLogic);
const { ingestionStatus, isCanceling, isSyncing, isWaitingForSync } = useValues(IndexViewLogic);
const { connector, hasDocumentLevelSecurityFeature, hasIncrementalSyncFeature } =
@ -171,6 +175,7 @@ export const SyncsContextMenu: React.FC = () => {
<EuiPopover
button={
<EuiButton
disabled={disabled}
data-test-subj="enterpriseSearchSyncsContextMenuButton"
data-telemetry-id="entSearchContent-connector-header-sync-openSyncMenu"
iconType="arrowDown"