Add vee-validate to ArrayList

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Author: rak-phillip

shell/assets/translations/en-us.yaml

@@ -797,6 +797,7 @@ authConfig:
       label: Scopes
       placeholder: openid
       protip: The <code>openid</code>, <code>profile</code>, and <code>email</code> scopes are required and cannot be removed.
+      missingRequired: "The required {count, plural, =1 {scope is} other {scopes are}} missing: {scopes}"
     pkce:
       label: Enable PKCE (S256)
       tooltip: Enable Proof Key for Code Exchange (PKCE) using the S256 code challenge method. When enabled, this client must use PKCE with S256 for authorization requests.

shell/components/form/ArrayList.vue

@@ -1,18 +1,22 @@
 <script>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, toRef } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { clone } from '@shell/utils/object';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
 
 export default {
   emits: ['add', 'remove', 'update:value'],
 
-  components: { TextAreaAutoGrow, LabeledInput },
-  props:      {
+  components: {
+    TextAreaAutoGrow, LabeledInput, LabeledTooltip
+  },
+  props: {
     value: {
       type:    Array,
       default: null,
@@ -106,7 +110,17 @@ export default {
     componentTestid: {
       type:    String,
       default: 'array-list',
-    }
+    },
+
+    /**
+     * Field name for vee-validate integration. When provided, the component
+     * registers with a parent form context for schema-level validation.
+     */
+    name: {
+      type:    String,
+      default: null,
+    },
+
   },
 
   setup(props, { emit }) {
@@ -126,6 +140,17 @@ export default {
       return props.mode === _VIEW;
     });
 
+    // vee-validate integration: array-level validation via a parent form schema.
+    // Per-item validation continues to use the existing `rules` prop on
+    // LabeledInput.
+    const arrayValue = computed(() => props.value || []);
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:              toRef(props, 'name'),
+      rules:             ref([]),
+      value:             arrayValue,
+      validationMessage: ref(null),
+    });
+
     /**
      * Cleanup rows and emit input
      */
@@ -144,6 +169,8 @@ export default {
         }
       }
       emit('update:value', out);
+      veeHandleBlur(undefined, false);
+      veeValidate();
     };
 
     const lastUpdateWasFromValue = ref(false);
@@ -177,6 +204,7 @@ export default {
       queueUpdate,
       isView,
       update,
+      effectiveValidationMessage,
     };
   },
 
@@ -431,10 +459,18 @@ export default {
         </slot>
       </div>
     </div>
+    <LabeledTooltip
+      v-if="effectiveValidationMessage"
+      :value="effectiveValidationMessage"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .array-list-main-container {
+    position: relative;
+  }
+
   .title {
     margin-bottom: 10px;
   }

shell/edit/auth/oidc.vue

@@ -53,6 +53,7 @@ export default {
     const modelId = ref(null);
     const sloTypeRef = ref(null);
     const customEndpointEnabled = ref(false);
+    const requiredScopesRef = ref([]);
 
     const isAmazonCognito = computed(() => modelId.value === 'cognito');
     const isKeycloak = computed(() => modelId.value === 'keycloakoidc');
@@ -87,6 +88,17 @@ export default {
 
         endSessionEndpoint: sloEndSessionEndpointUiEnabled.value ? requiredUrlField('authConfig.oidc.endSessionEndpoint.title') : optionalField,
 
+        scope: z.preprocess(
+          (v) => (Array.isArray(v) ? v : []),
+          z.array(z.string()).refine(
+            (arr) => requiredScopesRef.value?.every((s) => arr.includes(s)),
+            (arr) => {
+              const missing = requiredScopesRef.value?.filter((s) => !arr.includes(s));
+
+              return { message: t('authConfig.oidc.scope.missingRequired', { scopes: missing?.join(', '), count: missing?.length }) };
+            }
+          )
+        ),
       })
     ));
 
@@ -109,6 +121,7 @@ export default {
       modelId,
       sloTypeRef,
       customEndpointEnabled,
+      requiredScopesRef,
       isAmazonCognito,
       isKeycloak,
       isGenericOidc,
@@ -168,7 +181,7 @@ export default {
     },
 
     validationPassed() {
-      if ( this.model.enabled && !this.editConfig ) {
+      if ( this.model?.enabled && !this.editConfig ) {
         return true;
       }
 
@@ -181,7 +194,7 @@ export default {
      * The scopes for given auth provider (model.id) have format of ['scope1 scope2 scope3']
      */
     requiredScopes() {
-      return this.model.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
+      return this.model?.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
     },
 
     isLogoutAllSupported() {
@@ -219,6 +232,13 @@ export default {
       this.customEndpointEnabled = v;
     },
 
+    requiredScopes: {
+      handler(v) {
+        this.requiredScopesRef = v;
+      },
+      immediate: true,
+    },
+
     'oidcUrls.url'() {
       this.updateEndpoints();
     },
@@ -686,6 +706,7 @@ export default {
           <div class="col span-6">
             <ArrayList
               v-model:value="oidcScope"
+              name="scope"
               :mode="mode"
               :title="t('authConfig.oidc.scope.label')"
               :value-placeholder="t('authConfig.oidc.scope.placeholder')"