From 755494254a2a30922747ac3f42e1a182e5a7b425 Mon Sep 17 00:00:00 2001
From: Vasilis Kefalas <vkefalas@existanze.com>
Date: Fri, 27 Sep 2024 17:46:34 +0300
Subject: [PATCH] Dev (#25)

* Synchronizing code from bitbucket repository

* Removing TomSelect because it is no longer updated

* Metric template remove restriction

* Multiple environment variables fix

* - Setting dark mode by default in the login window
- Providing better view of current build id and build environment for debugging
- Added environment variables to set_env.sh so that they can be set during build

* Application saving and traversing through the ui fixed #8 #11

* Fixing ts errors on Error handling

* Adding build specific information for better debugging

* Added new button to duplicate application

* Bug fixes and improvements

---------

Co-authored-by: Fotis Paraskevopoulos <fotis@existanze.com>
---
 gui/src/components/Application/Resources.vue  |  23 +-
 .../Modal/DuplicationConfirmation.vue         |  52 +++
 gui/src/components/Modal/ResourceCreation.vue |  37 +-
 gui/src/components/Modal/ResourceEditing.vue  | 349 +++++++++++++++++-
 gui/src/components/Modal/index.vue            |  15 +-
 gui/src/constants/modalWindowNames.ts         |   1 +
 .../Applications/Overview/index.vue           |  23 ++
 gui/src/containers/Users/index.vue            |  16 +-
 gui/src/interfaces/resources.interface.ts     |   2 +-
 .../store/api-services/application.service.ts |   3 +
 gui/src/store/api-services/user.service.ts    |   2 +-
 gui/src/store/modules/application.ts          |   5 +
 12 files changed, 482 insertions(+), 46 deletions(-)
 create mode 100644 gui/src/components/Modal/DuplicationConfirmation.vue

diff --git a/gui/src/components/Application/Resources.vue b/gui/src/components/Application/Resources.vue
index 26f6b46..4077654 100644
--- a/gui/src/components/Application/Resources.vue
+++ b/gui/src/components/Application/Resources.vue
@@ -54,18 +54,21 @@ const props = withDefaults(defineProps<ResourcesProps>(), {
 
 const resources = computed<Array<IAppResource>>(() =>
 
-  resourceStore.resources.results.map((resource) => {
-    // prettier-ignore
-    const isEnabled = props.payload.appResources
+    resourceStore.resources.results.map((resource) => {
+      const regions = Array.isArray(resource.regions)
+          ? resource.regions.map((region) => region.region).join(', ')
+          : resource.regions;
+
+      const isEnabled = props.payload.appResources
         .find((appResource: IAppResource) => appResource.uuid === resource.uuid)?.enabled ?? false
-    return {
-      uuid: resource.uuid,
-      title: resource.title,
-      platform: resource.platform.title,
-      regions: resource.regions,
-      enabled: isEnabled
+      return {
+        uuid: resource.uuid,
+        title: resource.title,
+        platform: resource.platform.title,
+        regions: regions,
+        enabled: isEnabled
     }
-  })
+    })
 )
 
 const retrieveAllResources = async () => {
diff --git a/gui/src/components/Modal/DuplicationConfirmation.vue b/gui/src/components/Modal/DuplicationConfirmation.vue
new file mode 100644
index 0000000..4c02f5b
--- /dev/null
+++ b/gui/src/components/Modal/DuplicationConfirmation.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col text-start">
+    <div class="p-5 text-center">
+      <Lucide icon="Copy" class="w-16 h-16 mx-auto mt-3 text-primary" />
+      <div class="mt-5 text-3xl">Confirm Duplication</div>
+      <div class="mt-2 text-slate-500">
+        Do you want to duplicate the selected application? <br />
+        This action will create a new application based on the original.
+      </div>
+    </div>
+    <div class="px-5 pb-8 text-center">
+      <Button type="button" variant="outline-secondary" @click="cancelAction" class="w-24 mr-1"> Cancel </Button>
+      <Button type="button" variant="primary" class="w-24" @click="confirmAction"> Duplicate </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from "@/base-components/Button"
+import Lucide from "@/base-components/Lucide"
+import { useUIStore } from "@/store/modules/ui.ts"
+
+const props = defineProps({
+  payload: {
+    type: Object,
+    default: () => ({
+      itemType: "",
+      itemName: "",
+      cancelAction: () => {},
+      confirmAction: () => {
+        console.log("No action performed")
+      }
+    })
+  }
+})
+
+const uiStore = useUIStore()
+
+const closeModal = () => {
+  uiStore.setModalWindowState()
+}
+
+const cancelAction = () => {
+  props.payload?.cancelAction()
+  closeModal()
+}
+
+const confirmAction = () => {
+  props.payload.confirmAction()
+  closeModal()
+}
+</script>
diff --git a/gui/src/components/Modal/ResourceCreation.vue b/gui/src/components/Modal/ResourceCreation.vue
index 280c490..11c6a6f 100644
--- a/gui/src/components/Modal/ResourceCreation.vue
+++ b/gui/src/components/Modal/ResourceCreation.vue
@@ -24,6 +24,7 @@ import {SNACKBAR_MESSAGE_TYPES} from "@/constants"
 import {IResourcePayload} from "@/types/resource.ts"
 import ResourceForm from "@/components/Modal/ResourceForm.vue";
 import {IPlatform} from "@/interfaces/platform.interface.ts";
+import { IRegion } from "@/interfaces/resources.interface.ts"
 
 const resourceStore = useResourceStore()
 const uiStore = useUIStore()
@@ -67,24 +68,30 @@ const closeModal = (skipConfirmation: boolean = false) => {
 
 
 const createResource = async () => {
-  if (!(await v$.value.$validate())){
-    console.log("Failed validation")
-    return
+  // Map regions from objects to string (comma-separated region identifiers)
+  if (Array.isArray(resourceData.regions)) {
+    resourceData.regions = resourceData.regions.map((region: IRegion) => region.region).join(',');
+  }
+
+  if (!(await v$.value.$validate())) {
+    console.log("Failed validation");
+    return;
   }
 
   resourceStore
-    .createResource(resourceData)
-    .then((createdResource) => {
-      closeModal(true)
-      uiStore.setSnackbarMessage({
-        message: `Successfully created resource ${createdResource.title}`,
-        type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+      .createResource(resourceData)
+      .then((createdResource) => {
+        closeModal(true);
+        uiStore.setSnackbarMessage({
+          message: `Successfully created resource ${createdResource.title}`,
+          type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+        });
       })
-    })
-    .catch((error) => {
-      const errors = extractExternalResults(error)
-      Object.assign($externalResults, errors)
-    })
-}
+      .catch((error) => {
+        const errors = extractExternalResults(error);
+        Object.assign($externalResults, errors);
+      });
+};
+
 
 </script>
diff --git a/gui/src/components/Modal/ResourceEditing.vue b/gui/src/components/Modal/ResourceEditing.vue
index f129963..524a25b 100644
--- a/gui/src/components/Modal/ResourceEditing.vue
+++ b/gui/src/components/Modal/ResourceEditing.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue"
+import { reactive, ref, onMounted } from "vue"
 import { useUIStore } from "@/store/modules/ui.ts"
 import { useResourceStore } from "@/store/modules/resources.ts"
 import { useVuelidate } from "@vuelidate/core"
@@ -25,6 +25,8 @@ import { SNACKBAR_MESSAGE_TYPES } from "@/constants"
 import { IResourcePayload } from "@/types/resource.ts"
 import { IPlatform } from "@/interfaces/platform.interface.ts"
 import ResourceForm from "@/components/Modal/ResourceForm.vue";
+import { IRegion, IRegions } from "@/interfaces/resources.interface.ts"
+import _ from "lodash"
 
 interface ResourceEditingProps {
   payload: IResourcePayload & { uuid: string }
@@ -35,6 +37,300 @@ const props = defineProps<ResourceEditingProps>()
 const resourceStore = useResourceStore()
 const uiStore = useUIStore()
 
+const availableRegions = ref<IRegions>({
+  'AWS': [
+    {
+      "region_name": "US East (Ohio)",
+      "region": "us-east-2",
+      "endpoints": [
+        "rds.us-east-2.amazonaws.com",
+        "rds-fips.us-east-2.api.aws",
+        "rds.us-east-2.api.aws",
+        "rds-fips.us-east-2.amazonaws.com"
+      ],
+      "protocol": ["HTTPS", "HTTPS", "HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "US East (N. Virginia)",
+      "region": "us-east-1",
+      "endpoints": [
+        "rds.us-east-1.amazonaws.com",
+        "rds-fips.us-east-1.api.aws",
+        "rds-fips.us-east-1.amazonaws.com",
+        "rds.us-east-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS", "HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "US West (N. California)",
+      "region": "us-west-1",
+      "endpoints": [
+        "rds.us-west-1.amazonaws.com",
+        "rds.us-west-1.api.aws",
+        "rds-fips.us-west-1.amazonaws.com",
+        "rds-fips.us-west-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS", "HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "US West (Oregon)",
+      "region": "us-west-2",
+      "endpoints": [
+        "rds.us-west-2.amazonaws.com",
+        "rds-fips.us-west-2.amazonaws.com",
+        "rds.us-west-2.api.aws",
+        "rds-fips.us-west-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS", "HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Africa (Cape Town)",
+      "region": "af-south-1",
+      "endpoints": [
+        "rds.af-south-1.amazonaws.com",
+        "rds.af-south-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Hong Kong)",
+      "region": "ap-east-1",
+      "endpoints": [
+        "rds.ap-east-1.amazonaws.com",
+        "rds.ap-east-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Hyderabad)",
+      "region": "ap-south-2",
+      "endpoints": [
+        "rds.ap-south-2.amazonaws.com",
+        "rds.ap-south-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Jakarta)",
+      "region": "ap-southeast-3",
+      "endpoints": [
+        "rds.ap-southeast-3.amazonaws.com",
+        "rds.ap-southeast-3.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Melbourne)",
+      "region": "ap-southeast-4",
+      "endpoints": [
+        "rds.ap-southeast-4.amazonaws.com",
+        "rds.ap-southeast-4.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Mumbai)",
+      "region": "ap-south-1",
+      "endpoints": [
+        "rds.ap-south-1.amazonaws.com",
+        "rds.ap-south-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Osaka)",
+      "region": "ap-northeast-3",
+      "endpoints": [
+        "rds.ap-northeast-3.amazonaws.com",
+        "rds.ap-northeast-3.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Seoul)",
+      "region": "ap-northeast-2",
+      "endpoints": [
+        "rds.ap-northeast-2.amazonaws.com",
+        "rds.ap-northeast-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Singapore)",
+      "region": "ap-southeast-1",
+      "endpoints": [
+        "rds.ap-southeast-1.amazonaws.com",
+        "rds.ap-southeast-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Sydney)",
+      "region": "ap-southeast-2",
+      "endpoints": [
+        "rds.ap-southeast-2.amazonaws.com",
+        "rds.ap-southeast-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Asia Pacific (Tokyo)",
+      "region": "ap-northeast-1",
+      "endpoints": [
+        "rds.ap-northeast-1.amazonaws.com",
+        "rds.ap-northeast-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Canada (Central)",
+      "region": "ca-central-1",
+      "endpoints": [
+        "rds.ca-central-1.amazonaws.com",
+        "rds.ca-central-1.api.aws",
+        "rds-fips.ca-central-1.api.aws",
+        "rds-fips.ca-central-1.amazonaws.com"
+      ],
+      "protocol": ["HTTPS", "HTTPS", "HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Canada West (Calgary)",
+      "region": "ca-west-1",
+      "endpoints": [
+        "rds.ca-west-1.amazonaws.com",
+        "rds-fips.ca-west-1.amazonaws.com"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Frankfurt)",
+      "region": "eu-central-1",
+      "endpoints": [
+        "rds.eu-central-1.amazonaws.com",
+        "rds.eu-central-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Ireland)",
+      "region": "eu-west-1",
+      "endpoints": [
+        "rds.eu-west-1.amazonaws.com",
+        "rds.eu-west-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (London)",
+      "region": "eu-west-2",
+      "endpoints": [
+        "rds.eu-west-2.amazonaws.com",
+        "rds.eu-west-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Milan)",
+      "region": "eu-south-1",
+      "endpoints": [
+        "rds.eu-south-1.amazonaws.com",
+        "rds.eu-south-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Paris)",
+      "region": "eu-west-3",
+      "endpoints": [
+        "rds.eu-west-3.amazonaws.com",
+        "rds.eu-west-3.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Spain)",
+      "region": "eu-south-2",
+      "endpoints": [
+        "rds.eu-south-2.amazonaws.com",
+        "rds.eu-south-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Stockholm)",
+      "region": "eu-north-1",
+      "endpoints": [
+        "rds.eu-north-1.amazonaws.com",
+        "rds.eu-north-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Europe (Zurich)",
+      "region": "eu-central-2",
+      "endpoints": [
+        "rds.eu-central-2.amazonaws.com",
+        "rds.eu-central-2.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Israel (Tel Aviv)",
+      "region": "il-central-1",
+      "endpoints": [
+        "rds.il-central-1.amazonaws.com",
+        "rds.il-central-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Middle East (Bahrain)",
+      "region": "me-south-1",
+      "endpoints": [
+        "rds.me-south-1.amazonaws.com",
+        "rds.me-south-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "Middle East (UAE)",
+      "region": "me-central-1",
+      "endpoints": [
+        "rds.me-central-1.amazonaws.com",
+        "rds.me-central-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "South America (São Paulo)",
+      "region": "sa-east-1",
+      "endpoints": [
+        "rds.sa-east-1.amazonaws.com",
+        "rds.sa-east-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "AWS GovCloud (US-East)",
+      "region": "us-gov-east-1",
+      "endpoints": [
+        "rds.us-gov-east-1.amazonaws.com",
+        "rds.us-gov-east-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    },
+    {
+      "region_name": "AWS GovCloud (US-West)",
+      "region": "us-gov-west-1",
+      "endpoints": [
+        "rds.us-gov-west-1.amazonaws.com",
+        "rds.us-gov-west-1.api.aws"
+      ],
+      "protocol": ["HTTPS", "HTTPS"]
+    }
+  ]
+})
+
 const resourceData = reactive<IResourcePayload>(props.payload)
 
 // HACK: https://github.com/vuelidate/vuelidate/issues/1147
@@ -52,26 +348,51 @@ const closeModal = (skipConfirmation: boolean = false) => {
   uiStore.setModalWindowState(null, skipConfirmation)
 }
 
+const mapRegionsForDisplay = () => {
+  if (resourceData.platform && resourceData.platform.title === 'AWS') {
+    // For AWS, map regions from a comma-separated string to an array of region objects
+    if (resourceData.regions && typeof resourceData.regions === 'string') {
+      const regionIds = resourceData.regions.split(',')
+      resourceData.regions = _.filter(availableRegions.value['AWS'], (region: IRegion) => regionIds.includes(region.region))
+    }
+  }
+}
+
+
+const formatRegionsForSubmission = () => {
+  if (resourceData.platform && resourceData.platform.title === 'AWS') {
+    if (Array.isArray(resourceData.regions)) {
+      resourceData.regions = resourceData.regions.map((region: IRegion) => region.region).join(',')
+    }
+  }
+}
+
+
+onMounted(() => {
+  mapRegionsForDisplay()
+})
+
 const editResource = async () => {
+  formatRegionsForSubmission()
+
   const validate = await  v$.value.$validate()
   if (!validate){
     return
   }
 
   resourceStore
-    .editResource(props.payload.uuid, resourceData)
-    .then((editedResource) => {
-      closeModal(true)
-      uiStore.setSnackbarMessage({
-        message: `Successfully edited resource ${editedResource.title}`,
-        type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+      .editResource(props.payload.uuid, resourceData)
+      .then((editedResource) => {
+        closeModal(true)
+        uiStore.setSnackbarMessage({
+          message: `Successfully edited resource ${editedResource.title}`,
+          type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+        })
+      })
+      .catch((error) => {
+        const errors = extractExternalResults(error)
+        Object.assign($externalResults, errors)
       })
-    })
-    .catch((error) => {
-      const errors = extractExternalResults(error)
-      Object.assign($externalResults, errors)
-    })
 }
 
-
-</script>
+</script>
\ No newline at end of file
diff --git a/gui/src/components/Modal/index.vue b/gui/src/components/Modal/index.vue
index 3a302f1..ee92863 100644
--- a/gui/src/components/Modal/index.vue
+++ b/gui/src/components/Modal/index.vue
@@ -5,9 +5,16 @@
       <component v-if="openedModalWindow" :is="components[openedModalWindow.name]" :payload="openedModalWindow.payload">
         <template #title>
           <Dialog.Title class="p-8">
-            <p v-if="openedModalWindow.title" class="text-2xl text-center" data-test="modal-title">
-              {{ openedModalWindow.title }}
-            </p>
+            <div>
+              <p v-if="openedModalWindow.title" class="text-2xl text-center mb-2" data-test="modal-title">
+                {{ openedModalWindow.title }}
+              </p>
+              <p class="text-left mt-2">
+                <a href="https://github.com/eu-nebulous/nebulous/wiki/2.1-Managing-cloud-providers" target="_blank" class="text-blue-500 underline">
+                  View instructions
+                </a>
+              </p>
+            </div>
           </Dialog.Title>
         </template>
       </component>
@@ -26,6 +33,7 @@ import UserEditing from "@/components/Modal/UserEditing.vue"
 import ResourceCreation from "@/components/Modal/ResourceCreation.vue"
 import ResourceEditing from "@/components/Modal/ResourceEditing.vue"
 import DeleteConfirmation from "@/components/Modal/DeleteConfirmation.vue"
+import DuplicationConfirmation from "@/components/Modal/DuplicationConfirmation.vue"
 import ExitConfirmation from "@/components/Modal/ExitConfirmation.vue"
 
 import Snackbar from "@/components/Snackbar"
@@ -38,6 +46,7 @@ const components: Record<keyof typeof MODAL_WINDOW_NAMES, Component> = {
   [MODAL_WINDOW_NAMES.RESOURCE_CREATION]: ResourceCreation,
   [MODAL_WINDOW_NAMES.RESOURCE_EDITING]: ResourceEditing,
   [MODAL_WINDOW_NAMES.CONFIRM_DELETING_MODAL]: DeleteConfirmation,
+  [MODAL_WINDOW_NAMES.CONFIRM_DUPLICATION_MODAL]: DuplicationConfirmation,
   [MODAL_WINDOW_NAMES.EXIT_MESSAGE_MODAL]: ExitConfirmation
 }
 
diff --git a/gui/src/constants/modalWindowNames.ts b/gui/src/constants/modalWindowNames.ts
index 79d85a5..2432027 100644
--- a/gui/src/constants/modalWindowNames.ts
+++ b/gui/src/constants/modalWindowNames.ts
@@ -4,5 +4,6 @@ export default {
   RESOURCE_EDITING: "resourceEditing",
   USER_EDITING: "userEditing",
   CONFIRM_DELETING_MODAL: "confirmDeletingModal",
+  CONFIRM_DUPLICATION_MODAL: "confirmDuplicationModal",
   EXIT_MESSAGE_MODAL: "exitMessageModal"
 }
diff --git a/gui/src/containers/Applications/Overview/index.vue b/gui/src/containers/Applications/Overview/index.vue
index 25a4934..97795f2 100644
--- a/gui/src/containers/Applications/Overview/index.vue
+++ b/gui/src/containers/Applications/Overview/index.vue
@@ -30,6 +30,7 @@
 
           <Lucide  icon="PlayCircle" class="w-10 text-white" @click="deployApplication(application)" />
           <Lucide v-if="application.status=='draft' || application.status=='ready' || !application.status" icon="Pencil" class="w-10 text-warning" @click="toApplicationEditing(application)" />
+          <Lucide v-if="application.status=='draft' || application.status=='ready' || !application.status" icon="Copy" class="w-10 text-info" @click="duplicateApplication(application)" />
           <Lucide v-if="application.status=='draft' || application.status=='ready' || !application.status" icon="Trash2" class="w-10 text-danger" @click="removeApplication(application.uuid)" />
         </div>
       </div>
@@ -171,5 +172,27 @@ const deployApplication = (application: IApplication) =>{
   applicationStore.deployApplication(application.uuid)
 
 
+}
+const duplicateApplication = (application: IApplication) => {
+  uiStore.setModalWindowState({
+    name: MODAL_WINDOW_NAMES.CONFIRM_DUPLICATION_MODAL,
+    payload: {
+      confirmAction: () => {
+        applicationStore.duplicateApplication(application.uuid).then((newApp: IApplicationOverview) => {
+          const newAppUuid = newApp.uuid;
+          uiStore.setSnackbarMessage({
+            message: "Successfully duplicated application",
+            type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+          })
+        }).catch(() => {
+          uiStore.setSnackbarMessage({
+            message: "Failed to duplicate application",
+            type: SNACKBAR_MESSAGE_TYPES.ERROR
+          })
+        })
+      },
+      cancelAction: () => {}
+    }
+  })
 }
 </script>
diff --git a/gui/src/containers/Users/index.vue b/gui/src/containers/Users/index.vue
index 9916b3b..e926d5d 100644
--- a/gui/src/containers/Users/index.vue
+++ b/gui/src/containers/Users/index.vue
@@ -2,7 +2,8 @@
   <div class="flex flex-col mt-8 intro-y">
     <div class="flex flex-row items-center justify-between mb-4">
       <h2 class="text-base uppercase">Users</h2>
-      <Button variant="primary" class="uppercase" @click="openUserCreationDialogue">Add user </Button>
+      <Button variant="primary" class="uppercase" @click="openUserCreationDialogue">Add user</Button>
+<!--      <Button v-if="isAdmin" variant="primary" class="uppercase" @click="openUserCreationDialogue">Add user</Button>-->
     </div>
 
     <div class="md:box flex-grow overflow-x-auto md:p-5">
@@ -80,9 +81,20 @@ import { usePagination } from "@/composables/usePagination.ts"
 
 const userStore = useUserStore()
 const uiStore = useUIStore()
-
+const isAdmin = ref(false)
 const users = computed<Array<IUser>>(() => userStore.users)
 
+// const retrieveMe = async () => {
+//   const currentUser = await userStore.retrieveUserInfo()
+//   console.log("Current User:", currentUser)
+//
+//   isAdmin.value = currentUser?.role === 'admin'
+//   console.log("Is Admin:", isAdmin.value)
+// }
+//
+// retrieveMe()
+
+// Pagination settings
 const currentPage = ref(1)
 const rowsPerPage = ref(10)
 
diff --git a/gui/src/interfaces/resources.interface.ts b/gui/src/interfaces/resources.interface.ts
index ed34cf1..2ef1260 100644
--- a/gui/src/interfaces/resources.interface.ts
+++ b/gui/src/interfaces/resources.interface.ts
@@ -18,7 +18,7 @@ export interface ICredentials{
 export interface IResource {
   uuid: string
   title: string
-  regions: string
+  regions: string | Array<IRegion>
   securityGroup: string
   subnet: string
   endpoint: string
diff --git a/gui/src/store/api-services/application.service.ts b/gui/src/store/api-services/application.service.ts
index 351f57e..e04e7d5 100644
--- a/gui/src/store/api-services/application.service.ts
+++ b/gui/src/store/api-services/application.service.ts
@@ -138,6 +138,9 @@ export default {
     async publishPolicies(policies:string): Promise<PolicyResponseType> {
         console.log("Publishing policies" , policies)
         return axios.post(`/api/v1/policies/publish`,{policies:policies}).then(({data}) => data)
+    },
+    async duplicateApplication(uuid: string): Promise<IApplicationOverview> {
+        return axios.post(`/api/v1/application/${uuid}/uuid/duplicate`).then(({data}) => data)
     }
 
 
diff --git a/gui/src/store/api-services/user.service.ts b/gui/src/store/api-services/user.service.ts
index 9f81d71..d5c8b82 100644
--- a/gui/src/store/api-services/user.service.ts
+++ b/gui/src/store/api-services/user.service.ts
@@ -7,7 +7,7 @@ export default {
     return axios.post("/api/v1/@apostrophecms/login/login", payload).then(({ data }) => data)
   },
   async getUserProfileData(): Promise<IUser> {
-    return axios.get("/api/v1/userapi/me").then(({ data }) => data)
+    return axios.get("/api/v1/@apostrophecms/settings").then(({ data }) => data)
   },
   async editUserProfileData(payload: Omit<IUserPayload, "confirmPassword">): Promise<IUser> {
     return axios.patch("/api/v1/userapi/profile-update", payload).then(({ data }) => data)
diff --git a/gui/src/store/modules/application.ts b/gui/src/store/modules/application.ts
index 0f30041..b401296 100644
--- a/gui/src/store/modules/application.ts
+++ b/gui/src/store/modules/application.ts
@@ -58,6 +58,11 @@ export const useApplicationStore = defineStore("application", {
     },
     async invokeYamlComponents(content: string): Promise<Array<string>> {
       return await applicationService.getYamlComponents({ content })
+    },
+    async duplicateApplication(uuid: string): Promise<IApplicationOverview> {
+      const duplicatedApplication: IApplicationOverview = await applicationService.duplicateApplication(uuid)
+      this.applications.results.unshift(duplicatedApplication)
+      return duplicatedApplication
     }
   }
 })