Skip to content

Commit

Permalink
[Search] Move settings page to a flyout (elastic#178000)
Browse files Browse the repository at this point in the history 
## Summary



https://github.com/elastic/kibana/assets/1410658/493242e1-e942-43a4-b35b-2043c13f51f0

Moves settings page to a flyout that is reachable from Indices,
Connectors and Crawlers pages.

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
  • Loading branch information
@efegurkan
efegurkan authored Mar 5, 2024
1 parent ae27558 commit 6a02ff0
Show file tree
Hide file tree
Showing 14 changed files with 384 additions and 334 deletions.
159 changes: 120 additions & 39 deletions ...search/public/applications/enterprise_search_content/components/connectors/connectors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ import { useActions, useValues } from 'kea';

import {
EuiButton,
EuiButtonIcon,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiSearchBar,
EuiSpacer,
EuiTitle,
Expand All @@ -38,6 +42,8 @@ import { SelectConnector } from '../new_index/select_connector/select_connector'

import { CannotConnect } from '../search_index/components/cannot_connect';

import { DefaultSettingsFlyout } from '../settings/default_settings_flyout';

import { ConnectorStats } from './connector_stats';
import { ConnectorsLogic } from './connectors_logic';
import { ConnectorsTable } from './connectors_table';
Expand All @@ -59,13 +65,16 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
const { data, isLoading, searchParams, isEmpty, connectors } = useValues(ConnectorsLogic);
const { errorConnectingMessage } = useValues(HttpLogic);
const [searchQuery, setSearchValue] = useState('');
const [showMoreOptionsPopover, setShowMoreOptionsPopover] = useState<boolean>(false);
const [showDefaultSettingsFlyout, setShowDefaultSettingsFlyout] = useState<boolean>(false);
const { productFeatures } = useValues(KibanaLogic);

useEffect(() => {
setIsFirstRequest();
}, [isCrawler]);

useEffect(() => {
fetchConnectors({ ...searchParams, searchQuery, fetchCrawlersOnly: isCrawler });
fetchConnectors({ ...searchParams, fetchCrawlersOnly: isCrawler, searchQuery });
}, [searchParams.from, searchParams.size, searchQuery, isCrawler]);

return !isLoading && isEmpty && !isCrawler ? (
Expand Down Expand Up @@ -93,44 +102,97 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
? []
: !isCrawler
? [
<EuiButton
key="newConnector"
color="primary"
iconType="plusInCircle"
fill
onClick={() => {
KibanaLogic.values.navigateToUrl(NEW_INDEX_SELECT_CONNECTOR_PATH);
}}
>
<FormattedMessage
id="xpack.enterpriseSearch.connectors.newConnectorButtonLabel"
defaultMessage="New Connector"
/>
</EuiButton>,
<EuiButton
key="newConnectorNative"
onClick={() => {
KibanaLogic.values.navigateToUrl(NEW_INDEX_SELECT_CONNECTOR_NATIVE_PATH);
}}
>
{i18n.translate(
'xpack.enterpriseSearch.connectors.newNativeConnectorButtonLabel',
{
defaultMessage: 'New Native Connector',
}
)}
</EuiButton>,
<EuiButton
key="newConnectorClient"
onClick={() => {
KibanaLogic.values.navigateToUrl(NEW_INDEX_SELECT_CONNECTOR_CLIENTS_PATH);
}}
>
{i18n.translate(
'xpack.enterpriseSearch.connectors.newConnectorsClientButtonLabel',
{ defaultMessage: 'New Connector Client' }
)}
</EuiButton>,
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem>
<EuiButton
key="newConnector"
color="primary"
iconType="plusInCircle"
fill
onClick={() => {
KibanaLogic.values.navigateToUrl(NEW_INDEX_SELECT_CONNECTOR_PATH);
}}
>
<FormattedMessage
id="xpack.enterpriseSearch.connectors.newConnectorButtonLabel"
defaultMessage="New Connector"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiPopover
isOpen={showMoreOptionsPopover}
closePopover={() => setShowMoreOptionsPopover(false)}
button={
<EuiButtonIcon
color="primary"
display="fill"
size="m"
iconType="boxesVertical"
aria-label={i18n.translate(
'xpack.enterpriseSearch.connectors.more.ariaLabel',
{ defaultMessage: 'More options' }
)}
onClick={() => setShowMoreOptionsPopover(!showMoreOptionsPopover)}
/>
}
>
<EuiContextMenuPanel
size="s"
items={[
<EuiContextMenuItem
size="s"
key="newConnectorNative"
onClick={() => {
KibanaLogic.values.navigateToUrl(
NEW_INDEX_SELECT_CONNECTOR_NATIVE_PATH
);
}}
icon="plusInCircle"
>
{i18n.translate(
'xpack.enterpriseSearch.connectors.newNativeConnectorButtonLabel',
{
defaultMessage: 'New Native Connector',
}
)}
</EuiContextMenuItem>,
<EuiContextMenuItem
size="s"
key="newConnectorClient"
icon="plusInCircle"
onClick={() => {
KibanaLogic.values.navigateToUrl(
NEW_INDEX_SELECT_CONNECTOR_CLIENTS_PATH
);
}}
>
{i18n.translate(
'xpack.enterpriseSearch.connectors.newConnectorsClientButtonLabel',
{ defaultMessage: 'New Connector Client' }
)}
</EuiContextMenuItem>,
]}
/>
</EuiPopover>
</EuiFlexItem>
</EuiFlexGroup>,
...(productFeatures.hasDefaultIngestPipeline
? [
<EuiButton
color="primary"
data-test-subj="entSearchContent-searchIndices-defaultSettings"
onClick={() => setShowDefaultSettingsFlyout(true)}
>
{i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.defaultSettings',
{
defaultMessage: 'Default settings',
}
)}
</EuiButton>,
]
: []),
]
: [
<EuiButton
Expand All @@ -151,9 +213,28 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
defaultMessage: 'New web crawler',
})}
</EuiButton>,
...(productFeatures.hasDefaultIngestPipeline
? [
<EuiButton
color="primary"
data-test-subj="entSearchContent-searchIndices-defaultSettings"
onClick={() => setShowDefaultSettingsFlyout(true)}
>
{i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.defaultSettings',
{
defaultMessage: 'Default settings',
}
)}
</EuiButton>,
]
: []),
],
}}
>
{productFeatures.hasDefaultIngestPipeline && showDefaultSettingsFlyout && (
<DefaultSettingsFlyout closeFlyout={() => setShowDefaultSettingsFlyout(false)} />
)}
{Boolean(errorConnectingMessage) && (
<>
<CannotConnect />
Expand Down
27 changes: 25 additions & 2 deletions ...ublic/applications/enterprise_search_content/components/search_indices/search_indices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ import { NEW_API_PATH } from '../../routes';
import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';

import { CannotConnect } from '../search_index/components/cannot_connect';
import { DefaultSettingsFlyout } from '../settings/default_settings_flyout';

import { DeleteIndexModal } from './delete_index_modal';
import { IndicesLogic } from './indices_logic';
import { IndicesStats } from './indices_stats';
import { IndicesTable } from './indices_table';

import './search_indices.scss';

export const baseBreadcrumbs = [
Expand All @@ -54,8 +54,9 @@ export const SearchIndices: React.FC = () => {
const [showHiddenIndices, setShowHiddenIndices] = useState(false);
const [onlyShowSearchOptimizedIndices, setOnlyShowSearchOptimizedIndices] = useState(false);
const [searchQuery, setSearchValue] = useState('');
const { config } = useValues(KibanaLogic);
const { config, productFeatures } = useValues(KibanaLogic);
const { errorConnectingMessage } = useValues(HttpLogic);
const [showDefaultSettingsFlyout, setShowDefaultSettingsFlyout] = useState<boolean>(false);

useEffect(() => {
// We don't want to trigger loading for each search query change, so we need this
Expand Down Expand Up @@ -98,6 +99,9 @@ export const SearchIndices: React.FC = () => {
? undefined
: {
pageTitle,
rightSideGroupProps: {
gutterSize: 's',
},
rightSideItems: isLoading
? []
: [
Expand All @@ -116,10 +120,29 @@ export const SearchIndices: React.FC = () => {
)}
</EuiButton>
</EuiLinkTo>,
...(productFeatures.hasDefaultIngestPipeline
? [
<EuiButton
color="primary"
data-test-subj="entSearchContent-searchIndices-defaultSettings"
onClick={() => setShowDefaultSettingsFlyout(true)}
>
{i18n.translate(
'xpack.enterpriseSearch.content.searchIndices.defaultSettings',
{
defaultMessage: 'Default settings',
}
)}
</EuiButton>,
]
: []),
],
}
}
>
{productFeatures.hasDefaultIngestPipeline && showDefaultSettingsFlyout && (
<DefaultSettingsFlyout closeFlyout={() => setShowDefaultSettingsFlyout(false)} />
)}
{config.host && config.canDeployEntSearch && errorConnectingMessage && (
<>
<CannotConnect />
Expand Down
Loading

0 comments on commit 6a02ff0

Please sign in to comment.