From df26904dcd1fd11a4dcd998886b5b301089dd89e Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Thu, 21 Jul 2022 12:29:33 -0700 Subject: [PATCH] [D&D] Fix scss lint and available fields (#1927) * fix(Lint): fixes scss linting issues Signed-off-by: Ashwin Pc * fix: Filter field types correctly Signed-off-by: Ashwin Pc * fix: minor Signed-off-by: Ashwin Pc --- .../wizard/public/application/_util.scss | 14 ++--- .../wizard/public/application/_variables.scss | 4 +- .../wizard/public/application/app.scss | 10 ++-- .../components/data_tab/field_selector.tsx | 53 ++++++++----------- .../data_tab/utils/get_available_fields.ts | 28 ++++++++++ .../components/data_tab/utils/index.ts | 6 +++ .../application/components/side_nav.scss | 4 +- .../application/components/top_nav.scss | 6 +-- 8 files changed, 75 insertions(+), 50 deletions(-) create mode 100644 src/plugins/wizard/public/application/components/data_tab/utils/get_available_fields.ts create mode 100644 src/plugins/wizard/public/application/components/data_tab/utils/index.ts diff --git a/src/plugins/wizard/public/application/_util.scss b/src/plugins/wizard/public/application/_util.scss index 9a444c1fe091..e1ef0bc048a7 100644 --- a/src/plugins/wizard/public/application/_util.scss +++ b/src/plugins/wizard/public/application/_util.scss @@ -1,8 +1,8 @@ -@mixin scrollNavParent ($template-row: none) { - display: grid; - min-height: 0; +@mixin scrollNavParent($template-row: none) { + display: grid; + min-height: 0; - @if $template-row != 'none' { - grid-template-rows: $template-row; - } -} \ No newline at end of file + @if $template-row != "none" { + grid-template-rows: $template-row; + } +} diff --git a/src/plugins/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss index 6ffa04d0eb4a..789aa00373e1 100644 --- a/src/plugins/wizard/public/application/_variables.scss +++ b/src/plugins/wizard/public/application/_variables.scss @@ -1,5 +1,5 @@ -@import '@elastic/eui/src/global_styling/variables/header'; -@import '@elastic/eui/src/global_styling/variables/form'; +@import "@elastic/eui/src/global_styling/variables/header"; +@import "@elastic/eui/src/global_styling/variables/form"; $osdHeaderOffset: $euiHeaderHeightCompensation * 2; $wizSideNavWidth: 470px; diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss index 3e2a28aca700..b02bc79395d0 100644 --- a/src/plugins/wizard/public/application/app.scss +++ b/src/plugins/wizard/public/application/app.scss @@ -3,11 +3,9 @@ .wizLayout { padding: 0; display: grid; - grid-template-rows: min-content 1fr; - grid-template-columns: $wizSideNavWidth 1fr; - grid-template-areas: + grid-template: min-content 1fr / #{$wizSideNavWidth} 1fr; + grid-template-areas: "topNav topNav" - "sideNav workspace" - ; - height: calc(100vh - #{$osdHeaderOffset}); + "sideNav workspace"; + height: calc(100vh - #{$osdHeaderOffset}); } diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx index 2361e8d1d073..353f642afcf6 100644 --- a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { EuiFlexItem, EuiAccordion, EuiNotificationBadge, EuiTitle } from '@elastic/eui'; import { FieldSearch } from './field_search'; @@ -17,6 +17,7 @@ import { FieldSelectorField } from './field_selector_field'; import './field_selector.scss'; import { useTypedSelector } from '../../utils/state_management'; import { useIndexPattern } from '../../utils/use'; +import { getAvailableFields } from './utils'; interface IFieldCategories { categorical: IndexPatternField[]; @@ -31,45 +32,37 @@ const META_FIELDS: string[] = [ OPENSEARCH_FIELD_TYPES._TYPE, ]; -const ALLOWED_FIELDS: string[] = [OSD_FIELD_TYPES.STRING, OSD_FIELD_TYPES.NUMBER]; - export const FieldSelector = () => { const indexPattern = useIndexPattern(); const fieldSearchValue = useTypedSelector((state) => state.visualization.searchField); const [filteredFields, setFilteredFields] = useState([]); - // TODO: Temporary validate function - // Need to identify how to get fieldCounts to use the standard filter and group functions - const isVisualizable = useCallback((field: IndexPatternField): boolean => { - const isAggregatable = field.aggregatable === true; - const isNotScripted = !field.scripted; - const isAllowed = ALLOWED_FIELDS.includes(field.type); - - return isAggregatable && isNotScripted && isAllowed; - }, []); - useEffect(() => { const indexFields = indexPattern?.fields ?? []; - const filteredSubset = indexFields - .filter(isVisualizable) - .filter((field) => field.displayName.includes(fieldSearchValue)); + const filteredSubset = getAvailableFields(indexFields).filter((field) => + field.displayName.includes(fieldSearchValue) + ); setFilteredFields(filteredSubset); return; - }, [fieldSearchValue, indexPattern?.fields, isVisualizable]); - - const fields = filteredFields?.reduce( - (fieldGroups, currentField) => { - const category = getFieldCategory(currentField); - fieldGroups[category].push(currentField); - - return fieldGroups; - }, - { - categorical: [], - numerical: [], - meta: [], - } + }, [fieldSearchValue, indexPattern?.fields]); + + const fields = useMemo( + () => + filteredFields?.reduce( + (fieldGroups, currentField) => { + const category = getFieldCategory(currentField); + fieldGroups[category].push(currentField); + + return fieldGroups; + }, + { + categorical: [], + numerical: [], + meta: [], + } + ), + [filteredFields] ); return ( diff --git a/src/plugins/wizard/public/application/components/data_tab/utils/get_available_fields.ts b/src/plugins/wizard/public/application/components/data_tab/utils/get_available_fields.ts new file mode 100644 index 000000000000..d938e92b6978 --- /dev/null +++ b/src/plugins/wizard/public/application/components/data_tab/utils/get_available_fields.ts @@ -0,0 +1,28 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + FieldTypes, + IndexPatternField, + isNestedField, + propFilter, +} from '../../../../../../data/common'; + +const filterByType = propFilter('type'); + +export const getAvailableFields = ( + fields: IndexPatternField[], + filterFieldTypes: FieldTypes = '*' +) => { + const filteredFields = fields.filter((field: IndexPatternField) => { + if (!field.aggregatable || isNestedField(field) || field.scripted) { + return false; + } + + return filterByType([field], filterFieldTypes).length !== 0; + }); + + return filteredFields; +}; diff --git a/src/plugins/wizard/public/application/components/data_tab/utils/index.ts b/src/plugins/wizard/public/application/components/data_tab/utils/index.ts new file mode 100644 index 000000000000..dd0cdea3e23e --- /dev/null +++ b/src/plugins/wizard/public/application/components/data_tab/utils/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { getAvailableFields } from './get_available_fields'; diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss index 7291a79eb726..fe3318c32132 100644 --- a/src/plugins/wizard/public/application/components/side_nav.scss +++ b/src/plugins/wizard/public/application/components/side_nav.scss @@ -21,6 +21,6 @@ } .wizDatasourceSelect { - max-width: $wizSideNavWidth; - padding: $euiSize $euiSize 0 $euiSize; + max-width: $wizSideNavWidth; + padding: $euiSize $euiSize 0 $euiSize; } diff --git a/src/plugins/wizard/public/application/components/top_nav.scss b/src/plugins/wizard/public/application/components/top_nav.scss index f8e1d1d6cfa4..0e9c5f46aa3f 100644 --- a/src/plugins/wizard/public/application/components/top_nav.scss +++ b/src/plugins/wizard/public/application/components/top_nav.scss @@ -1,4 +1,4 @@ .wizTopNav { - grid-area: topNav; - border-bottom: $euiBorderThin; -} \ No newline at end of file + grid-area: topNav; + border-bottom: $euiBorderThin; +}