Merging integration test and 2.4 config from main

.cypress/integration/1_query_compare.spec.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+  landOnSearchRelevance,
+} from '../utils/event_constants';
+
+describe('Search a query', () => {
+  it('Should get search bar', () => {
+    landOnSearchRelevance();
+    cy.get('input[type="search"]').should('exist')
+  });
+});

.cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+ module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

.cypress/support/commands.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+const { ADMIN_AUTH } = require('./constants');
+
+Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
+  // Add the basic auth header when security enabled in the OpenSearch cluster
+  // https://github.com/cypress-io/cypress/issues/1288
+  if (Cypress.env('security_enabled')) {
+    if (options) {
+      options.auth = ADMIN_AUTH;
+    } else {
+      options = { auth: ADMIN_AUTH };
+    }
+    // Add query parameters - select the default OpenSearch Dashboards tenant
+    options.qs = { security_tenant: 'private' };
+    return originalFn(url, options);
+  } else {
+    return originalFn(url, options);
+  }
+});
+
+// Be able to add default options to cy.request(), https://github.com/cypress-io/cypress/issues/726
+Cypress.Commands.overwrite('request', (originalFn, ...args) => {
+  let defaults = {};
+  // Add the basic authentication header when security enabled in the OpenSearch cluster
+  if (Cypress.env('security_enabled')) {
+    defaults.auth = ADMIN_AUTH;
+  }
+
+  let options = {};
+  if (typeof args[0] === 'object' && args[0] !== null) {
+    options = Object.assign({}, args[0]);
+  } else if (args.length === 1) {
+    [options.url] = args;
+  } else if (args.length === 2) {
+    [options.method, options.url] = args;
+  } else if (args.length === 3) {
+    [options.method, options.url, options.body] = args;
+  }
+
+  return originalFn(Object.assign({}, defaults, options));
+});

.cypress/support/constants.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const ADMIN_AUTH = {
+  username: 'admin',
+  password: 'admin',
+};

.cypress/support/index.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// Switch the base URL of OpenSearch when security enabled in the cluster
+if (Cypress.env('security_enabled')) {
+  Cypress.env('opensearch', 'https://localhost:9200');
+}

.cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "../node_modules",
+    "types": ["cypress"]
+  },
+  "include": ["**/*.*"]
+}

.cypress/utils/event_constants.js

@@ -0,0 +1,8 @@
+export const delay = 1000;
+
+export const landOnSearchRelevance = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/searchRelevance#/`
+  );
+  cy.wait(delay);
+};

.gitignore

@@ -4,3 +4,4 @@ build/
 coverage/
 .cypress/screenshots
 .cypress/videos
+yarn-error.log

README.md

@@ -8,11 +8,7 @@ In search applications, tuning relevance is a constant, iterative exercise to br
 ## Search Comparison UI
 The first release in this plugin will include an experimental feature to allow users to enter a plain text search query, substitute that query into two different QueryDSLs and compare the results side by side.
 
-<<<<<<< HEAD
 ### Repository Checks
-
-=======
->>>>>>> 404b67e (Update README.md)
 # Security
 
 See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.

cypress.json

@@ -0,0 +1,22 @@
+{
+  "baseUrl": "http://localhost:5601",
+  "video": true,
+  "chromeWebSecurity": false,
+  "fixturesFolder": ".cypress/fixtures",
+  "integrationFolder": ".cypress/integration",
+  "pluginsFile": ".cypress/plugins/index.js",
+  "screenshotsFolder": ".cypress/screenshots",
+  "supportFile": ".cypress/support/index.js",
+  "videosFolder": ".cypress/videos",
+  "viewportWidth": 2000,
+  "viewportHeight": 1320,
+  "requestTimeout": 60000,
+  "responseTimeout": 60000,
+  "defaultCommandTimeout": 60000,
+  "experimentalNetworkStubbing": true,
+  "env": {
+    "opensearch": "localhost:9200",
+    "opensearchDashboards": "localhost:5601",
+    "security_enabled": true
+  }
+}

