organize header and PR comments

Signed-off-by: Shenoy Pratik <[email protected]>
ps48 · Sep 29, 2023 · d71444c · d71444c
1 parent 307a7c0
commit d71444c
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 139 deletions.
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
@@ -4,26 +4,26 @@
  */
 
 import {
-  EuiSpacer,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiFlyoutFooter,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { CreateAccelerationHeader } from './create_acceleration_header';
-import { CautionBannerCallout } from './caution_banner_callout';
+import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types/';
+import { DefineIndexOptions } from '../selectors/define_index_options';
+import { IndexSettingOptions } from '../selectors/index_setting_options';
 import { AccelerationDataSourceSelector } from '../selectors/source_selector';
-import { CreateAccelerationForm, materializedViewQueryType } from '../../../../common/types/';
-import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
 import { accelerationQueryBuilder } from '../visual_editors/query_builder';
-import { IndexSettingOptions } from '../selectors/index_setting_options';
-import { DefineIndexOptions } from '../selectors/define_index_options';
-import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
+import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
+import { CautionBannerCallout } from './caution_banner_callout';
+import { CreateAccelerationHeader } from './create_acceleration_header';
 
 export interface CreateAccelerationProps {
   dataSource: string;
@@ -44,7 +44,14 @@ export const CreateAcceleration = ({
     accelerationIndexType: 'skipping',
     skippingIndexQueryData: [],
     coveringIndexQueryData: [],
-    materializedViewQueryData: {} as materializedViewQueryType,
+    materializedViewQueryData: {
+      columnsValues: [],
+      groupByTumbleValue: {
+        timeField: '',
+        tumbleWindow: 0,
+        tumbleInterval: '',
+      },
+    },
     accelerationIndexName: '',
     primaryShardsCount: 5,
     replicaShardsCount: 1,

diff --git a/public/components/acceleration/create/create_acceleration_header.tsx b/public/components/acceleration/create/create_acceleration_header.tsx
@@ -4,12 +4,12 @@
  */
 
 import {
+  EuiLink,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiTitle,
   EuiSpacer,
   EuiText,
-  EuiLink,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../../common/constants';

diff --git a/public/components/acceleration/create/utils.tsx b/public/components/acceleration/create/utils.tsx
@@ -3,28 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const isTimePlural = (timeWindow: number) => {
+import { ACCELERATION_INDEX_NAME_REGEX } from '../../../../common/constants';
+
+export const pluralizeTime = (timeWindow: number) => {
   return timeWindow > 1 ? 's' : '';
 };
 
 export const validateIndexName = (value: string) => {
-  const lowercaseUnderscoreHyphenRegex = /^[a-z_\-]+$/;
-
-  if (!lowercaseUnderscoreHyphenRegex.test(value)) {
-    return false;
-  }
-
-  // Check if the value does not begin with underscores or hyphens
-  if (value.startsWith('_') || value.startsWith('-')) {
-    return false;
-  }
-
-  // Check if the value does not contain disallowed characters
-  const disallowedCharacters = /[\s,:"*+\/|?#><]/;
-  if (disallowedCharacters.test(value)) {
-    return false;
-  }
-
-  // If all checks pass, the value is valid
-  return true;
+  // Check if the value does not begin with underscores or hyphens and all characters are lower case
+  return ACCELERATION_INDEX_NAME_REGEX.test(value);
 };
diff --git a/public/components/acceleration/selectors/define_index_options.tsx b/public/components/acceleration/selectors/define_index_options.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiFieldText,
@@ -20,11 +19,11 @@ import {
   EuiModalHeaderTitle,
   EuiSpacer,
   EuiText,
-  EuiHorizontalRule,
 } from '@elastic/eui';
+import React, { ChangeEvent, useState } from 'react';
+import { ACCELERATION_INDEX_NAME_INFO } from '../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../common/types';
 import { validateIndexName } from '../create/utils';
-import { ACCELERATION_INDEX_NAME_INFO } from '../../../../common/constants';
 
 interface DefineIndexOptionsProps {
   accelerationFormData: CreateAccelerationForm;
@@ -36,45 +35,35 @@ export const DefineIndexOptions = ({
   setAccelerationFormData,
 }: DefineIndexOptionsProps) => {
   const [indexName, setIndexName] = useState('');
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  let modal;
+  const [modalComponent, setModalComponent] = useState(<></>);
 
-  if (isModalVisible) {
-    modal = (
-      <EuiModal maxWidth={850} onClose={() => setIsModalVisible(false)}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Acceleration index naming</h1>
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
-        <EuiModalBody>
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiMarkdownFormat>{ACCELERATION_INDEX_NAME_INFO}</EuiMarkdownFormat>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiModalBody>
-        <EuiModalFooter>
-          <EuiButton onClick={() => setIsModalVisible(false)} fill>
-            Close
-          </EuiButton>
-        </EuiModalFooter>
-      </EuiModal>
-    );
-  }
+  const modalValue = (
+    <EuiModal maxWidth={850} onClose={() => setModalComponent(<></>)}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h1>Acceleration index naming</h1>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiMarkdownFormat>{ACCELERATION_INDEX_NAME_INFO}</EuiMarkdownFormat>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButton onClick={() => setModalComponent(<></>)} fill>
+          Close
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
 
   const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
     setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
     setIndexName(e.target.value);
   };
 
-  useEffect(() => {
-    accelerationFormData.accelerationIndexType === 'skipping'
-      ? setIndexName('skipping')
-      : setIndexName('');
-  }, [accelerationFormData.accelerationIndexType]);
-
   const getPreprend = () => {
     const dataSource =
       accelerationFormData.dataSource !== ''
@@ -109,13 +98,13 @@ export const DefineIndexOptions = ({
         Prefix and suffix are added to the name of generated OpenSearch index.'
         labelAppend={
           <EuiText size="xs">
-            <EuiLink onClick={() => setIsModalVisible(true)}>Help</EuiLink>
+            <EuiLink onClick={() => setModalComponent(modalValue)}>Help</EuiLink>
           </EuiText>
         }
       >
         <EuiFieldText
           placeholder="Enter index name"
-          value={indexName}
+          value={accelerationFormData.accelerationIndexType === 'skipping' ? 'skipping' : indexName}
           onChange={onChangeIndexName}
           aria-label="Enter Index Name"
           prepend={getPreprend()}
@@ -124,7 +113,7 @@ export const DefineIndexOptions = ({
           isInvalid={validateIndexName(indexName)}
         />
       </EuiFormRow>
-      {modal}
+      {modalComponent}
     </>
   );
 };
diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, ChangeEvent } from 'react';
-import { CreateAccelerationForm } from '../../../../common/types';
 import {
   EuiFieldNumber,
   EuiFieldText,
@@ -14,8 +12,10 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import { IndexTypeSelector } from './index_type_selector';
+import React, { ChangeEvent, useState } from 'react';
 import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
+import { IndexTypeSelector } from './index_type_selector';
 
 interface IndexSettingOptionsProps {
   accelerationFormData: CreateAccelerationForm;

diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
+import React, { useState } from 'react';
 import {
   ACCELERATION_INDEX_TYPES,
   ACC_INDEX_TYPE_DOCUMENTATION_URL,

diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
@@ -11,8 +11,7 @@ import {
   EuiText,
   htmlIdGenerator,
 } from '@elastic/eui';
-import React, { useState } from 'react';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { CreateAccelerationForm } from '../../../../common/types';
 
 interface AccelerationDataSourceSelectorProps {

diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -5,19 +5,18 @@
 
 import {
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiExpression,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiPopover,
   EuiPopoverTitle,
   EuiSpacer,
   EuiText,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiComboBoxOptionOption,
 } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
-import { CreateAccelerationForm } from '../../../../../common/types';
-import _ from 'lodash';
+import React, { useState } from 'react';
 import { ACCELERATION_ADD_FIELDS_TEXT } from '../../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../../common/types';
 
 interface CoveringIndexBuilderProps {
   accelerationFormData: CreateAccelerationForm;

diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
@@ -3,30 +3,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, useState } from 'react';
 import {
-  EuiPopover,
-  EuiButtonEmpty,
-  EuiPopoverTitle,
-  EuiPopoverFooter,
   EuiButton,
+  EuiButtonEmpty,
+  EuiComboBox,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
   EuiFormRow,
-  EuiComboBox,
-  htmlIdGenerator,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
   EuiSpacer,
+  htmlIdGenerator,
 } from '@elastic/eui';
-
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
 import {
   AggregationFunctionType,
   CreateAccelerationForm,
   MaterializedViewColumn,
 } from '../../../../../common/types';
-import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
-import { useEffect } from 'react';
-import _ from 'lodash';
 
 interface AddColumnPopOverProps {
   isColumnPopOverOpen: boolean;

diff --git a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
@@ -3,14 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
-import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
-import {
-  MaterializedViewColumn,
-  CreateAccelerationForm,
-  AggregationFunctionType,
-} from '../../../../../common/types';
-import _ from 'lodash';
 import {
   EuiButtonIcon,
   EuiComboBox,
@@ -21,6 +13,14 @@ import {
   EuiFormRow,
   EuiPopover,
 } from '@elastic/eui';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
+import {
+  AggregationFunctionType,
+  CreateAccelerationForm,
+  MaterializedViewColumn,
+} from '../../../../../common/types';
 
 interface ColumnExpressionProps {
   index: number;

diff --git a/...c/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx b/...c/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
@@ -3,22 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
 import {
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiExpression,
   EuiFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiPopover,
   EuiSelect,
-  EuiComboBoxOptionOption,
 } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
 import { ACCELERATION_TIME_INTERVAL } from '../../../../../common/constants';
 import { CreateAccelerationForm, GroupByTumbleType } from '../../../../../common/types';
-import _ from 'lodash';
-import { isTimePlural } from '../../create/utils';
+import { pluralizeTime } from '../../create/utils';
 
 interface GroupByTumbleExpressionProps {
   accelerationFormData: CreateAccelerationForm;
@@ -68,7 +67,7 @@ export const GroupByTumbleExpression = ({
             description="GROUP BY"
             value={`TUMBLE(${groupbyValues.timeField}, '${groupbyValues.tumbleWindow} ${
               groupbyValues.tumbleInterval
-            }${isTimePlural(groupbyValues.tumbleWindow)}')`}
+            }${pluralizeTime(groupbyValues.tumbleWindow)}')`}
             isActive={IsGroupPopOverOpen}
             onClick={() => setIsGroupPopOverOpen(true)}
             isInvalid={groupbyValues.timeField === ''}