HPCC-31258 Initial File structure and page layout creation

This is to create the initial design of Sasha in Cloud.
Feature availability to come as it is created.

Signed-off-by: Kunal Aswani <Kunal.Aswani@lexisnexisrisk.com>

esp/src/src-react/components/Menu.tsx

@@ -162,6 +162,7 @@ const subMenuItems: SubMenuItems = {
         { headerText: nlsHPCC.Security + " (L)", itemKey: "/topology/security" },
         { headerText: nlsHPCC.DESDL + " (L)", itemKey: "/topology/desdl" },
         { headerText: nlsHPCC.DaliAdmin, itemKey: "/topology/daliadmin" },
+        { headerText: nlsHPCC.Sasha, itemKey: "/topology/sasha" },
     ],
     "operations": [
         { headerText: nlsHPCC.Topology + " (L)", itemKey: "/operations" },

esp/src/src-react/components/Sasha.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Dropdown, TextField, PrimaryButton } from "@fluentui/react";
+
+interface SashaProps {}
+
+export const Sasha: React.FunctionComponent<SashaProps> = ({ }) => {
+  const [selectedOption, setSelectedOption] = React.useState("");
+  const [wuid, setWuid] = React.useState("");
+  const [result, setResult] = React.useState("");
+
+  const handleOptionChange = (event: React.FormEvent<HTMLDivElement>, option: any) => {
+    setSelectedOption(option.key);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // Perform action based on selected option
+    switch (selectedOption) {
+      case "getVersion": 
+        // Implement getVersion function call
+        break;
+      case "getLastServerMessage":
+        // Implement getLastServerMessage function call
+        break;
+      case "restoreECLWorkUnit":
+        // Implement restoreECLWorkUnit function call
+        break;
+      case "restoreDFUWorkUnit":
+        // Implement restoreDFUWorkUnit function call
+        break;
+      case "archiveECLWorkUnit":
+        // Implement archiveECLWorkUnit function call
+        break;
+      case "archiveDFUWorkUnit":
+        // Implement archiveDFUWorkUnit function call
+        break;
+      case "backupECLWorkUnit":
+        // Implement backupECLWorkUnit function call
+        break;
+      case "backupDFUWorkUnit":
+        // Implement backupDFUWorkUnit function call
+        break;
+      default:
+        console.log("Invalid option selected");
+    }
+    // Reset form
+    setSelectedOption("");
+    setWuid("");
+    setResult("");
+  };
+
+  // Conditional rendering for default value
+  const defaultValue = result ? null : <div>No data available</div>;
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <Dropdown
+          placeholder="Select an option"
+          selectedKey={selectedOption}
+          onChange={handleOptionChange}
+          options={[
+            { key: "", text: "Select an option" },
+            { key: "getVersion", text: "Get Version" },
+            { key: "getLastServerMessage", text: "Get Last Server Message" },
+            { key: "restoreECLWorkUnit", text: "Restore ECL Workunit" },
+            { key: "restoreDFUWorkUnit", text: "Restore DFU Workunit" },
+            { key: "archiveECLWorkUnit", text: "Archive ECL Workunit" },
+            { key: "archiveDFUWorkUnit", text: "Archive DFU Workunit" },
+            { key: "backupECLWorkUnit", text: "Backup ECL Workunit" },
+            { key: "backupDFUWorkUnit", text: "Backup DFU Workunit" }
+          ]}
+          styles={{ dropdown: { width: 400 } }}
+        />
+        {["restoreECLWorkUnit", "restoreDFUWorkUnit", "archiveECLWorkUnit", "archiveDFUWorkUnit", "backupECLWorkUnit", "backupDFUWorkUnit"].includes(selectedOption) && (
+          <div>
+            <TextField
+              label="Work Unit ID:"
+              value={wuid}
+              onChange={(event: React.FormEvent<HTMLInputElement>, newValue?: string) => setWuid(newValue || "")}
+              styles={{ fieldGroup: { width: 400 } }}
+            />
+          </div>
+        )}
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+        {/* Render defaultValue when result is empty */}
+        {defaultValue}
+        {/* Render result when available */}
+        {result && <div>Result: {result}</div>}
+      </form>
+    </div>
+  );
+};
+
+export default Sasha;

esp/src/src-react/routes.tsx

@@ -390,7 +390,17 @@ export const routes: RoutesEx = [
                     },
                 ]
             },
-        ]
+            {
+                path: "/sasha",
+                        children: [
+                            {
+                                path: "", action: (ctx, params) => import("./components/Sasha").then(_ => {
+                                    return <_.Sasha />;
+                                })
+                            },
+                        ]
+                    },
+                ]
     },
     {
         mainNav: ["operations"],

esp/src/src/nls/hpcc.ts

@@ -820,6 +820,7 @@ export = {
         Sample: "Sample",
         SampleRequest: "Sample Request",
         SampleResponse: "Sample Response",
+        Sasha: "Sasha",
         Save: "Save",
         Scope: "Scope",
         SearchResults: "Search Results",