Merge pull request #736 from aziontech/dev

DEPLOY 2024.02.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "private": true,
   "type": "module",
   "repository": {
@@ -22,6 +22,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@feedback-fish/vue": "^1.0.1",
     "@guolao/vue-monaco-editor": "^1.3.0",
     "@vee-validate/yup": "^4.11.1",
     "@vueuse/core": "^10.7.0",
@@ -46,7 +47,6 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/typography": "^0.5.10",
-    "caniuse-lite": "^1.0.30001584",
     "@types/c3": "^0.7.11",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
@@ -55,6 +55,7 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.14",
+    "caniuse-lite": "^1.0.30001584",
     "cypress": "13.5.0",
     "eslint": "^8.45.0",
     "eslint-plugin-cypress": "^2.13.3",

src/router/routes/password-routes/index.js

@@ -6,11 +6,12 @@ export const passwordRoutes = {
   name: 'new-password',
   children: [
     {
-      path: 'new/:uidb64/:token',
+      path: 'new/:uidb64/:token?',
       name: 'reset-password',
       component: () => import('@views/NewPassword/NewPasswordView.vue'),
       props: {
-        resetPasswordService: AuthServices.resetPasswordService
+        resetPasswordService: AuthServices.resetPasswordService,
+        passwordSettingService: AuthServices.passwordSettingService
       },
       meta: {
         isPublic: true,

src/services/auth-services/index.js

@@ -5,6 +5,7 @@ import { refreshAuthenticationService } from './refresh-authentication-service'
 import { logoutService } from './logout-service'
 import { sendResetPasswordEmailService } from './send-reset-password-email-service'
 import { resetPasswordService } from './reset-password-service'
+import { passwordSettingService } from './password-setting-service'
 
 export {
   loginService,
@@ -13,5 +14,6 @@ export {
   switchAccountService,
   logoutService,
   sendResetPasswordEmailService,
-  resetPasswordService
+  resetPasswordService,
+  passwordSettingService
 }

src/services/auth-services/make-password-setting-service-base-url.js

@@ -0,0 +1,4 @@
+export const makePasswordSettingServiceBaseUrl = () => {
+  const version = 'v4'
+  return `${version}/iam/user/password`
+}

src/services/auth-services/password-setting-service.js

@@ -0,0 +1,52 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makePasswordSettingServiceBaseUrl } from './make-password-setting-service-base-url'
+
+export const passwordSettingService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: makePasswordSettingServiceBaseUrl(),
+    method: 'POST',
+    body: payload
+  })
+  return parseHttpResponse(httpResponse)
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @param {String} httpResponse.statusCode - The HTTP status code.
+ * @returns {Object} The result message based on the status code.
+ * @throws {Error} If there is an error with the response.
+ */
+
+const parseHttpResponse = (httpResponse) => {
+  switch (httpResponse.statusCode) {
+    case 200:
+      return httpResponse.body
+    case 400:
+      throw new Error(extractApiError(httpResponse.body, 'non_field_errors')).message
+    case 403:
+      throw new Errors.PermissionError().message
+    case 404:
+      throw new Error(extractApiError(httpResponse.body, 'detail')).message
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (errorSchema, key) => {
+  const errorMessage = errorSchema[key] || 'Unexpected error.'
+
+  if (errorMessage === 'Not found.') {
+    return 'Token not found.'
+  }
+
+  return errorMessage
+}

src/templates/dialog-unsaved-block/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, ref } from 'vue'
+  import { computed, ref, watch, inject } from 'vue'
   import PrimeDialog from 'primevue/dialog'
   import PrimeButton from 'primevue/button'
   import { onBeforeRouteLeave, useRouter } from 'vue-router'
@@ -14,14 +14,25 @@
     },
     blockRedirectUnsaved: {
       type: Boolean
+    },
+    isTabs: {
+      type: Boolean,
+      default: false
     }
   })
 
   const router = useRouter()
+  const currentRouter = router.currentRoute.value.name
   const showDialog = ref(props.visible)
-  const redirectToUnsaved = ref('home')
+  const redirectToUnsaved = ref(currentRouter)
   const unsavedDisabled = ref(false)
 
+  let changeTab, tabHasUpdate, formHasUpdated, visibleOnSaved
+
+  if (props.isTabs) {
+    ({ changeTab, tabHasUpdate, formHasUpdated, visibleOnSaved } = inject('unsaved'))
+  }
+
   const visibleDialog = computed({
     get: () => showDialog.value,
     set: (value) => {
@@ -35,18 +46,25 @@
   }
 
   const onLeavePage = () => {
-    unsavedDisabled.value = true
-    openDialogUnsaved(false)
-    if (!redirectToUnsaved.value) {
-      router.go(-1)
-      return
+    if (props.isTabs && (redirectToUnsaved.value === currentRouter)) {
+      visibleOnSaved.value = true
+      changeTab(tabHasUpdate.nextTab)
+      openDialogUnsaved(false)
+    } else {
+      unsavedDisabled.value = true
+      openDialogUnsaved(false)
+      if (!redirectToUnsaved.value) {
+        router.go(-1)
+        return
+      }
+  
+      router.push({ name: redirectToUnsaved.value })
     }
-
-    router.push({ name: redirectToUnsaved.value })
   }
 
   const onKeepEditing = () => {
     openDialogUnsaved(false)
+    visibleOnSaved.value = false
   }
 
   onBeforeRouteLeave((to, from, next) => {
@@ -57,6 +75,14 @@
     }
     return next()
   })
+
+  watch(tabHasUpdate, () => {
+    if (formHasUpdated.value) {
+      visibleOnSaved.value = true
+      openDialogUnsaved(true)
+      changeTab(tabHasUpdate.oldTab)
+    }
+  })
 </script>
 
 <template>

src/templates/edit-form-block/index.vue

@@ -2,7 +2,7 @@
   import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
   import { useToast } from 'primevue/usetoast'
   import { useForm, useIsFormDirty } from 'vee-validate'
-  import { computed, ref } from 'vue'
+  import { computed, ref, watch, inject } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   defineOptions({ name: 'edit-form-block' })
@@ -44,11 +44,23 @@
     validationSchema: props.schema
   })
 
+  let formHasUpdated, visibleOnSaved
+
+  if (props.isTabs) {
+    ({ formHasUpdated, visibleOnSaved } = inject('unsaved'))
+  }
+
+  const isDirty = useIsFormDirty()
+
   const formHasChanges = computed(() => {
-    const isDirty = useIsFormDirty()
     return blockViewRedirection.value && isDirty.value
   })
 
+  watch(formHasChanges, () => {
+    formHasUpdated.value = formHasChanges
+    visibleOnSaved.value = false
+  })
+
   const goBackToList = () => {
     if (props.updatedRedirect) {
       router.push({ name: props.updatedRedirect })
@@ -115,7 +127,7 @@
     </form>
   </div>
 
-  <DialogUnsavedBlock :blockRedirectUnsaved="formHasChanges" />
+  <DialogUnsavedBlock :blockRedirectUnsaved="formHasChanges" :isTabs="isTabs" />
   <slot
     name="action-bar"
     :onSubmit="onSubmit"

src/templates/form-fields-inputs/fieldSwitch.vue

@@ -28,7 +28,7 @@
   />
   <label
     :for="inputName"
-    class="flex flex-col items-start gap-1"
+    class="flex flex-col text-sm items-start gap-1"
   >
     <span class="text-color text-sm font-normal leading-5">{{ props.label }} </span>
     <span

src/templates/list-table-block/no-header.vue

@@ -107,7 +107,7 @@
             </div>
           </template>
           <template #body="{ data: rowData }">
-            <div class="flex justify-end">
+            <div class="flex justify-end" v-if="showActions">
               <PrimeMenu
                 ref="menu"
                 id="overlay_menu"
@@ -259,6 +259,7 @@
 
   const MINIMUN_OF_ITEMS_PER_PAGE = 10
 
+  const showActions = ref(true)
   const selectedId = ref(null)
   const filters = ref({ global: { value: '', matchMode: FilterMatchMode.CONTAINS } })
   const isLoading = ref(false)
@@ -285,20 +286,21 @@
   })
 
   const actionOptions = (showAuthorize) => {
-    const actionOptions = [
+    const actionOptions = props.deleteService? [
       {
         label: 'Delete',
         icon: 'pi pi-fw pi-trash',
         command: () => openDeleteDialog()
       }
-    ]
+    ] : []
     if (props.authorizeNode && showAuthorize !== 'Authorized') {
       actionOptions.push({
         label: 'Authorize',
         icon: 'pi pi-lock-open',
         command: () => authorizeEdgeNode()
       })
     }
+    showActions.value = actionOptions.length > 0
     return actionOptions
   }
 

src/templates/navbar-block/feedback-fish.vue

@@ -0,0 +1,37 @@
+<template>
+  <FeedbackFish :projectId="projectId" />
+
+  <PrimeButton
+    :label="currentLabel"
+    data-feedback-fish
+    :data-feedback-fish-userid="user.email"
+    :pt="{
+      label: { class: 'text-white' },
+      icon: { class: 'text-white' }
+    }"
+    icon="pi pi-flag"
+    size="small"
+    class="text-white border-header bg-header hover:bg-header-button-hover"
+    v-tooltip.bottom="{ value: 'Feedback', showDelay: 200 }"
+  />
+</template>
+
+<script setup>
+  import { computed, inject } from 'vue'
+  import { FeedbackFish } from '@feedback-fish/vue'
+  import { useAccountStore } from '@/stores/account'
+  import PrimeButton from 'primevue/button'
+
+  const projectId = '2566aa41e7e334'
+
+  const SCREEN_BREAKPOINT_MD = 768
+  const currentWidth = inject('currentWidth')
+  const user = useAccountStore().accountData
+
+  const currentLabel = computed(() => {
+    if (currentWidth.value > SCREEN_BREAKPOINT_MD) {
+      return 'Feedback'
+    }
+    return ''
+  })
+</script>

