From 6a7eb8c7622ddfc08da1a01fab97ba8da53c69e4 Mon Sep 17 00:00:00 2001
From: David Ma <40131297+davidma415@users.noreply.github.com>
Date: Thu, 16 Nov 2023 09:40:25 -0700
Subject: [PATCH] feat: add developer managed scopes to app reg modal (#310)

---
 src/components/ViewSpecRegistrationModal.vue | 98 ++++++++++++++++++--
 src/constants/feature-flags.ts               |  2 +-
 src/locales/ca_ES.ts                         |  1 +
 src/locales/de.ts                            |  1 +
 src/locales/en.ts                            |  1 +
 src/locales/es_ES.ts                         |  1 +
 src/locales/fr.ts                            |  1 +
 src/locales/i18n-type.d.ts                   |  1 +
 8 files changed, 95 insertions(+), 11 deletions(-)

diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
index a7e91efd..507ef7d4 100644
--- a/src/components/ViewSpecRegistrationModal.vue
+++ b/src/components/ViewSpecRegistrationModal.vue
@@ -50,12 +50,25 @@
             </div>
           </template>
           <template #name="{ row }">
-            <p
-              class="table-text"
-              :data-testid="`register-${row.name}`"
-            >
-              {{ row.name }}
-            </p>
+            <div class="name-container">
+              <p
+                class="table-text"
+                :data-testid="`register-${row.name}`"
+              >
+                {{ row.name }}
+              </p>
+              <div v-if="selectedApplication === row.id">
+                <KMultiselect
+                  v-if="availableScopes.length"
+                  v-model="selectedScopes"
+                  :label="helpText.applicationRegistration.availableScopesLabel"
+                  data-testid="analytics-service-filter"
+                  class="analytics-service-filter"
+                  :items="mappedAvailableScopes"
+                  @change="handleChangedItem"
+                />
+              </div>
+            </div>
           </template>
         </KTable>
       </div>
@@ -101,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, onMounted } from 'vue'
+import { computed, defineComponent, ref, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMachine } from '@xstate/vue'
 import { createMachine } from 'xstate'
@@ -109,6 +122,8 @@ import useToaster from '@/composables/useToaster'
 import usePortalApi from '@/hooks/usePortalApi'
 import { useI18nStore } from '@/stores'
 import getMessageFromError from '@/helpers/getMessageFromError'
