[D&D] Fix scss lint and available fields (#1927)

* fix(Lint): fixes scss linting issues

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: Filter field types correctly

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: minor

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

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;
-  }
-}
+ @if $template-row != "none" {
+ grid-template-rows: $template-row;
+ }
+}

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;

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});
 }

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<IndexPatternField[]>([]);
 
- // 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<IFieldCategories>(
- (fieldGroups, currentField) => {
- const category = getFieldCategory(currentField);
- fieldGroups[category].push(currentField);
-
- return fieldGroups;
- },
- {
- categorical: [],
- numerical: [],
- meta: [],
- }
+ }, [fieldSearchValue, indexPattern?.fields]);
+
+ const fields = useMemo(
+ () =>
+ filteredFields?.reduce<IFieldCategories>(
+ (fieldGroups, currentField) => {
+ const category = getFieldCategory(currentField);
+ fieldGroups[category].push(currentField);
+
+ return fieldGroups;
+ },
+ {
+ categorical: [],
+ numerical: [],
+ meta: [],
+ }
+ ),
+ [filteredFields]
  );
 
  return (

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;
+};

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';

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;
 }

src/plugins/wizard/public/application/components/top_nav.scss

@@ -1,4 +1,4 @@
 .wizTopNav {
-  grid-area: topNav;
-  border-bottom: $euiBorderThin;
-}
+ grid-area: topNav;
+ border-bottom: $euiBorderThin;
+}