src/templates/navbar-block/index.vue

@@ -29,6 +29,7 @@
       <div class="flex gap-2 items-center ml-auto">
         <Create />
         <Help />
+        <FeedbackFish />
         <ProfileBlock />
       </div>
     </div>
@@ -50,6 +51,7 @@
   import AzionMobileLogo from '@assets/svg/mobile-logo'
   import SidebarBlock from '@templates/sidebar-block'
   import Create from './create'
+  import FeedbackFish from './feedback-fish'
   import Help from './help'
   import SwitchAccount from './switch-account'
   import ProfileBlock from '@templates/profile-block'

src/templates/profile-block/index.vue

@@ -199,6 +199,7 @@
 <script setup>
   import { ref, computed, inject, watch } from 'vue'
   import { useAccountStore } from '@/stores/account'
+  import { getEnvironmentFromUrl } from '@/helpers'
 
   import Sidebar from 'primevue/sidebar'
   import Avatar from 'primevue/avatar'
@@ -227,8 +228,9 @@
     {
       label: 'Billing & Subscriptions',
       command: () => {
-        let billingLink = 'https://manager.azion.com/billing-subscriptions/payment-methods'
-        if (import.meta.env.DEV) {
+        const environment = getEnvironmentFromUrl(window.location.href)
+        let billingLink = 'https://manager.azion.com/billing-subscriptions/bills'
+        if (environment === 'stage') {
           billingLink = 'https://stage-manager.azion.com/billing-subscriptions/bills'
         }
         window.open(billingLink, '_blank')