Add basic mocks

Signed-off-by: Mingkun Ma <[email protected]>

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+target/
+build/
+coverage/
+.cypress/screenshots
+.cypress/videos

common/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'searchRelevance';
+export const PLUGIN_NAME = 'Search Relevance';
+
+export const pageStyles: CSS.Properties = {
+  float: 'left',
+  width: '100%',
+  maxWidth: '1130px',
+};
+
+export interface IDocType {
+  [key: string]: string;
+}

opensearch_dashboards.json

@@ -0,0 +1,8 @@
+{
+  "id": "searchRelevance",
+  "version": "2.3.0.0",
+  "opensearchDashboardsVersion": "2.3.0",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["navigation"]
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "searchRelevance",
+  "version": "2.3.0.0",
+  "main": "index.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "osd": "node ../../scripts/osd",
+    "build": "yarn plugin_helpers build",
+    "test": "../../node_modules/.bin/jest --config ./test/jest.config.js",
+    "cypress:run": "TZ=America/Los_Angeles cypress run",
+    "cypress:open": "TZ=America/Los_Angeles cypress open",
+    "plugin_helpers": "node ../../scripts/plugin_helpers"
+  },
+  "dependencies": {
+    "react-grid-layout": "^0.16.2"
+  },
+  "devDependencies": {
+    "@cypress/skip-test": "^2.6.1",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/react-test-renderer": "^16.9.1",
+    "@types/react-grid-layout": "^0.16.7",
+    "cypress": "^5.0.0",
+    "eslint": "^6.8.0",
+    "jest-dom": "^4.0.0"
+  }
+}

public/ace-themes/sql_console.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as ace from 'brace';
+
+ace.define('ace/theme/sql_console', ['require', 'exports', 'module', 'ace/lib/dom'], function (
+  acequire,
+  exports,
+  module
+) {
+  exports.isDark = false;
+  exports.cssClass = 'ace-sql-console';
+  exports.cssText = require('../index.scss');
+
+  const dom = acequire('../lib/dom');
+  dom.importCssString(exports.cssText, exports.cssClass);
+});

public/application.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '../../../src/core/public';
+import { AppPluginStartDependencies } from './types';
+import { SearchRelevanceApp } from './components/app';
+
+export const renderApp = (
+  { notifications, http, chrome }: CoreStart,
+  { navigation }: AppPluginStartDependencies,
+  { element }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <SearchRelevanceApp
+      notifications={notifications}
+      http={http}
+      navigation={navigation}
+      chrome={chrome}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

public/components/app.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import { useState } from 'react';
+import { EuiGlobalToastList } from '@elastic/eui';
+import { CoreStart, Toast } from '../../../../src/core/public';
+import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
+import { Home as QueryCompareHome } from './query_compare/home';
+import { PLUGIN_NAME } from '../../common';
+import { SearchRelevanceContextProvider } from '../contexts';
+
+interface SearchRelevanceAppDeps {
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+  chrome: CoreStart['chrome'];
+}
+
+export const SearchRelevanceApp = ({
+  notifications,
+  http,
+  navigation,
+  chrome,
+}: SearchRelevanceAppDeps) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
+
+  // Render the application DOM.
+  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
+  const parentBreadCrumbs = [{ text: PLUGIN_NAME, href: '#' }];
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToastRightSide(!side ? true : false);
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+  return (
+    <HashRouter>
+      <I18nProvider>
+        <SearchRelevanceContextProvider>
+          <>
+            <EuiGlobalToastList
+              toasts={toasts}
+              dismissToast={(removedToast) => {
+                setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+              }}
+              side={toastRightSide ? 'right' : 'left'}
+              toastLifeTimeMs={6000}
+            />
+            <Switch>
+              <Route
+                path={['/']}
+                render={(props) => {
+                  return (
+                    <QueryCompareHome
+                      parentBreadCrumbs={parentBreadCrumbs}
+                      notifications={notifications}
+                      http={http}
+                      navigation={navigation}
+                      setBreadcrumbs={chrome.setBreadcrumbs}
+                      setToast={setToast}
+                      chrome={chrome}
+                    />
+                  );
+                }}
+              />
+            </Switch>
+          </>
+        </SearchRelevanceContextProvider>
+      </I18nProvider>
+    </HashRouter>
+  );
+};

public/components/common/header/header.scss

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.search-relevance {
+  .header {
+    padding: 12px 20px;
+    background-color: #FFFFFF;
+    border-bottom: 1px solid #D3DAE6;
+  }
+}

public/components/common/header/header.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageHeader, EuiCallOut, EuiText, EuiLink } from '@elastic/eui';
+
+import './header.scss';
+
+export const Header = () => {
+  return (
+    <EuiPageHeader pageTitle="Compare Search results" className="header">
+      <EuiCallOut title="Experimental Feature" iconType="iInCircle">
+        <EuiText>
+          <p>
+            The feature is experimental. For more information, see{' '}
+            <EuiLink>Compare Search Results Documentation.</EuiLink> To leave feedback, visit{' '}
+            <EuiLink>forums.opensearch.com.</EuiLink>
+          </p>
+        </EuiText>
+      </EuiCallOut>
+    </EuiPageHeader>
+  );
+};

public/components/common_utils/utils.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Name validation 0>Name<=50
+export const isNameValid = (name: string) => {
+  return name.length >= 50 || name.length === 0 ? false : true;
+};

public/components/query_compare/create_index.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageBody, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+
+import { Header } from '../common/header/header';
+
+export const CreateIndex = () => {
+  return (
+    <>
+      <Header />
+      <EuiPageBody>
+        <EuiEmptyPrompt
+          title={<h2>Create an index to start comparing search results. </h2>}
+          body={
+            <p>
+              Before you can query data, you have to index it.{' '}
+              <EuiLink>Learn how to index your data.</EuiLink>
+            </p>
+          }
+        />
+      </EuiPageBody>
+    </>
+  );
+};

public/components/query_compare/home.scss

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.search-relevance {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}

public/components/query_compare/home.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { CoreStart, ChromeBreadcrumb } from '../../../../../src/core/public';
+import '../../ace-themes/sql_console';
+import { CreateIndex } from './create_index';
+import { SearchResult } from './search_result';
+import { useSearchRelevanceContext } from '../../contexts';
+import { DocumentsIndex } from '../../types/index';
+import { ServiceEndpoints } from '../../constants';
+
+import './home.scss';
+
+interface QueryExplorerProps {
+  parentBreadCrumbs: ChromeBreadcrumb[];
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  setToast: (title: string, color?: string, text?: any, side?: string) => void;
+  chrome: CoreStart['chrome'];
+}
+
+export const Home = ({
+  parentBreadCrumbs,
+  notifications,
+  http,
+  navigation,
+  setBreadcrumbs,
+  setToast,
+  chrome,
+}: QueryExplorerProps) => {
+  const { documentsIndexes, setDocumentsIndexes } = useSearchRelevanceContext();
+
+  useEffect(() => {
+    setBreadcrumbs([...parentBreadCrumbs]);
+  }, [setBreadcrumbs, parentBreadCrumbs]);
+
+  // Get Indexes
+  useEffect(() => {
+    http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
+      setDocumentsIndexes(res);
+    });
+  }, [http, setDocumentsIndexes]);
+
+  return (
+    <div className="search-relevance">
+      {documentsIndexes.length ? <SearchResult http={http} /> : <CreateIndex />}
+    </div>
+  );
+};