[infra-429] | Abhishek | Add support to create manifests by copying other manifests

src/App.tsx

@@ -50,16 +50,21 @@ function App() {
           <ProtectedRoute
             path="/manifests/create"
             loginRedirect={loginRedirect}
+            component={Form}
             exact
-          >
-            <Form />
-          </ProtectedRoute>
+          />
           <ProtectedRoute
             path="/manifests/:manifestId/edit"
             component={Form}
             loginRedirect={loginRedirect}
             exact
           />
+          <ProtectedRoute
+            path="/manifests/:manifestId/copy"
+            loginRedirect={loginRedirect}
+            component={Form}
+            exact
+          />
           <ProtectedRoute
             path={"/manifests"}
             exact

src/components/manifest/Form.tsx

@@ -42,6 +42,7 @@ const Form = (props: any) => {
   const [formInitData, setFormInitData] = useState({});
   const { cookies } = props;
   const manifestIdParam = props?.match?.params?.manifestId;
+  const isCopy = String(props.location.pathname).endsWith("copy");
   const [csrfToken] = useState(cookies.get("XSRF-TOKEN"));
 
   const getManifestData = async (manifestId: number): Promise<any> => {
@@ -69,8 +70,26 @@ const Form = (props: any) => {
     }).then((res) => res.json());
   };
 
+  const getCopy = async (manifestId: number): Promise<any> => {
+    console.log(`Fetching copy of manifest id ${manifestId}`);
+    return fetch(`/api/manifest/${manifestId}/copy`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "X-XSRF-TOKEN": props.csrfToken,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }).then((res) => res.json());
+  };
+
   useEffect(() => {
-    if (manifestIdParam) {
+    if(isCopy) {
+      getCopy(manifestIdParam).then(res => {
+        setFormInitData(res);
+      });
+    }
+    else if (manifestIdParam) {
       getManifestData(manifestIdParam).then((res) => {
         setFormInitData(res);
       });
@@ -103,7 +122,7 @@ const Form = (props: any) => {
   return (
     <div id="mainComponent">
       <MenuAppBar
-        name={manifestIdParam ? "Edit Manifest" : "Create New Manifest File"}
+        name={manifestIdParam && !isCopy ? "Edit Manifest" : "Create New Manifest File"}
       />
 
       <Grid container style={{ padding: "2em" }}>

src/components/manifest/ShowDeploymentManifest.tsx

@@ -46,6 +46,9 @@ export const PrettyPrintJson = (props: any) => {
             <Button name="edit" className="float-right" color="secondary">
               <Link to={`/manifests/${props.manifestId}/edit`}>Edit</Link>
             </Button>
+            <Button name="copy" className="float-right" color="primary">
+                <Link to={`/manifests/${props.manifestId}/copy`}>COPY</Link>
+            </Button>
           </>
         ) : (
           <>