@axinom/mosaic-fe-samples-host 0.14.0-rc.7 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-fe-samples-host",
-  "version": "0.14.0-rc.7",
+  "version": "0.14.0",
   "description": "The host application, React components and hooks used when developing fe-sample scenarios",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd9cccfc54ca4179d9cfba424f99e30e455cbd48"
+  "gitHead": "ba7e5a51c2203d2ae44fa62461e0a66eadaa80f4"
 }

package/src/Profiles/Profiles.tsx

@@ -136,6 +136,91 @@ export const Profiles: React.FC<ProfileProps> = ({ match }) => {
     }
   };
 
+  const handleExportProfileClick = () => {
+    const activeProfileIndex = profiles.findIndex(
+      (env) => env.id === selectedProfile?.id,
+    );
+
+    if (activeProfileIndex !== -1 && selectedProfile !== undefined) {
+      const fileDownloadLink = document.createElement('a');
+      fileDownloadLink.href = URL.createObjectURL(
+        new Blob([JSON.stringify(selectedProfile, null, 2)], {
+          type: 'application/json',
+        }),
+      );
+      fileDownloadLink.setAttribute(
+        'download',
+        `fe-samples-${selectedProfile.name}.json`,
+      );
+      document.body.appendChild(fileDownloadLink);
+      fileDownloadLink.click();
+      document.body.removeChild(fileDownloadLink);
+    }
+  };
+
+  const handleImportProfileClick = () => {
+    document.getElementById('fileInput')?.click();
+
+    // Event listener for file input change
+    document
+      .getElementById('fileInput')
+      ?.addEventListener('change', function (event) {
+        if (event && event.target) {
+          const inputElement = event.target as HTMLInputElement;
+
+          // Handle the selected file
+          if (inputElement) {
+            const file = inputElement.files?.[0];
+
+            if (file) {
+              const reader = new FileReader();
+
+              reader.onload = function (e) {
+                const fileContent = e.target?.result;
+
+                // Save file content to local storage
+                saveToLocalStorage(fileContent);
+
+                // Reset the file input value to clear it
+                inputElement.value = '';
+              };
+
+              reader.readAsText(file);
+            } else {
+              console.error(`[importProfile]: Please select a file.`);
+            }
+          }
+        }
+      });
+  };
+
+  const saveToLocalStorage = (fileContent: any) => {
+    const importedProfile = JSON.parse(fileContent);
+
+    const profileAlreadyExists = profiles.find(
+      (profile) => profile.id === importedProfile?.id,
+    );
+
+    if (profileAlreadyExists === undefined) {
+      // Add new data to the profiles array
+      profiles.push(importedProfile);
+
+      setProfiles([...profiles]);
+      saveAllProfiles(profiles);
+    } else {
+      const existProfileIndex = profiles.findIndex(
+        (profile) => profile.id === importedProfile?.id,
+      );
+
+      if (existProfileIndex !== -1) {
+        profiles[existProfileIndex] = importedProfile;
+
+        setProfiles([...profiles]);
+        saveAllProfiles(profiles);
+      }
+    }
+  };
+
   /**
    * A common input changed handler used for all top-level profile fields (i.e. URLs)
    */
@@ -254,9 +339,23 @@ export const Profiles: React.FC<ProfileProps> = ({ match }) => {
                 >
                   Production Profile
                 </Dropdown.Item>
+                <Dropdown.Item
+                  data-test-id="import-from-file"
+                  onClick={handleImportProfileClick}
+                >
+                  Import Profile From File
+                </Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown>
 
+            {/* Invisible file input */}
+            <input
+              id="fileInput"
+              type="file"
+              accept=".json"
+              hidden={true}
+            ></input>
+
             <Button
               basic
               data-test-id="scenarios-button"
@@ -312,6 +411,13 @@ export const Profiles: React.FC<ProfileProps> = ({ match }) => {
                   content="Delete"
                   onClick={handleDeleteProfileClick}
                 />
+                <Button
+                  basic
+                  color="blue"
+                  floated="right"
+                  content="Export"
+                  onClick={handleExportProfileClick}
+                />
               </Header>
 
               <Form>