opensearch_dashboards.json

@@ -1,7 +1,7 @@
 {
   "id": "searchRelevanceDashboards",
-  "version": "3.0.0.0",
-  "opensearchDashboardsVersion": "3.0.0",
+  "version": "2.4.0.0",
+  "opensearchDashboardsVersion": "2.4.0",
   "server": true,
   "ui": true,
   "requiredPlugins": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "searchRelevanceDashboards",
-  "version": "3.0.0.0",
+  "version": "2.4.0.0",
   "main": "./public/index.ts",
   "license": "Apache-2.0",
   "scripts": {
@@ -11,8 +11,9 @@
     "cypress:open": "TZ=America/Los_Angeles cypress open",
     "plugin_helpers": "node ../../scripts/plugin_helpers"
   },
-  "dependencies": {
-    "yarn": "^1.22.19"
-  },
-  "devDependencies": {}
+  "dependencies": {},
+  "devDependencies": {
+    "cypress": "9.5.4",
+    "eslint": "^6.8.0"
+  }
 }

public/components/common/flyout.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiText,
+  EuiTitle,
+  EuiCodeBlock,
+  EuiLink,
+  EuiCode,
+} from '@elastic/eui';
+
+import { useSearchRelevanceContext } from '../../contexts';
+
+const query1 = `
+{
+  "query": {
+    "multi_match": {
+      "query": "%SearchText%",
+      "fields": ["speaker", "text_entry"]
+    }
+  }
+}
+`;
+
+const query2 = `
+{
+  "query": {
+    "multi_match": {
+      "query": "%SearchText%",
+      "fields": ["speaker^3", "text_entry"]
+    }
+  }
+}
+`;
+
+export const Flyout = () => {
+  const { setShowFlyout } = useSearchRelevanceContext();
+
+  return (
+    <EuiFlyout
+      ownFocus
+      onClose={() => setShowFlyout(false)}
+      aria-labelledby="flyoutTitle"
+      paddingSize="l"
+    >
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2 id="flyoutTitle">Help</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <h3>Query format</h3>
+          <p>
+            Enter a query in{' '}
+            <EuiLink
+              target="_blank"
+              href="https://opensearch.org/docs/latest/opensearch/query-dsl/index/"
+            >
+              OpenSearch Query DSL
+            </EuiLink>
+            . Use the <EuiCode>%SearchText%</EuiCode> variable to refer to the text in the search
+            bar. When you enter <strong>Search</strong>, the queries are sent to the search engine
+            using the <EuiCode>GET</EuiCode> HTTP method and the <EuiCode>_search</EuiCode>{' '}
+            endpoint.
+          </p>
+          <h3>Example</h3>
+          <br />
+          <p>1. Enter the search text in the search bar.</p>
+          <p>
+            2. Select an index for <strong>Query 1</strong> and enter a query.
+          </p>
+          <p>
+            The following example searches the <EuiCode>speaker</EuiCode> and{' '}
+            <EuiCode>text_entry</EuiCode> fields of the <EuiCode>shakespeare</EuiCode>
+            index for the search text:
+          </p>
+          <EuiCodeBlock isCopyable={true} language="json">
+            {query1}
+          </EuiCodeBlock>
+          <p>
+            3. Select an index for <strong>Query 2</strong> and enter a query.
+          </p>
+          <p>
+            You can see how boosting a field affects the results. The following query boosts the
+            <EuiCode>speaker</EuiCode> field:
+          </p>
+          <EuiCodeBlock isCopyable={true} language="json">
+            {query2}
+          </EuiCodeBlock>
+          <p>
+            To learn more about boosts, see the{' '}
+            <EuiLink
+              target="_blank"
+              href="https://opensearch.org/docs/latest/search-plugins/sql/full-text/#multi-match"
+            >
+              Multi-match Query Documentation
+            </EuiLink>
+            .
+          </p>
+          <p>4. Compare results</p>
+          <p>
+            Select <strong>Search</strong> and compare the results in Results 1 and Results 2.
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};