From f3caf8daedaa56c4ae1592fd5c54ada22bd87843 Mon Sep 17 00:00:00 2001 From: Brooke <97559014+CPTNB@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:55:31 -0700 Subject: [PATCH] Adds the data source selector and a useIndexPatterns hook (#1763) Signed-off-by: Brooke Green --- .../wizard/public/application/_variables.scss | 4 +- .../wizard/public/application/app.scss | 2 +- .../components/data_source_select.tsx | 51 ++++++ .../components/searchable_dropdown.scss | 26 +++ .../components/searchable_dropdown.tsx | 170 ++++++++++++++++++ .../application/components/side_nav.scss | 10 +- .../application/components/side_nav.tsx | 44 +---- .../public/application/utils/use/index.ts | 2 +- .../utils/use/use_index_pattern.tsx | 44 +++++ .../wizard/public/assets/index_pattern.svg | 4 + src/plugins/wizard/public/types.ts | 2 +- src/plugins/wizard/tsconfig.json | 74 ++++++++ 12 files changed, 387 insertions(+), 46 deletions(-) create mode 100644 src/plugins/wizard/public/application/components/data_source_select.tsx create mode 100644 src/plugins/wizard/public/application/components/searchable_dropdown.scss create mode 100644 src/plugins/wizard/public/application/components/searchable_dropdown.tsx create mode 100644 src/plugins/wizard/public/assets/index_pattern.svg create mode 100644 src/plugins/wizard/tsconfig.json diff --git a/src/plugins/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss index c1b3646e8e49..6ffa04d0eb4a 100644 --- a/src/plugins/wizard/public/application/_variables.scss +++ b/src/plugins/wizard/public/application/_variables.scss @@ -1,3 +1,5 @@ @import '@elastic/eui/src/global_styling/variables/header'; +@import '@elastic/eui/src/global_styling/variables/form'; -$osdHeaderOffset: $euiHeaderHeightCompensation * 2; \ No newline at end of file +$osdHeaderOffset: $euiHeaderHeightCompensation * 2; +$wizSideNavWidth: 470px; diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss index 4f05c6ecd7a2..3e2a28aca700 100644 --- a/src/plugins/wizard/public/application/app.scss +++ b/src/plugins/wizard/public/application/app.scss @@ -4,7 +4,7 @@ padding: 0; display: grid; grid-template-rows: min-content 1fr; - grid-template-columns: 470px 1fr; + grid-template-columns: $wizSideNavWidth 1fr; grid-template-areas: "topNav topNav" "sideNav workspace" diff --git a/src/plugins/wizard/public/application/components/data_source_select.tsx b/src/plugins/wizard/public/application/components/data_source_select.tsx new file mode 100644 index 000000000000..3bbae08573b9 --- /dev/null +++ b/src/plugins/wizard/public/application/components/data_source_select.tsx @@ -0,0 +1,51 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { i18n } from '@osd/i18n'; +import { EuiIcon } from '@elastic/eui'; +import { SearchableDropdown, SearchableDropdownOption } from './searchable_dropdown'; +import { useIndexPatterns } from '../utils/use'; +import indexPatternSvg from '../../assets/index_pattern.svg'; +import { useTypedDispatch } from '../utils/state_management'; +import { setIndexPattern } from '../utils/state_management/visualization_slice'; +import { IndexPattern } from '../../../../data/public'; + +function indexPatternEquality(A?: SearchableDropdownOption, B?: SearchableDropdownOption): boolean { + return !A || !B ? false : A.id === B.id; +} + +function toSearchableDropdownOption(indexPattern: IndexPattern): SearchableDropdownOption { + return { + id: indexPattern.id || '', + label: indexPattern.title, + searchableLabel: indexPattern.title, + prepend: , + }; +} + +export const DataSourceSelect = () => { + const { indexPatterns, loading, error, selected } = useIndexPatterns(); + const dispatch = useTypedDispatch(); + + return ( + { + const foundOption = indexPatterns.filter((s) => s.id === option.id)[0]; + if (foundOption !== undefined && typeof foundOption.id === 'string') { + dispatch(setIndexPattern(foundOption.id)); + } + }} + prepend={i18n.translate('wizard.nav.dataSource.selector.title', { + defaultMessage: 'Data Source', + })} + error={error} + loading={loading} + options={indexPatterns.map(toSearchableDropdownOption)} + equality={indexPatternEquality} + /> + ); +}; diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.scss b/src/plugins/wizard/public/application/components/searchable_dropdown.scss new file mode 100644 index 000000000000..6de99e91356d --- /dev/null +++ b/src/plugins/wizard/public/application/components/searchable_dropdown.scss @@ -0,0 +1,26 @@ +@import "../variables"; + +.searchableDropdown { + overflow: "hidden"; +} + +.searchableDropdown .euiPopover, +.searchableDropdown .euiPopover__anchor { + width: 100%; +} + +.searchableDropdown--fixedWidthChild { + width: calc(#{$wizSideNavWidth} - #{$euiSizeXL} * 2) ; +} + +.searchableDropdown--topDisplay { + padding-right: $euiSizeL; +} + + +.searchableDropdown--selectableWrapper .euiSelectableList { + // When clicking on the selectable content it will "highlight" itself with a box shadow + // This turns that off + box-shadow: none !important; + margin: ($euiFormControlPadding * -1) - 4; +} diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.tsx b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx new file mode 100644 index 000000000000..da6795335088 --- /dev/null +++ b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx @@ -0,0 +1,170 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useEffect } from 'react'; +import { + EuiLoadingSpinner, + EuiFormControlLayout, + EuiPopoverTitle, + EuiButtonEmpty, + EuiPopover, + EuiSelectable, + EuiTextColor, +} from '@elastic/eui'; +import './searchable_dropdown.scss'; + +export interface SearchableDropdownOption { + id: string; + label: string; + searchableLabel: string; + prepend: any; +} + +interface SearchableDropdownProps { + selected?: SearchableDropdownOption; + onChange: (selection) => void; + options: SearchableDropdownOption[]; + loading: boolean; + error?: Error; + prepend: string; + // not just the first time! + onOpen?: () => void; + equality: (A, B) => boolean; +} + +type DisplayError = any; + +function displayError(error: DisplayError) { + return typeof error === 'object' ? error.toString() : <>{error}; +} + +export const SearchableDropdown = ({ + onChange, + equality, + selected, + options, + error, + loading, + prepend, + onOpen, +}: SearchableDropdownProps) => { + const [localOptions, setLocalOptions] = useState(undefined); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => { + if (!isPopoverOpen && typeof onOpen === 'function') { + onOpen(); + } + setIsPopoverOpen(!isPopoverOpen); + }; + const closePopover = () => setIsPopoverOpen(false); + + function selectNewOption(newOptions) { + // alright, the EUI Selectable is pretty ratchet + // this is as smarmy as it is because it needs to be + + // first go through and count all the "checked" options + const selectedCount = newOptions.filter((o) => o.checked === 'on').length; + + // if the count is 0, the user just "unchecked" our selection and we can just do nothing + if (selectedCount === 0) { + setIsPopoverOpen(false); + return; + } + + // then, if there's more than two selections, the Selectable left the previous selection as "checked" + // so we need to go and "uncheck" it + for (let i = 0; i < newOptions.length; i++) { + if (equality(newOptions[i], selected) && selectedCount > 1) { + delete newOptions[i].checked; + } + } + + // finally, we can pick the checked option as the actual selection + const newSelection = newOptions.filter((o) => o.checked === 'on')[0]; + + setLocalOptions(newOptions); + setIsPopoverOpen(false); + onChange(newSelection); + } + + useEffect(() => { + setLocalOptions( + options.map((o) => ({ + ...o, + checked: equality(o, selected) ? 'on' : undefined, + })) + ); + }, [selected, options, equality]); + + const listDisplay = (list, search) => + loading ? ( +
+ +
+ ) : error !== undefined ? ( + displayError(error) + ) : ( + <> + + {search} + + {list} + + ); + + const selectable = ( +
+ + {listDisplay} + +
+ ); + + const selectedText = + selected === undefined ? ( + {loading ? 'Loading' : 'Select an option'} + ) : ( + <> + {selected.prepend} {selected.label} + + ); + + const selectedView = ( + + {selectedText} + + ); + + const formControl = {selectedView} + + return ( +
+ +
{selectable}
+ +
+ ); +}; diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss index caa24e30b395..7291a79eb726 100644 --- a/src/plugins/wizard/public/application/components/side_nav.scss +++ b/src/plugins/wizard/public/application/components/side_nav.scss @@ -1,4 +1,5 @@ @import "../util"; +@import "../variables"; .wizSidenav { @include scrollNavParent(auto 1fr); @@ -7,10 +8,6 @@ border-right: $euiBorderThin; } -.wizDatasourceSelector { - padding: $euiSize $euiSize 0 $euiSize; -} - .wizSidenavTabs { .euiTab__content { text-transform: capitalize; @@ -22,3 +19,8 @@ @include scrollNavParent; } } + +.wizDatasourceSelect { + max-width: $wizSideNavWidth; + padding: $euiSize $euiSize 0 $euiSize; +} diff --git a/src/plugins/wizard/public/application/components/side_nav.tsx b/src/plugins/wizard/public/application/components/side_nav.tsx index c74837ceab54..c79f63d7b5c0 100644 --- a/src/plugins/wizard/public/application/components/side_nav.tsx +++ b/src/plugins/wizard/public/application/components/side_nav.tsx @@ -3,35 +3,22 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { i18n } from '@osd/i18n'; -import { EuiFormLabel, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui'; -import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; -import { WizardServices } from '../../types'; +import React, { ReactElement } from 'react'; +import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui'; import './side_nav.scss'; -import { useTypedDispatch, useTypedSelector } from '../utils/state_management'; -import { setIndexPattern } from '../utils/state_management/visualization_slice'; import { useVisualizationType } from '../utils/use'; +import { DataSourceSelect } from './data_source_select'; import { DataTab } from '../contributions'; import { StyleTabConfig } from '../../services/type_service'; export const SideNav = () => { - const { - services: { - data, - savedObjects: { client: savedObjectsClient }, - }, - } = useOpenSearchDashboards(); - const { IndexPatternSelect } = data.ui; - const { indexPattern: indexPatternId } = useTypedSelector((state) => state.visualization); - const dispatch = useTypedDispatch(); const { ui: { containerConfig }, } = useVisualizationType(); const tabs: EuiTabbedContentTab[] = Object.entries(containerConfig).map( ([containerName, config]) => { - let content = null; + let content: null | ReactElement = null; switch (containerName) { case 'data': content = ; @@ -52,27 +39,8 @@ export const SideNav = () => { return (
-
- - {i18n.translate('wizard.nav.dataSource.selector.title', { - defaultMessage: 'Index Pattern', - })} - - { - const newIndexPattern = await data.indexPatterns.get(newIndexPatternId); - - if (newIndexPattern) { - dispatch(setIndexPattern(newIndexPatternId)); - } - }} - isClearable={false} - /> +
+
diff --git a/src/plugins/wizard/public/application/utils/use/index.ts b/src/plugins/wizard/public/application/utils/use/index.ts index 2893ab0d11ff..542ae073cde5 100644 --- a/src/plugins/wizard/public/application/utils/use/index.ts +++ b/src/plugins/wizard/public/application/utils/use/index.ts @@ -4,4 +4,4 @@ */ export { useVisualizationType } from './use_visualization_type'; -export { useIndexPattern } from './use_index_pattern'; +export { useIndexPattern, useIndexPatterns } from './use_index_pattern'; diff --git a/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx b/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx index e02f543d6c15..d5f255fcb10c 100644 --- a/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx +++ b/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx @@ -28,3 +28,47 @@ export const useIndexPattern = (): IndexPattern | undefined => { return indexPattern; }; + +export const useIndexPatterns = () => { + const { indexPattern: indexId = '' } = useTypedSelector((state) => state.visualization); + const [indexPatterns, setIndexPatterns] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(undefined); + const { + services: { data }, + } = useOpenSearchDashboards(); + + let foundSelected; + if (!loading && !error) { + foundSelected = indexPatterns.filter((p) => p.id === indexId)[0]; + if (foundSelected === undefined) { + setError( + new Error("Attempted to select an index pattern that wasn't in the index pattern list") + ); + } + } + + useEffect(() => { + const handleUpdate = async () => { + try { + const ids = await data.indexPatterns.getIds(indexId); + const patterns = await Promise.all(ids.map((id) => data.indexPatterns.get(id))); + setIndexPatterns(patterns); + } catch (e) { + setError(e); + } finally { + setLoading(false); + } + }; + handleUpdate(); + // we want to run this hook exactly once, which you do by an empty dep array + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return { + indexPatterns, + error, + loading, + selected: foundSelected!, + }; +}; diff --git a/src/plugins/wizard/public/assets/index_pattern.svg b/src/plugins/wizard/public/assets/index_pattern.svg new file mode 100644 index 000000000000..b1f140a38632 --- /dev/null +++ b/src/plugins/wizard/public/assets/index_pattern.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/plugins/wizard/public/types.ts b/src/plugins/wizard/public/types.ts index 14f13d56bdf3..529ebc58a60e 100644 --- a/src/plugins/wizard/public/types.ts +++ b/src/plugins/wizard/public/types.ts @@ -10,7 +10,7 @@ import { DashboardStart } from 'src/plugins/dashboard/public'; import { VisualizationsSetup } from 'src/plugins/visualizations/public'; import { ExpressionsStart } from 'src/plugins/expressions/public'; import { NavigationPublicPluginStart } from '../../navigation/public'; -import { DataPublicPluginStart } from '../../data/public'; +import { DataPublicPluginStart, IndexPatternField } from '../../data/public'; import { TypeServiceSetup, TypeServiceStart } from './services/type_service'; export type WizardSetup = TypeServiceSetup; diff --git a/src/plugins/wizard/tsconfig.json b/src/plugins/wizard/tsconfig.json new file mode 100644 index 000000000000..ab8821948be5 --- /dev/null +++ b/src/plugins/wizard/tsconfig.json @@ -0,0 +1,74 @@ +{ + "compilerOptions": { + "baseUrl": "./src/plugins/wizard", + "paths": { + // Allows for importing from `opensearch-dashboards` package for the exported types. + "opensearch-dashboards": ["./opensearch_dashboards"], + "opensearch-dashboards/public": ["src/core/public"], + "opensearch-dashboards/server": ["src/core/server"], + "plugins/*": ["src/legacy/core_plugins/*/public/"], + "test_utils/*": [ + "src/test_utils/public/*" + ], + "fixtures/*": ["src/fixtures/*"], + "@opensearch-project/opensearch": ["node_modules/@opensearch-project/opensearch/api/new"] + }, + // Support .tsx files and transform JSX into calls to React.createElement + "jsx": "react", + // Enables all strict type checking options. + "strict": true, + // save information about the project graph on disk + "incremental": true, + // enables "core language features" + "lib": [ + "esnext", + // includes support for browser APIs + "dom" + ], + // Node 8 should support everything output by esnext, we override this + // in webpack with loader-level compiler options + "target": "esnext", + // Use commonjs for node, overridden in webpack to keep import statements + // to maintain support for things like `await import()` + "module": "commonjs", + // Allows default imports from modules with no default export. This does not affect code emit, just type checking. + // We have to enable this option explicitly since `esModuleInterop` doesn't enable it automatically when ES2015 or + // ESNext module format is used. + "allowSyntheticDefaultImports": true, + // Emits __importStar and __importDefault helpers for runtime babel ecosystem compatibility. + "esModuleInterop": true, + // Resolve modules in the same way as Node.js. Aka make `require` works the + // same in TypeScript as it does in Node.js. + "moduleResolution": "node", + // "resolveJsonModule" allows for importing, extracting types from and generating .json files. + "resolveJsonModule": true, + // Disallow inconsistently-cased references to the same file. + "forceConsistentCasingInFileNames": true, + // Forbid unused local variables as the rule was deprecated by ts-lint + "noUnusedLocals": true, + // Provide full support for iterables in for..of, spread and destructuring when targeting ES5 or ES3. + "downlevelIteration": true, + // import tslib helpers rather than inlining helpers for iteration or spreading, for instance + "importHelpers": true, + // adding global typings + "noImplicitAny": false, + "types": [ + "node", + "jest", + "react", + "flot", + "@testing-library/jest-dom", + "resize-observer-polyfill" + ] + }, + "include": [ + "public/**/*.ts", + "public/**/*.tsx", + "server/**/*.ts", + "../../../typings/**/*", + ], + "exclude": [], + "references": [ + { "path": "../../core/tsconfig.json" } + ] +}