[D&D] Type Service Contributions (opensearch-project#1402)

* feat(Contributions): Simple working contributions

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

* feat(Contributions): Add new field from dropbox

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

* feat(Contributions): Working edit mode

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

* fix(Contributions): Fixes switching dropbox fields

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

* chore: Updates license headers

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

* feat(Contributions): Adds initial drag & drop validation

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

* feat(Dropbox): Allows multiple instances of the same field

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

* feat(Dropbox): Working reorder fields

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

* feat(Contributions): Working container contributions

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

* chore: clean up exports

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

* test(Contribution): Adds unit test `mergeArrays`

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

* test(TypeService): Adds plugin unit tests

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

* chore: remove redundant code

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

* test(Functional): Updates
Chart types

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

src/plugins/wizard/opensearch_dashboards.json

@@ -11,7 +11,8 @@
     "savedObjects",
     "embeddable",
     "dashboard",
-    "visualizations"
+    "visualizations",
+    "opensearchUiShared"
   ],
   "optionalPlugins": []
 }

src/plugins/wizard/public/application/app.scss

@@ -4,10 +4,10 @@
   padding: 0;
   display: grid;
   grid-template-rows: min-content 1fr;
-  grid-template-columns: 420px 1fr;
+  grid-template-columns: 470px 1fr;
   grid-template-areas: 
     "topNav topNav"
     "sideNav workspace"
   ;
-  height: calc(100vh - #{$osdHeaderOffset}); // TODO: update 190px to correct offset variable
+  height: calc(100vh - #{$osdHeaderOffset}); 
 }

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

@@ -1,4 +1,4 @@
-@import "util";
+@import "../util";
 
 .wizSidenav {
   @include scrollNavParent(auto 1fr);

src/plugins/wizard/public/application/components/side_nav.tsx

@@ -5,17 +5,13 @@
 
 import React from 'react';
 import { i18n } from '@osd/i18n';
-
 import { EuiFormLabel, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
-
-import { DataTab } from './data_tab';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../types';
-import { StyleTab } from './style_tab';
-
 import './side_nav.scss';
 import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
 import { setIndexPattern } from '../utils/state_management/datasource_slice';
+import { useVisualizationType } from '../utils/use';
 
 export const SideNav = () => {
   const {
@@ -27,23 +23,15 @@ export const SideNav = () => {
   const { IndexPatternSelect } = data.ui;
   const { indexPattern } = useTypedSelector((state) => state.dataSource);
   const dispatch = useTypedDispatch();
+  const {
+    contributions: { containers },
+  } = useVisualizationType();
 
-  const tabs: EuiTabbedContentTab[] = [
-    {
-      id: 'data-tab',
-      name: i18n.translate('wizard.nav.dataTab.title', {
-        defaultMessage: 'Data',
-      }),
-      content: <DataTab />,
-    },
-    {
-      id: 'style-tab',
-      name: i18n.translate('wizard.nav.styleTab.title', {
-        defaultMessage: 'Style',
-      }),
-      content: <StyleTab />,
-    },
-  ];
+  const tabs: EuiTabbedContentTab[] = containers.sidePanel.map(({ id, name, Component }) => ({
+    id,
+    name,
+    content: Component,
+  }));
 
   return (
     <section className="wizSidenav">

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

@@ -5,8 +5,8 @@
   grid-gap: $euiSizeM;
   padding: $euiSizeM;
   background-color: $euiColorEmptyShade;
-}
 
-.wizWorkspace__empty {
-  height: 100%;
+  &__empty {
+    height: 100%;
+  }
 }

src/plugins/wizard/public/application/components/workspace.tsx

@@ -17,8 +17,9 @@ import {
 import React, { FC, useState, useMemo } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../types';
-import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
+import { useTypedDispatch } from '../utils/state_management';
 import { setActiveVisualization } from '../utils/state_management/visualization_slice';
+import { useVisualizationType } from '../utils/use';
 
 import './workspace.scss';
 
@@ -49,17 +50,12 @@ export const Workspace: FC = ({ children }) => {
 
 const TypeSelectorPopover = () => {
   const [isPopoverOpen, setPopover] = useState(false);
-  const { activeVisualization: activeVisualizationId } = useTypedSelector(
-    (state) => state.visualization
-  );
   const {
     services: { types },
   } = useOpenSearchDashboards<WizardServices>();
   const dispatch = useTypedDispatch();
-
-  // TODO: Error if no active visualization
-  const activeVisualization = types.get(activeVisualizationId || '');
   const visualizationTypes = types.all();
+  const activeVisualization = useVisualizationType();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);

src/plugins/wizard/public/application/contributions/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonItemTypes } from './containers/common/items';
+import { DataTabItemTypes } from './containers/data_tab/items';
+
+export const ItemTypes = {
+  ...CommonItemTypes,
+  ...DataTabItemTypes,
+};

src/plugins/wizard/public/application/contributions/containers/common/items/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './types';
+
+export { Select } from './select';
+export { TextInput } from './text_input';

src/plugins/wizard/public/application/contributions/containers/common/items/select.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo } from 'react';
+import { EuiFormRow, EuiSuperSelect } from '@elastic/eui';
+import { WizardServices } from 'src/plugins/wizard/public';
+import { useOpenSearchDashboards } from '../../../../../../../opensearch_dashboards_react/public';
+import { useTypedSelector } from '../../../../utils/state_management';
+import { SelectContribution } from './types';
+
+interface SelectProps extends Omit<SelectContribution<string>, 'type'> {
+  value: string;
+}
+
+export const Select = ({ label, options, onChange, value, ...rest }: SelectProps) => {
+  const rootState = useTypedSelector((state) => state);
+  const { services } = useOpenSearchDashboards<WizardServices>();
+  const selectOptions = useMemo(
+    () => (typeof options === 'function' ? options(rootState, services) : options),
+    [options, rootState, services]
+  );
+  // const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={label}
+      // error={errorMessage}
+      // isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiSuperSelect
+        fullWidth
+        onChange={(newValue) => {
+          onChange?.(newValue);
+        }}
+        // isInvalid={isInvalid}
+        valueOfSelected={value || ''}
+        data-test-subj="select"
+        options={selectOptions}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/wizard/public/application/contributions/containers/common/items/text_input.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { InputContribution } from './types';
+
+interface InputProps extends Omit<InputContribution, 'type'> {
+  value: string;
+}
+
+export const TextInput = ({ label, onChange, value, ...rest }: InputProps) => {
+  // const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={label}
+      // error={errorMessage}
+      // isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiFieldText
+        fullWidth
+        onChange={(event) => {
+          onChange?.(event.target.value);
+        }}
+        // isInvalid={isInvalid}
+        value={value || ''}
+        data-test-subj="text_input"
+      />
+    </EuiFormRow>
+  );
+};