Add table acceleration flyout

opensearch_dashboards.json

@@ -1,11 +1,11 @@
 {
   "id": "queryWorkbenchDashboards",
-  "version": "3.0.0.0",
-  "opensearchDashboardsVersion": "3.0.0",
+  "version": "2.9.0.0",
+  "opensearchDashboardsVersion": "2.9.0",
   "server": true,
   "ui": true,
   "requiredPlugins": [
     "navigation"
   ],
   "optionalPlugins": []
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opensearch-query-workbench",
-  "version": "3.0.0.0",
+  "version": "2.9.0.0",
   "description": "Query Workbench",
   "main": "index.js",
   "license": "Apache-2.0",

public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx

@@ -11,7 +11,7 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { CreateAccelerationForm } from '../../../../../common/types';
 import _ from 'lodash';
 
@@ -25,14 +25,10 @@ export const CoveringIndexBuilder = ({
   setAccelerationFormData,
 }: CoveringIndexBuilderProps) => {
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
-  const [columnsValue, setColumnsValue] = useState('');
+  const [columnsValue, setColumnsValue] = useState('(add columns here)');
   const [selectedOptions, setSelected] = useState([]);
 
-  const onChange = (selectedOptions) => {
-    setSelected(selectedOptions);
-  };
-
-  useEffect(() => {
+  const onChange = (selectedOptions: any[]) => {
     let expresseionValue = '(add columns here)';
     if (selectedOptions.length > 0) {
       expresseionValue =
@@ -49,7 +45,8 @@ export const CoveringIndexBuilder = ({
         ')';
     }
     setColumnsValue(expresseionValue);
-  }, [selectedOptions]);
+    setSelected(selectedOptions);
+  };
 
   return (
     <>

public/components/acceleration/visual_editors/index_setting_options.tsx

@@ -36,8 +36,8 @@ export const IndexSettingOptions = ({
   ];
   const [indexName, setIndexName] = useState('');
   const [indexAlias, setIndexAlias] = useState('');
-  const [primaryShards, setPrimaryShards] = useState('5');
-  const [replicaCount, setReplicaCount] = useState('1');
+  const [primaryShards, setPrimaryShards] = useState(5);
+  const [replicaCount, setReplicaCount] = useState(1);
   const [refreshTypeSelected, setRefreshTypeSelected] = useState(`${idPrefix}0`);
   const [refreshIntervalSeconds, setRefreshIntervalSeconds] = useState('1');
 
@@ -53,12 +53,12 @@ export const IndexSettingOptions = ({
 
   const onChangePrimaryShards = (e: ChangeEvent<HTMLInputElement>) => {
     setAccelerationFormData({ ...accelerationFormData, primaryShardsCount: +e.target.value });
-    setPrimaryShards(e.target.value);
+    setPrimaryShards(+e.target.value);
   };
 
   const onChangeReplicaCount = (e: ChangeEvent<HTMLInputElement>) => {
     setAccelerationFormData({ ...accelerationFormData, replicaShardsCount: +e.target.value });
-    setReplicaCount(e.target.value);
+    setReplicaCount(+e.target.value);
   };
 
   const onChangeRefreshType = (optionId: React.SetStateAction<string>) => {
@@ -86,7 +86,7 @@ export const IndexSettingOptions = ({
         <EuiFieldText
           placeholder="Enter Index Name"
           value={indexName}
-          onChange={(e) => onChangeIndexName(e)}
+          onChange={onChangeIndexName}
           aria-label="Enter Index Name"
         />
       </EuiFormRow>
@@ -122,7 +122,7 @@ export const IndexSettingOptions = ({
         <EuiFieldNumber
           placeholder="Number of replicas"
           value={replicaCount}
-          onChange={(e) => onChangeReplicaCount(e)}
+          onChange={onChangeReplicaCount}
           aria-label="Number of replicas"
           min={0}
           max={100}
@@ -135,7 +135,7 @@ export const IndexSettingOptions = ({
         <EuiRadioGroup
           options={refreshOptions}
           idSelected={refreshTypeSelected}
-          onChange={(id) => onChangeRefreshType(id)}
+          onChange={onChangeRefreshType}
           name="refresh type radio group"
         />
       </EuiFormRow>
@@ -148,7 +148,7 @@ export const IndexSettingOptions = ({
           <EuiFieldNumber
             placeholder="Refresh interval"
             value={refreshIntervalSeconds}
-            onChange={(e) => onChangeRefreshIntervalSeconds(e)}
+            onChange={onChangeRefreshIntervalSeconds}
             aria-label="Refresh interval"
             append={'second(s)'}
             min={1}

public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx

@@ -30,7 +30,7 @@ export const AddFieldsModal = ({
 }: AddFieldsModalProps) => {
   const [selectedFields, setSelectedFields] = useState([]);
 
-  const tableColumns = [
+  const tableColumns: Array<EuiTableFieldDataColumnType<DataTableFieldsType>> = [
     {
       field: 'fieldName',
       name: 'Field name',
@@ -43,7 +43,7 @@ export const AddFieldsModal = ({
       sortable: true,
       truncateText: true,
     },
-  ] as Array<EuiTableFieldDataColumnType<DataTableFieldsType>>;
+  ];
 
   const pagination = {
     initialPageSize: 20,