Upgrades IM Dashboard plugin to OpenSearch Dashboards 2.0 (#169)

Signed-off-by: Drew Baugher <[email protected]>
opensearch-project · Apr 4, 2022 · 7352cdb · 7352cdb
1 parent 8155501
commit 7352cdb
Show file tree

Hide file tree

Showing 58 changed files with 738 additions and 968 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -8,8 +8,8 @@ on:
       - main
       - development-*
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '1.x'
-  OPENSEARCH_VERSION: '1.3.0-SNAPSHOT'
+  OPENSEARCH_DASHBOARDS_VERSION: 'main'
+  OPENSEARCH_VERSION: '2.0.0-alpha1-SNAPSHOT'
 jobs:
   tests:
     name: Run Cypress E2E tests
@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-java@v1
         with:
           # TODO: Parse this from index management plugin
-          java-version: 14
+          java-version: 11
       - name: Checkout index management
         uses: actions/checkout@v2
         with:

diff --git a/.github/workflows/unit-tests-workflow.yml b/.github/workflows/unit-tests-workflow.yml
@@ -8,7 +8,7 @@ on:
       - main
       - development-*
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '1.x'
+  OPENSEARCH_DASHBOARDS_VERSION: 'main'
 jobs:
   tests:
     name: Run unit tests

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -1,7 +1,7 @@
 {
   "id": "indexManagementDashboards",
-  "version": "1.3.0.0",
-  "opensearchDashboardsVersion": "1.3.0",
+  "version": "2.0.0.0",
+  "opensearchDashboardsVersion": "2.0.0",
   "configPath": ["opensearch_index_management"],
   "requiredPlugins": ["navigation"],
   "server": true,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opensearch_index_management_dashboards",
-  "version": "1.3.0.0",
+  "version": "2.0.0.0",
   "description": "Opensearch Dashboards plugin for Index Management",
   "main": "index.js",
   "license": "Apache-2.0",
@@ -46,10 +46,10 @@
   "devDependencies": {
     "@elastic/elastic-eslint-config-kibana": "link:../../packages/opensearch-eslint-config-opensearch-dashboards",
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
-    "@testing-library/dom": "^7.24.2",
+    "@testing-library/dom": "^8.11.3",
     "@testing-library/user-event": "^13.1.9",
     "@types/react-dom": "^16.9.8",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.3.2",
     "cypress": "^6.0.0",
     "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
@@ -58,7 +58,7 @@
     "ts-loader": "^6.2.1"
   },
   "engines": {
-    "node": "10.24.1",
+    "node": "14.18.2",
     "yarn": "^1.21.1"
   }
 }
diff --git a/public/components/ConfirmationModal/ConfirmationModal.test.tsx b/public/components/ConfirmationModal/ConfirmationModal.test.tsx
@@ -19,10 +19,10 @@ describe("<ConfirmationModal /> spec", () => {
         onAction={() => {}}
       />
     );
-    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // EuiOverlayMask appends an element to the body so we should have three (used to be two, after upgrading appears to have 3 now), an empty div from react-test-library
     // and our EuiOverlayMask element
-    expect(document.body.children).toHaveLength(2);
-    expect(document.body.children[1]).toMatchSnapshot();
+    expect(document.body.children).toHaveLength(3);
+    expect(document.body.children[2]).toMatchSnapshot();
   });
 
   it("calls onAction when action button clicked", () => {

diff --git a/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap b/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -11,13 +11,6 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />
   <div
     data-focus-lock-disabled="false"
   >
@@ -28,7 +21,7 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         EuiIconMock

diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ContentPanel /> spec renders the component 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   style="padding-left: 0px; padding-right: 0px;"
 >
   <div

diff --git a/public/components/CreatePolicyModal/CreatePolicyModal.test.tsx b/public/components/CreatePolicyModal/CreatePolicyModal.test.tsx
@@ -11,18 +11,18 @@ import CreatePolicyModal from "./CreatePolicyModal";
 describe("<CreatePolicyModal /> spec", () => {
   it("renders the component", () => {
     render(<CreatePolicyModal isEdit={false} onClose={() => {}} onClickContinue={() => {}} />);
-    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // EuiOverlayMask appends an element to the body so we should have three (used to be two, after upgrading appears to have 3 now), an empty div from react-test-library
     // and our EuiOverlayMask element
-    expect(document.body.children).toHaveLength(2);
-    expect(document.body.children[1]).toMatchSnapshot();
+    expect(document.body.children).toHaveLength(3);
+    expect(document.body.children[2]).toMatchSnapshot();
   });
 
   it("renders the component w/ edit", () => {
     render(<CreatePolicyModal isEdit={true} onClose={() => {}} onClickContinue={() => {}} />);
-    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // EuiOverlayMask appends an element to the body so we should have three (used to be two, after upgrading appears to have 3 now), an empty div from react-test-library
     // and our EuiOverlayMask element
-    expect(document.body.children).toHaveLength(2);
-    expect(document.body.children[1]).toMatchSnapshot();
+    expect(document.body.children).toHaveLength(3);
+    expect(document.body.children[2]).toMatchSnapshot();
   });
 
   it("calls onAction and onCLose when action button clicked", () => {

diff --git a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap
@@ -11,13 +11,6 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />
   <div
     data-focus-lock-disabled="false"
   >
@@ -28,7 +21,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         EuiIconMock
@@ -77,7 +70,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiPanel euiPanel--paddingMedium selected-radio-panel"
+                      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow selected-radio-panel"
                     >
                       <div
                         class="euiFormRow"
@@ -87,7 +80,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                           class="euiFormRow__fieldWrapper"
                         >
                           <div
-                            aria-describedby="some_html_id-help"
+                            aria-describedby="some_html_id-help-0"
                             class="euiRadio"
                             data-test-subj="createPolicyModalVisualRadio"
                           >
@@ -110,7 +103,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                           </div>
                           <div
                             class="euiFormHelpText euiFormRow__text"
-                            id="some_html_id-help"
+                            id="some_html_id-help-0"
                           >
                             Use the visual editor to create your policy using pre-defined options.
                           </div>
@@ -122,7 +115,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiPanel euiPanel--paddingMedium"
+                      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                     >
                       <div
                         class="euiFormRow"
@@ -132,7 +125,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                           class="euiFormRow__fieldWrapper"
                         >
                           <div
-                            aria-describedby="some_html_id-help"
+                            aria-describedby="some_html_id-help-0"
                             class="euiRadio"
                             data-test-subj="createPolicyModalJsonRadio"
                           >
@@ -154,7 +147,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                           </div>
                           <div
                             class="euiFormHelpText euiFormRow__text"
-                            id="some_html_id-help"
+                            id="some_html_id-help-0"
                           >
                             Use the JSON editor to create or import your policy using JSON.
                           </div>
@@ -237,13 +230,6 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />
   <div
     data-focus-lock-disabled="false"
   >
@@ -254,7 +240,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         EuiIconMock
@@ -303,7 +289,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiPanel euiPanel--paddingMedium selected-radio-panel"
+                      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow selected-radio-panel"
                     >
                       <div
                         class="euiFormRow"
@@ -313,7 +299,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                           class="euiFormRow__fieldWrapper"
                         >
                           <div
-                            aria-describedby="some_html_id-help"
+                            aria-describedby="some_html_id-help-0"
                             class="euiRadio"
                             data-test-subj="createPolicyModalVisualRadio"
                           >
@@ -336,7 +322,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                           </div>
                           <div
                             class="euiFormHelpText euiFormRow__text"
-                            id="some_html_id-help"
+                            id="some_html_id-help-0"
                           >
                             Use the visual editor to update your policy
                           </div>
@@ -348,7 +334,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiPanel euiPanel--paddingMedium"
+                      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                     >
                       <div
                         class="euiFormRow"
@@ -358,7 +344,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                           class="euiFormRow__fieldWrapper"
                         >
                           <div
-                            aria-describedby="some_html_id-help"
+                            aria-describedby="some_html_id-help-0"
                             class="euiRadio"
                             data-test-subj="createPolicyModalJsonRadio"
                           >
@@ -380,7 +366,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                           </div>
                           <div
                             class="euiFormHelpText euiFormRow__text"
-                            id="some_html_id-help"
+                            id="some_html_id-help-0"
                           >
                             Use the JSON editor to update your policy using JSON.
                           </div>

diff --git a/public/components/JSONModal/JSONModal.test.tsx b/public/components/JSONModal/JSONModal.test.tsx
@@ -18,10 +18,10 @@ describe("<JSONModal /> spec", () => {
         onClose={() => {}}
       />
     );
-    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // EuiOverlayMask appends an element to the body so we should have three (used to be two, after upgrading appears to have 3 now), an empty div from react-test-library
     // and our EuiOverlayMask element
-    expect(document.body.children).toHaveLength(2);
-    expect(document.body.children[1]).toMatchSnapshot();
+    expect(document.body.children).toHaveLength(3);
+    expect(document.body.children[2]).toMatchSnapshot();
   });
 
   it("calls close when close button clicked", () => {