Complete snapshot restore, mvp for 2.4

cypress/integration/snapshots_spec.js

@@ -100,7 +100,7 @@ describe("Snapshots", () => {
       cy.get("button").contains("Restore snapshot").click({ force: true });
 
       // Check for success toast
-      cy.contains("Restored snapshot test_snapshot to repository test_repo");
+      cy.contains(`Restore from snapshot "test_snapshot" is in progress.`);
     });
   });
 

public/models/interfaces.ts

@@ -44,6 +44,19 @@ interface ArgsWithError {
 }
 export type OnSearchChangeArgs = ArgsWithQuery | ArgsWithError;
 
+export interface Toast {
+  id?: string;
+  title?: string;
+  iconType?: string;
+  color: string;
+  text?: JSX.Element;
+}
+
+export interface RestoreError {
+  reason?: string,
+  type?: string
+}
+
 export interface LatestActivities {
   activityType: "Creation" | "Deletion";
   status?: string;

public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiModal, EuiText, EuiButton, EuiModalHeader, EuiModalFooter, EuiModalBody, EuiModalHeaderTitle } from "@elastic/eui";
+import React from "react";
+
+
+interface ErrorModalProps {
+  error: React.ErrorInfo;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ErrorModal = ({ onClick, error }: ErrorModalProps) => {
+
+  return (
+    <>
+      <EuiModal onClose={onClick}>
+        <EuiModalHeader color="danger" style={{ flexDirection: "column", alignItems: "flex-start" }}>
+          <EuiModalHeaderTitle><h1>{error.type}</h1></EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiText size="m" color="danger">{error.reason}.</EuiText>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={onClick} fill>Close</EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </>
+  );
+};
+
+export default ErrorModal;

public/pages/Snapshots/components/ErrorModal/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import ErrorModal from "./ErrorModal";
+
+export default ErrorModal;

public/pages/Snapshots/components/IndexList/IndexList.tsx

@@ -21,14 +21,10 @@ const IndexList = ({ indices, snapshot, onClick, title }: IndexListProps) => {
     {
       field: "index",
       name: "Index",
-      width: "70%",
+      width: "100%",
+      truncateText: true,
       sortable: true,
-    },
-    {
-      field: "store.size",
-      name: "Total size",
-      sortable: true,
-    },
+    }
   ];
 
   return (

public/pages/Snapshots/components/RenameInput/RenameInput.test.tsx

@@ -34,11 +34,11 @@ describe("RenameInput component", () => {
 
   it("accepts user input", () => {
     // User enters text
-    userEvent.type(screen.getByTestId("renamePatternInput"), "(.+)");
+    userEvent.type(screen.getByTestId("renamePatternInput"), "{selectall}{del}(.+)");
 
     expect(screen.getByTestId("renamePatternInput")).toHaveValue("(.+)");
 
-    userEvent.type(screen.getByTestId("renameReplacementInput"), "test_$1");
+    userEvent.type(screen.getByTestId("renameReplacementInput"), "{selectall}{del}test_$1");
 
     expect(screen.getByTestId("renameReplacementInput")).toHaveValue("test_$1");
   });

public/pages/Snapshots/components/RenameInput/RenameInput.tsx

@@ -3,18 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiFieldText, EuiSpacer } from "@elastic/eui";
+import { EuiFormRow, EuiFieldText, EuiSpacer, EuiText, EuiLink } from "@elastic/eui";
 import React, { useState, ChangeEvent } from "react";
-import CustomLabel from "../../../../components/CustomLabel";
-
+import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants"
 interface RenameInputProps {
   getRenamePattern: (prefix: string) => void;
   getRenameReplacement: (prefix: string) => void;
 }
 
 const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProps) => {
-  const [renamePattern, setRenamePattern] = useState("");
-  const [renameReplacement, setRenameReplacement] = useState("");
+  const [renamePattern, setRenamePattern] = useState("(.+)");
+  const [renameReplacement, setRenameReplacement] = useState("restored_$1");
 
   const onPatternChange = (e: ChangeEvent<HTMLInputElement>) => {
     setRenamePattern(e.target.value);
@@ -26,23 +25,44 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement }: RenameInputProp
     getRenameReplacement(e.target.value);
   };
 
-  const patternHelpText =
-    "Use regular expressiojn to define how index names will be renamed. By default, input (.+) to reuse the entire index name. [Learn more]";
-  const replacementHelpText =
-    "Define the format of renamed indices. Use $0 to include the entire matching index name, $1 to include the content of the first capture group, etc. [Learn more]";
-
   return (
     <>
       <EuiSpacer size="l" />
 
-      <CustomLabel title="Rename Pattern" helpText={patternHelpText} />
+      <EuiText size="xs">
+        <h4>Rename Pattern</h4>
+      </EuiText>
+      <EuiText size="xs" style={{ padding: "0px 0px 5px 0px" }}>
+        <p style={{ fontWeight: 200 }}>
+          Use regular expression to define how index names will be renamed.
+          <br />
+          By default, input (.+) to reuse the entire index name.{" "}
+          <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+            Learn more
+          </EuiLink>
+        </p>
+      </EuiText>
       <EuiFormRow>
         <EuiFieldText value={renamePattern} onChange={onPatternChange} data-test-subj="renamePatternInput" />
       </EuiFormRow>
 
       <EuiSpacer size="m" />
 
-      <CustomLabel title="Rename Replacement" helpText={replacementHelpText} />
+      <EuiText size="xs">
+        <h4>Rename Replacement</h4>
+      </EuiText>
+      <EuiText size="xs" style={{ padding: "0px 0px 5px 0px" }}>
+        <p style={{ fontWeight: 200 }}>
+          Define the format of renamed indices. Use $0 to include the
+          <br />
+          entire matching index name, $1 to include the content of the first
+          <br />
+          capture group, etc.{" "}
+          <EuiLink href={RESTORE_SNAPSHOT_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" external={true}>
+            Learn more
+          </EuiLink>
+        </p>
+      </EuiText>
       <EuiFormRow>
         <EuiFieldText value={renameReplacement} onChange={onReplacementChange} data-test-subj="renameReplacementInput" />
       </EuiFormRow>

public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap

@@ -6,28 +6,39 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiText euiText--extraSmall"
   >
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+    <h4>
+      Rename Pattern
+    </h4>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+    style="padding: 0px 0px 5px 0px;"
+  >
+    <p
+      style="font-weight: 200;"
     >
-      <div
-        class="euiText euiText--extraSmall"
+      Use regular expression to define how index names will be renamed.
+      <br />
+      By default, input (.+) to reuse the entire index name.
+
+      <a
+        class="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest/opensearch/snapshots/snapshot-restore/#restore-snapshots"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        <h4>
-          Rename Pattern
-        </h4>
-      </div>
-    </div>
+        Learn more
+        EuiIconMock
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </p>
   </div>
-  <span
-    style="font-weight: 200; font-size: 12px;"
-  >
-    Use regular expressiojn to define how index names will be renamed. By default, input (.+) to reuse the entire index name. [Learn more]
-  </span>
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFormRow"
     id="some_html_id-row"
@@ -46,7 +57,7 @@ exports[`RenameInput component renders without error 1`] = `
             data-test-subj="renamePatternInput"
             id="some_html_id"
             type="text"
-            value=""
+            value="(.+)"
           />
         </div>
       </div>
@@ -56,28 +67,41 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiText euiText--extraSmall"
   >
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+    <h4>
+      Rename Replacement
+    </h4>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+    style="padding: 0px 0px 5px 0px;"
+  >
+    <p
+      style="font-weight: 200;"
     >
-      <div
-        class="euiText euiText--extraSmall"
+      Define the format of renamed indices. Use $0 to include the
+      <br />
+      entire matching index name, $1 to include the content of the first
+      <br />
+      capture group, etc.
+
+      <a
+        class="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest/opensearch/snapshots/snapshot-restore/#restore-snapshots"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        <h4>
-          Rename Replacement
-        </h4>
-      </div>
-    </div>
+        Learn more
+        EuiIconMock
+        <span
+          class="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </p>
   </div>
-  <span
-    style="font-weight: 200; font-size: 12px;"
-  >
-    Define the format of renamed indices. Use $0 to include the entire matching index name, $1 to include the content of the first capture group, etc. [Learn more]
-  </span>
-  <div
-    class="euiSpacer euiSpacer--s"
-  />
   <div
     class="euiFormRow"
     id="some_html_id-row"
@@ -96,7 +120,7 @@ exports[`RenameInput component renders without error 1`] = `
             data-test-subj="renameReplacementInput"
             id="some_html_id"
             type="text"
-            value=""
+            value="restored_$1"
           />
         </div>
       </div>