[Chore] Moves Drag and Drop to new branch (opensearch-project#1400)

* Initial Drag and Drop plugin code (opensearch-project#946)

* Initial Drag and Drop plugin code

Signed-off-by: Ashwin Pc <[email protected]>

* Adds state management to Drag and Drop

Signed-off-by: Ashwin Pc <[email protected]>

* Moves Drag and Drop to create visualization menu

Signed-off-by: Ashwin Pc <[email protected]>

* Field Search in Data panel  (opensearch-project#995)

Add ability to search on index fields
Signed-off-by: Abbas Hussain <[email protected]>

* Adds initial type service (opensearch-project#1260)

Signed-off-by: Ashwin Pc <[email protected]>

* chore: updates viz modal snapshot

Signed-off-by: Ashwin Pc <[email protected]>

* fix(License): Fixes license headers

Signed-off-by: Ashwin Pc <[email protected]>

Co-authored-by: Abbas Hussain <[email protected]>

package.json

@@ -140,6 +140,7 @@
     "@osd/std": "1.0.0",
     "@osd/ui-framework": "1.0.0",
     "@osd/ui-shared-deps": "1.0.0",
+    "@reduxjs/toolkit": "^1.6.2",
     "@types/yauzl": "^2.9.1",
     "JSONStream": "1.3.5",
     "abortcontroller-polyfill": "^1.4.0",

src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx

@@ -278,7 +278,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
       >
         <VisTypeIcon
           icon={visType.type.icon === 'visTimeline' ? 'visTimelion' : visType.type.icon}
-          image={'image' in visType.type ? visType.type.image : 'visTimelion'}
+          image={'image' in visType.type ? visType.type.image : undefined}
         />
       </EuiKeyPadMenuItem>
     );

src/plugins/wizard/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "wizard",
+  "paths": {
+    "wizard": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

src/plugins/wizard/README.md

@@ -0,0 +1,11 @@
+# wizard
+
+A OpenSearch Dashboards plugin
+
+---
+
+## Development
+
+See the [OpenSearch Dashboards contributing
+guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/master/CONTRIBUTING.md) for instructions
+setting up your development environment.

src/plugins/wizard/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'wizard';
+export const PLUGIN_NAME = 'Wizard';
+
+export { WizardSavedObjectAttributes, WIZARD_SAVED_OBJECT } from './wizard_saved_object_attributes';

src/plugins/wizard/common/wizard_saved_object_attributes.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectAttributes } from 'opensearch-dashboards/public';
+
+export const WIZARD_SAVED_OBJECT = 'wizard';
+
+export interface WizardSavedObjectAttributes extends SavedObjectAttributes {
+  title: string;
+  description?: string;
+  state: string;
+}

src/plugins/wizard/opensearch_dashboards.json

@@ -0,0 +1,17 @@
+{
+  "id": "wizard",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "navigation",
+    "data",
+    "opensearchDashboardsReact",
+    "savedObjects",
+    "embeddable",
+    "dashboard",
+    "visualizations"
+  ],
+  "optionalPlugins": []
+}

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

@@ -0,0 +1,3 @@
+@import '@elastic/eui/src/global_styling/variables/header';
+
+$osdHeaderOffset: $euiHeaderHeightCompensation * 2;

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

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

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { EuiPage } from '@elastic/eui';
+import { SideNav } from './components/side_nav';
+import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
+import { Workspace } from './components/workspace';
+
+import './app.scss';
+import { TopNav } from './components/top_nav';
+
+export const WizardApp = () => {
+  // Render the application DOM.
+  return (
+    <I18nProvider>
+      <DragDropProvider>
+        <EuiPage className="wizLayout">
+          <TopNav />
+          <SideNav />
+          <Workspace />
+        </EuiPage>
+      </DragDropProvider>
+    </I18nProvider>
+  );
+};

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

@@ -0,0 +1,8 @@
+@mixin scrollNavParent ($template-row: none) {
+    display: grid;
+    min-height: 0;
+
+    @if $template-row != 'none' {
+        grid-template-rows: $template-row;
+    }
+}

src/plugins/wizard/public/application/components/data_tab/config_panel.scss

@@ -0,0 +1,9 @@
+.wizConfigPanel {
+  background: #f0f1f3;
+  border-left: $euiBorderThin;
+  padding: $euiSizeS;
+}
+
+.wizConfigPanel__title {
+  margin-left: $euiSizeS;
+}

src/plugins/wizard/public/application/components/data_tab/config_panel.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiForm, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { ConfigSection } from './config_section';
+
+import './config_panel.scss';
+import { useTypedSelector } from '../../utils/state_management';
+
+export function ConfigPanel() {
+  const { configSections } = useTypedSelector((state) => state.config);
+
+  return (
+    <EuiForm className="wizConfigPanel">
+      <EuiTitle size="xxxs">
+        <h2 className="wizConfigPanel__title">
+          {i18n.translate('wizard.nav.dataTab.configPanel.title', {
+            defaultMessage: 'Configuration',
+          })}
+        </h2>
+      </EuiTitle>
+      {Object.entries(configSections).map(([sectionId, sectionProps], index) => (
+        <ConfigSection key={index} id={sectionId} {...sectionProps} />
+      ))}
+    </EuiForm>
+  );
+}

src/plugins/wizard/public/application/components/data_tab/config_section.scss

@@ -0,0 +1,23 @@
+.wizConfigSection {
+  margin-top: $euiSize;
+  border-bottom: $euiBorderThin;
+  padding-bottom: $euiSize;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  & .euiFormRow__labelWrapper {
+    margin-left: $euiSizeS;
+  }
+}
+
+.wizConfigSection__dropTarget {
+  @include euiSlightShadow;
+  background: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  box-shadow: 0px 2px 2px rgba(152, 162, 179, 0.15);
+  border-radius: $euiBorderRadius;
+  padding: $euiSizeS $euiSizeM;
+  color: $euiColorDarkShade;
+}

src/plugins/wizard/public/application/components/data_tab/config_section.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonIcon, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import React, { useCallback } from 'react';
+import { IndexPatternField } from 'src/plugins/data/common';
+import { useDrop } from '../../utils/drag_drop';
+import { useTypedDispatch, useTypedSelector } from '../../utils/state_management';
+import {
+  addConfigSectionField,
+  removeConfigSectionField,
+} from '../../utils/state_management/config_slice';
+
+import './config_section.scss';
+
+interface ConfigSectionProps {
+  id: string;
+  title: string;
+}
+
+export const ConfigSection = ({ title, id }: ConfigSectionProps) => {
+  const dispatch = useTypedDispatch();
+  const { fields } = useTypedSelector((state) => state.config.configSections[id]);
+
+  const dropHandler = useCallback(
+    (field: IndexPatternField) => {
+      dispatch(
+        addConfigSectionField({
+          sectionId: id,
+          field,
+        })
+      );
+    },
+    [dispatch, id]
+  );
+  const [dropProps, { isValidDropTarget, dragData }] = useDrop('dataPlane', dropHandler);
+
+  const dropTargetString = dragData
+    ? dragData.type
+    : i18n.translate('wizard.nav.dataTab.configPanel.dropTarget.placeholder', {
+        defaultMessage: 'Click or drop to add',
+      });
+
+  return (
+    <div className="wizConfigSection">
+      <EuiTitle size="xxxs">
+        <h3 className="wizConfigSection__title">{title}</h3>
+      </EuiTitle>
+      {fields.length ? (
+        fields.map((field, index) => (
+          <EuiPanel key={index} paddingSize="s" className="wizConfigSection__field">
+            <EuiText grow size="m">
+              {field.displayName}
+            </EuiText>
+            <EuiButtonIcon
+              color="danger"
+              iconType="cross"
+              aria-label="clear-field"
+              onClick={() =>
+                dispatch(
+                  removeConfigSectionField({
+                    sectionId: id,
+                    field,
+                  })
+                )
+              }
+            />
+          </EuiPanel>
+        ))
+      ) : (
+        <div
+          className={`wizConfigSection__dropTarget ${isValidDropTarget && 'validDropTarget'}`}
+          {...dropProps}
+        >
+          <EuiText size="s">{dropTargetString}</EuiText>
+        </div>
+      )}
+    </div>
+  );
+};

src/plugins/wizard/public/application/components/data_tab/field_search.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { setSearchField } from '../../utils/state_management/datasource_slice';
+import { useTypedDispatch } from '../../utils/state_management';
+
+export interface Props {
+  /**
+   * the input value of the user
+   */
+  value?: string;
+}
+
+/**
+ * Component is Wizard's side bar to  search of available fields
+ * Additionally there's a button displayed that allows the user to show/hide more filter fields
+ */
+export function FieldSearch({ value }: Props) {
+  const searchPlaceholder = i18n.translate('wizard.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search field names',
+  });
+
+  const dispatch = useTypedDispatch();
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup responsive={false} gutterSize={'s'}>
+        <EuiFlexItem>
+          <EuiFieldSearch
+            aria-label={searchPlaceholder}
+            data-test-subj="fieldFilterSearchInput"
+            compressed
+            fullWidth
+            onChange={(event) => dispatch(setSearchField(event.currentTarget.value))}
+            placeholder={searchPlaceholder}
+            value={value}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </React.Fragment>
+  );
+}

src/plugins/wizard/public/application/components/data_tab/field_selector.scss

@@ -0,0 +1,10 @@
+@import "../util";
+
+.wizFieldSelector {
+  @include scrollNavParent(auto 1fr);
+  padding: $euiSizeS;
+}
+
+.wizFieldSelector__fieldGroups {
+  overflow-y: auto;
+}