[D&D] Fix scss lint and available fields (opensearch-project#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;
+}