+import useLDFeatureFlag from '@/hooks/useLDFeatureFlag'
+import { FeatureFlags } from '@/constants/feature-flags'
 
 export default defineComponent({
   name: 'ViewSpecRegistrationModal',
@@ -142,10 +157,26 @@ export default defineComponent({
     const helpText = useI18nStore().state.helpText
     const errorMessage = ref('')
     const selectedApplication = ref('')
+    const availableScopes = ref([])
+    const selectedScopes = ref([])
+    const useDeveloperManagedScopes = useLDFeatureFlag(FeatureFlags.DeveloperManagedScopes, false)
     const applications = ref([])
     const key = ref(0)
     const fetcherCacheKey = computed(() => key.value.toString())
 
+    const mappedAvailableScopes = computed(() => {
+      if (!availableScopes.value.length) {
+        return []
+      }
+
+      return availableScopes.value.map((scope) => {
+        return {
+          label: scope,
+          value: scope
+        }
+      })
+    })
+
     const tableHeaders = [
       { label: 'Name', key: 'name' }
     ]
@@ -248,9 +279,18 @@ export default defineComponent({
       })
     }
 
-    const submitSelection = () => {
+    const handleChangedItem = (item) => {
+      if (!item) { return }
+
+      const itemAdded = selectedScopes.value.filter(curr => curr.value === item.value)
+
+      // If a new item selected, set its `selected` state to true
+      item.selected = !!itemAdded.length
+    }
+
+    const submitSelection = async () => {
       send('CLICK_SUBMIT')
-      portalApiV2.value.service.registrationsApi.createApplicationRegistration({
+      await portalApiV2.value.service.registrationsApi.createApplicationRegistration({
         applicationId: selectedApplication.value,
         createRegistrationPayload: {
           product_version_id: props.version.id
@@ -285,7 +325,29 @@ export default defineComponent({
       searchStr.value = ''
     }
 
-    onMounted(() => {
+    watch(() => selectedApplication.value, (newSelectedApplication, oldSelectedApplication) => {
+      // We reset selectedScopes if we change applications
+      if (newSelectedApplication !== oldSelectedApplication && selectedScopes.value.length) {
+        selectedScopes.value = []
+      }
+    })
+
+    watch([() => props.product, () => props.version], async () => {
+      if (props.product && props.version && useDeveloperManagedScopes) {
+        await portalApiV2.value.service.versionsApi.getProductVersion({
+          productId: props.product.id,
+          versionId: props.version.id
+        }).then((res) => {
+          const registrationConfigs = res.data.registration_configs
+
+          if (registrationConfigs?.length && registrationConfigs[0].available_scopes) {
+            availableScopes.value = registrationConfigs[0].available_scopes
+          }
+        })
+      }
+    })
+
+    onMounted(async () => {
       if (props.initialSelectedApplication) {
         searchStr.value = props.initialSelectedApplication
       }
@@ -299,6 +361,10 @@ export default defineComponent({
       applications,
       selectedApplication,
       helpText,
+      handleChangedItem,
+      availableScopes,
+      mappedAvailableScopes,
+      selectedScopes,
       rowAttrsFn,
       fetcher,
       modalText,
@@ -328,6 +394,12 @@ export default defineComponent({
     td {
       color: var(--section_colors-body) !important;
     }
+
+    .k-input-label {
+      color: var(--section_colors-body);
+      font-weight: 400;
+      width: 100%;
+    }
   }
 
   // TODO: kui vars
@@ -339,6 +411,12 @@ export default defineComponent({
   }
  }
 
+  .name-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
 </style>
 
 <style lang="scss">
diff --git a/src/constants/feature-flags.ts b/src/constants/feature-flags.ts
index 2183694c..3e326b0c 100644
--- a/src/constants/feature-flags.ts
+++ b/src/constants/feature-flags.ts
@@ -1,3 +1,3 @@
 export enum FeatureFlags {
-  //
+  DeveloperManagedScopes = 'tdx-3460-developer-managed-scopes'
 }
diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts
index b0611b8c..fdcdc6cc 100644
--- a/src/locales/ca_ES.ts
+++ b/src/locales/ca_ES.ts
@@ -185,6 +185,7 @@ export const ca_ES: I18nType = {
     noAvailableApplications: 'Actualment no teniu cap aplicació per registrar.',
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
+    availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
     noApplications: 'Sense aplicacions',
     selectApplication: 'Seleccionar aplicació',
     createNewApplication: 'Crear nova aplicació +',
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 4efc5930..cdc5f5f0 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -185,6 +185,7 @@ export const de: I18nType = {
     noAvailableApplications: 'Aktuell haben Sie noch keine Applikationen registriert.',
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
+    availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
     noApplications: 'Keine Applikationen',
     selectApplication: 'Applikation auswählen',
     createNewApplication: 'Neue Applikation anlegen +',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 6197343d..3a5e2753 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -186,6 +186,7 @@ export const en = {
     createApplication: 'Create an Application',
     searchPlaceholder: 'Search applications',
     cancelButton: 'Cancel',
+    availableScopesLabel: 'Select scopes',
     registeredApplicationsProduct: 'The following applications are already registered to this product:',
     modalApplicationRegistrationDefault: {
       title: (serviceName: string, productVersion: string) => `Register for ${serviceName} - ${productVersion}`,
diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts
index aaddd9ac..522ef76e 100644
--- a/src/locales/es_ES.ts
+++ b/src/locales/es_ES.ts
@@ -185,6 +185,7 @@ export const es_ES: I18nType = {
     noAvailableApplications: 'Actualmente no hay aplicaciones disponibles para registrarse.',
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
+    availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
     noApplications: 'No hay aplicaciones',
     selectApplication: 'Seleccionar aplicación',
     createNewApplication: 'Crear aplicación nueva +',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index fa32c07c..da633e05 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -185,6 +185,7 @@ export const fr: I18nType = {
     noAvailableApplications: 'Vous n\'avez actuellement aucune application à enregistrer.',
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
+    availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
     noApplications: 'Aucune application',
     selectApplication: 'Sélectionner une application',
     createNewApplication: 'Créer une nouvelle application +',
diff --git a/src/locales/i18n-type.d.ts b/src/locales/i18n-type.d.ts
index bfafda03..a3ab8852 100644
--- a/src/locales/i18n-type.d.ts
+++ b/src/locales/i18n-type.d.ts
@@ -187,6 +187,7 @@ export interface I18nType {
     cancelButton: string;
     registeredApplicationsProduct: string;
     searchPlaceholder: string;
+    availableScopesLabel: string;
     modalApplicationRegistrationDefault: {
       title: (serviceName: string, productVersion: string) => string;
       buttonText: string;