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

* Initial Drag and Drop plugin code

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

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,16 @@
+{
+  "id": "wizard",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "navigation",
+    "data",
+    "opensearchDashboardsReact",
+    "savedObjects",
+    "embeddable",
+    "dashboard"
+  ],
+  "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,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { EuiPage } from '@elastic/eui';
+import { DataPublicPluginStart, IndexPattern } from '../../../data/public';
+import { SideNav } from './components/side_nav';
+import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WizardServices } from '../types';
+import { Workspace } from './components/workspace';
+
+import './app.scss';
+import { TopNav } from './components/top_nav';
+
+export const WizardApp = () => {
+  const {
+    services: { data },
+  } = useOpenSearchDashboards<WizardServices>();
+
+  const [indexPattern, setIndexPattern] = useIndexPattern(data);
+
+  // Render the application DOM.
+  return (
+    <I18nProvider>
+      <DragDropProvider>
+        <EuiPage className="wizLayout">
+          <TopNav />
+          <SideNav indexPattern={indexPattern} setIndexPattern={setIndexPattern} />
+          <Workspace />
+        </EuiPage>
+      </DragDropProvider>
+    </I18nProvider>
+  );
+};
+
+// TODO: Temporary. Need to update it fetch the index pattern cohesively
+function useIndexPattern(data: DataPublicPluginStart) {
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | null>(null);
+  useEffect(() => {
+    const fetchIndexPattern = async () => {
+      const defaultIndexPattern = await data.indexPatterns.getDefault();
+      if (defaultIndexPattern) {
+        setIndexPattern(defaultIndexPattern);
+      }
+    };
+    fetchIndexPattern();
+  }, [data.indexPatterns]);
+
+  return [indexPattern, setIndexPattern] as const;
+}

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,43 @@
+/*
+ * 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 { BUCKET_TYPES, METRIC_TYPES } from '../../../../../data/public';
+import { ConfigSection } from './config_section';
+
+import './config_panel.scss';
+
+// TODO: Temp. Remove once visualizations can be refgistered and editor configs can be passed along
+const CONFIG = {
+  x: {
+    title: 'X Axis',
+    allowedAggregation: BUCKET_TYPES.TERMS,
+  },
+  y: {
+    title: 'Y Axis',
+    allowedAggregation: METRIC_TYPES.AVG,
+  },
+};
+
+export function ConfigPanel() {
+  const sections = 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(sections).map(([sectionId, sectionProps], index) => (
+        <ConfigSection key={index} id={sectionId} {...sectionProps} onChange={() => {}} />
+      ))}
+    </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,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonIcon, EuiFormRow, EuiPanel, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import React, { useCallback, useEffect, useState } from 'react';
+import { IndexPatternField } from 'src/plugins/data/common';
+import { useDrop } from '../../utils/drag_drop';
+
+import './config_section.scss';
+
+interface ConfigSectionProps {
+  id: string;
+  title: string;
+  onChange: Function;
+}
+
+export const ConfigSection = ({ title, id, onChange }: ConfigSectionProps) => {
+  const [currentField, setCurrentField] = useState<IndexPatternField>();
+
+  const dropHandler = useCallback((field: IndexPatternField) => {
+    setCurrentField(field);
+  }, []);
+  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',
+      });
+
+  useEffect(() => {
+    onChange(id, currentField);
+  }, [id, currentField, onChange]);
+
+  return (
+    <EuiFormRow label={title} className="wizConfigSection">
+      {currentField ? (
+        <EuiPanel paddingSize="s" className="wizConfigSection__field">
+          <EuiText grow size="m">
+            {currentField.displayName}
+          </EuiText>
+          <EuiButtonIcon
+            color="danger"
+            iconType="cross"
+            aria-label="clear-field"
+            onClick={() => setCurrentField(undefined)}
+          />
+        </EuiPanel>
+      ) : (
+        <div
+          className={`wizConfigSection__dropTarget ${isValidDropTarget && 'validDropTarget'}`}
+          {...dropProps}
+        >
+          <EuiText size="s">{dropTargetString}</EuiText>
+        </div>
+      )}
+    </EuiFormRow>
+  );
+};

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;
+}