Clean up code

elastic · Nov 22, 2022 · 169439f · 169439f
1 parent badf71c
commit 169439f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/src/plugins/controls/public/options_list/components/options_list_editor_options.tsx b/src/plugins/controls/public/options_list/components/options_list_editor_options.tsx
@@ -67,6 +67,7 @@ export const OptionsListEditorOptions = ({
   });
 
   useEffect(() => {
+    // when field type changes, ensure that the selected sort type is still valid
     if (!getCompatibleSortingTypes(fieldType).includes(state.sortBy)) {
       onChange({ sort: DEFAULT_SORT });
       setState((s) => ({ ...s, sortBy: DEFAULT_SORT.by, sortDirection: DEFAULT_SORT.direction }));

diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import {
   EuiButtonGroupOptionProps,
@@ -62,6 +62,7 @@ export const OptionsListPopoverSortingButton = ({
   const sort = select((state) => state.explicitInput.sort ?? DEFAULT_SORT);
 
   const [isSortingPopoverOpen, setIsSortingPopoverOpen] = useState(false);
+
   const [sortByOptions, setSortByOptions] = useState<SortByItem[]>(() => {
     return getCompatibleSortingTypes(field?.type).map((key) => {
       return {
@@ -73,19 +74,23 @@ export const OptionsListPopoverSortingButton = ({
       } as SortByItem;
     });
   });
-  const sortOrderOptions = sortDirections.map((key) => {
-    return {
-      id: key,
-      iconType: `sort${toSentenceCase(key)}ending`,
-      'data-test-subj': `optionsList__sortOrder_${key}`,
-      label: OptionsListStrings.editorAndPopover.sortOrder[key].getSortByLabel(),
-    } as SortOrderItem;
-  });
+
+  const sortOrderOptions = useMemo(
+    () =>
+      sortDirections.map((key) => {
+        return {
+          id: key,
+          iconType: `sort${toSentenceCase(key)}ending`,
+          'data-test-subj': `optionsList__sortOrder_${key}`,
+          label: OptionsListStrings.editorAndPopover.sortOrder[key].getSortByLabel(),
+        } as SortOrderItem;
+      }),
+    []
+  );
 
   const onSortByChange = (updatedOptions: SortByItem[]) => {
     setSortByOptions(updatedOptions);
     const selectedOption = updatedOptions.find(({ checked }) => checked === 'on');
-
     if (selectedOption) {
       dispatch(setSort({ by: selectedOption.data.sortBy }));
     }

diff --git a/src/plugins/controls/public/options_list/types.ts b/src/plugins/controls/public/options_list/types.ts
@@ -14,14 +14,15 @@ interface SearchString {
   value: string;
   valid: boolean;
 }
+
 // Component state is only used by public components.
 export interface OptionsListComponentState {
   field?: OptionsListField;
   totalCardinality?: number;
-  validSelections?: string[];
-  searchString: SearchString;
   availableOptions?: string[];
   invalidSelections?: string[];
+  validSelections?: string[];
+  searchString: SearchString;
 }
 
 // public only - redux embeddable state type

diff --git a/test/functional/page_objects/dashboard_page_controls.ts b/test/functional/page_objects/dashboard_page_controls.ts
@@ -347,7 +347,6 @@ export class DashboardPageControls extends FtrService {
     if (hideSort) await this.testSubjects.click(getSettingTestSubject('hideSort'));
     if (defaultSortType) {
       await this.testSubjects.click(`optionsListEditor__sortOrder_${defaultSortType.direction}`);
-      await this.common.sleep(6000);
       await this.testSubjects.click('optionsListControl__chooseSortBy');
       await this.testSubjects.click(`optionsListEditor__sortBy_${defaultSortType.by}`);
     }