@rancher/shell 1.2.0 → 2.0.0

package/utils/kontainer.ts

@@ -0,0 +1,186 @@
+import { isArray } from '@shell/utils/array';
+import { set, get, isEmpty } from '@shell/utils/object';
+
+/**
+ * This function accepts a v3 cluster object and mutates its config field to sync values that were set outside Rancher (eg, when an imported cluster is created in its respective cloud provider).
+ * Values configured outside of rancher are not automatically propagated to the config field that the UI edits; they are reflected in the aksStatus/eksStatus/gkeStatus.upstreamSpec field.
+ * This function works in tandem with diffUpstreamSpec: the former runs when the edit form is initialized and the latter runs when the cluster is saved.
+ * @param configPrefix one of aks, eks, gke
+ * @param normanCluster v3 cluster object
+ */
+export function syncUpstreamConfig(configPrefix: string, normanCluster: {[key: string]: any}): void {
+  const configKey = `${ configPrefix }Config`;
+  const statusKey = `${ configPrefix }Status`;
+
+  const rancherConfig = normanCluster[configKey] || {};
+  const upstreamConfig = normanCluster?.[statusKey]?.upstreamSpec || {};
+
+  if (!isEmpty(upstreamConfig)) {
+    Object.keys(upstreamConfig).forEach((key) => {
+      if (isEmpty(rancherConfig[key]) && !isEmpty(upstreamConfig[key])) {
+        set(rancherConfig, key, upstreamConfig[key]);
+      }
+    });
+  }
+}
+
+/**
+ * Hosted provider (aks gke eks) edit functionality differs from other k8s resources
+ * see ui issue: https://github.com/rancher/rancher/issues/28541
+ * backend issue: https://github.com/rancher/rancher/issues/28422
+ * The below code is taken from the rancher/ui implementation https://github.com/rancher/ui/blob/master/app/models/cluster.js#L1368
+ */
+
+function isEmptyObject(object: any) {
+  return Object.keys(object).length === 0;
+}
+
+function isObject(val: any) {
+  return Object.prototype.toString.call(val) === '[object Object]';
+}
+
+function isEmptyStringOrArray(val: any) {
+  return val === null || val === undefined || val === '' || (isArray(val) && val.length === 0);
+}
+
+/**
+ * this is NOT a generic object diff.
+ * It tries to be as generic as possible but it does make certain assumptions regarding nulls and emtpy arrays/objects
+ * if upstream is null and local aks config is empty we do not count this as a change
+ * additionally null values on the RHS will be ignored as null cant be sent in this case
+ * nodeGroups, nodePools, tags, and labels are not diffed
+ * @param upstream aksStatus.upstreamSpec
+ * @param local aksConfig
+ * @returns aksConfig containing only values which differ from upstream spec, excluding null values
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function diffUpstreamSpec(upstream: any, local: any): any {
+  const delta = {};
+  const localKeys = Object.keys(local);
+
+  localKeys.forEach((key) => {
+    if (key === 'type') {
+      return;
+    }
+
+    const upstreamMatch = get(upstream, key);
+    const localMatch = get(local, key);
+
+    if (key !== 'nodeGroups' && key !== 'nodePools') {
+      try {
+        if (JSON.stringify(upstreamMatch) === JSON.stringify(localMatch)) {
+          return;
+        }
+      } catch (e) {}
+    }
+
+    if (key === 'nodeGroups' || key === 'nodePools' || key === 'tags' || key === 'labels') {
+      // Node Groups and Node Pools do not require a sync, we can safely send the entire object
+      // Tags and Labels (maps) are also included by default because what is present in the config is exactly what should be used on save and any equal maps would have been caught by the JSON isEqual comparison above
+      if (!isEmptyStringOrArray(localMatch)) {
+        // node groups need ALL data so short circut and send it all
+        set(delta, key, localMatch);
+      } else {
+        // all node groups were deleted
+        set(delta, key, []);
+      }
+
+      return;
+    }
+
+    if (isEmptyStringOrArray(upstreamMatch) || isEmptyObject(upstreamMatch)) {
+      if (isEmptyStringOrArray(localMatch) || isEmptyObject(localMatch)) {
+        if (upstreamMatch !== null && (isArray(localMatch) || isObject(localMatch))) {
+          // Empty Arrays and Empty Maps must be sent as such unless the upstream value is null, then the empty array or obj is just an init value
+          set(delta, key, localMatch);
+        }
+      } else {
+        // upstream is empty, local is not, just set
+        set(delta, key, localMatch);
+      }
+    } else {
+      if (localMatch !== null) {
+        // entry in og obj
+        if (isArray(upstreamMatch)) {
+          if (isArray(localMatch)) {
+            if (!isEmptyStringOrArray(localMatch) && localMatch.every((m: any) => isObject(m))) {
+              // You have more diffing to do
+              localMatch.forEach((match: any) => {
+                // our most likely candiate for a match is node group name, but lets check the others just incase.
+                const matchId = get(match, 'name') || get(match, 'id') || false;
+
+                if (matchId) {
+                  let lmatchIdx = 0;
+
+                  // we have soime kind of identifier to find a match in the upstream, so we can diff and insert to new array
+                  const lMatch = upstreamMatch.find((l: any, idx: number) => {
+                    const lmatchId = get(l, 'name') || get(l, 'id');
+
+                    if (lmatchId === matchId) {
+                      lmatchIdx = idx;
+
+                      return l;
+                    }
+                  });
+
+                  if (lMatch) {
+                    // we have a match in the upstream, meaning we've probably made updates to the object itself
+                    const diffedMatch = diffUpstreamSpec(lMatch, match);
+
+                    if (!isArray(get(delta, key))) {
+                      set(delta, key, [diffedMatch]);
+                    } else {
+                      const target: any[] = delta[key as keyof typeof delta];
+
+                      // diff and push into new array
+                      target.splice(lmatchIdx, 0, diffedMatch);
+                    }
+                  } else {
+                    // no match in upstream, new entry
+                    if (!isArray(get(delta, key))) {
+                      set(delta, key, [match]);
+                    } else {
+                      const target: any = delta[key as keyof typeof delta];
+
+                      target.push(match);
+                    }
+                  }
+                } else {
+                  // no match id, all we can do is dumb add
+                  if (!isArray(get(delta, key))) {
+                    set(delta, key, [match]);
+                  } else {
+                    const target: any = delta[key as keyof typeof delta];
+
+                    target.push(match);
+                  }
+                }
+              });
+            } else {
+              set(delta, key, localMatch);
+            }
+          } else {
+            set(delta, key, localMatch);
+          }
+        } else if (isObject(upstreamMatch)) {
+          if (!isEmptyStringOrArray(localMatch) && !isEmptyObject(localMatch)) {
+            if ((Object.keys(upstreamMatch) || []).length > 0) {
+              // You have more diffing to do
+              set(delta, key, diffUpstreamSpec(upstreamMatch, localMatch));
+            } else if (isEmptyObject(upstreamMatch)) {
+              // we had a map now we have an empty map
+              set(delta, key, {});
+            }
+          } else if (!isEmptyObject(upstreamMatch) && isEmptyObject(localMatch)) {
+            // we had a map now we have an empty map
+            set(delta, key, {});
+          }
+        } else { // upstreamMatch not an array or object
+          set(delta, key, localMatch);
+        }
+      }
+    }
+  });
+
+  return delta;
+}

package/utils/object.js

@@ -110,6 +110,20 @@ export function remove(obj, path) {
   return obj;
 }
 
+/**
+ * `delete` a property at the given path.
+ *
+ * This is similar to `remove` but doesn't need any fancy kube obj path splitting
+ * and doesn't use `Vue.set` (avoids reactivity)
+ */
+export function deleteProperty(obj, path) {
+  const pathAr = path.split('.');
+  const propToDelete = pathAr.pop();
+
+  // Walk down path until final prop, then delete final prop
+  delete pathAr.reduce((o, k) => o[k] || {}, obj)[propToDelete];
+}
+
 export function getter(path) {
   return function(obj) {
     return get(obj, path);
@@ -411,3 +425,13 @@ export function pickBy(obj = {}, predicate = (value, key) => false) {
 export const toDictionary = (array, callback) => Object.assign(
   {}, ...array.map((item) => ({ [item]: callback(item) }))
 );
+
+export function dropKeys(obj, keys) {
+  if ( !obj ) {
+    return;
+  }
+
+  for ( const k of keys ) {
+    delete obj[k];
+  }
+}

package/utils/pagination-utils.ts

@@ -0,0 +1,154 @@
+import { PaginationSettings } from '@shell/types/resources/settings';
+import {
+  NAMESPACE_FILTER_ALL_USER as ALL_USER,
+  NAMESPACE_FILTER_ALL as ALL,
+  NAMESPACE_FILTER_ALL_SYSTEM as ALL_SYSTEM,
+  NAMESPACE_FILTER_NAMESPACED_YES as NAMESPACED_YES,
+  NAMESPACE_FILTER_NAMESPACED_NO as NAMESPACED_NO,
+  NAMESPACE_FILTER_KINDS,
+  NAMESPACE_FILTER_NS_FULL_PREFIX,
+  NAMESPACE_FILTER_P_FULL_PREFIX,
+} from '@shell/utils/namespace-filter';
+import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
+import { sameArrayObjects } from '@shell/utils/array';
+import { isEqual } from '@shell/utils/object';
+import { STEVE_CACHE } from '@shell/store/features';
+import { getPerformanceSetting } from '@shell/utils/settings';
+
+/**
+ * Helper functions for server side pagination
+ */
+class PaginationUtils {
+  /**
+   * When a ns filter isn't one or more projects/namespaces... what are the valid values?
+   *
+   * This basically blocks 'Not in a Project'.. which would involve a projectsornamespaces param with every ns not in a project.
+   */
+  validNsProjectFilters = [ALL, ALL_SYSTEM, ALL_USER, ALL_SYSTEM, NAMESPACE_FILTER_KINDS.NAMESPACE, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACED_YES, NAMESPACED_NO];
+
+  private getSettings({ rootGetters }: any): PaginationSettings {
+    const perf = getPerformanceSetting(rootGetters);
+
+    return perf.serverPagination;
+  }
+
+  isSteveCacheEnabled({ rootGetters }: any): boolean {
+    // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
+    return rootGetters['features/get']?.(STEVE_CACHE);
+  }
+
+  /**
+   * Is pagination enabled at a global level or for a specific resource
+   */
+  isEnabled({ rootGetters }: any, enabledFor: {
+    store: string,
+    resource?: {
+      id: string,
+    }
+  }) {
+    // Cache must be enabled to support pagination api
+    if (!this.isSteveCacheEnabled({ rootGetters })) {
+      return false;
+    }
+
+    const settings = this.getSettings({ rootGetters });
+
+    // No setting, not enabled
+    if (!settings?.enabled) {
+      return false;
+    }
+
+    // Missing required params, not enabled
+    if (!enabledFor) {
+      return false;
+    }
+
+    const storeSettings = settings.stores?.[enabledFor.store];
+
+    // No pagination setting for target store, not enabled
+    if (!storeSettings) {
+      return false;
+    }
+
+    // Not interested in a resource, so just top level settings are checked
+    if (!enabledFor.resource) {
+      return true;
+    }
+
+    // Store says all resources are enabled
+    if (storeSettings.resources.enableAll) {
+      return true;
+    }
+
+    // given a resource... but no id... invalid
+    if (!enabledFor.resource.id) {
+      return false;
+    }
+
+    // Store says only some (those that have pagination columns not from schema and no custom list)
+    const isGeneric =
+      !rootGetters['type-map/configuredHeaders'](enabledFor.resource.id) &&
+      !rootGetters['type-map/configuredPaginationHeaders'](enabledFor.resource.id) &&
+      !rootGetters['type-map/hasCustomList'](enabledFor.resource.id);
+
+    if (storeSettings.resources.enableSome.generic && isGeneric) {
+      return true;
+    }
+
+    if (storeSettings.resources.enableSome.enabled.includes(enabledFor.resource.id)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  validateNsProjectFilters(nsProjectFilters: string[]) {
+    return nsProjectFilters?.every((f) => this.validateNsProjectFilter(f));
+  }
+
+  validateNsProjectFilter(nsProjectFilter: string) {
+    if (nsProjectFilter.startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX) || nsProjectFilter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
+      return true;
+    }
+
+    return this.validNsProjectFilters.includes(nsProjectFilter);
+  }
+
+  paginationFilterEqual(a: PaginationParam, b: PaginationParam): boolean {
+    if (a.param !== b.param || a.equals !== b.equals) {
+      return false;
+    }
+
+    return sameArrayObjects(a.fields, b.fields, true);
+  }
+
+  paginationFiltersEqual(a: PaginationParam[], b: PaginationParam[]): boolean {
+    if (!!a && a?.length !== b?.length) {
+      return false;
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (!this.paginationFilterEqual(a[i], b[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  paginationEqual(a?: PaginationArgs, b?: PaginationArgs): boolean {
+    const {
+      filters: aFilter = [], sort: aSort = [], projectsOrNamespaces: aPN = [], ...aPrimitiveTypes
+    } = a || {};
+    const {
+      filters: bFilter = [], sort: bSort = [], projectsOrNamespaces: bPN = [], ...bPrimitiveTypes
+    } = b || {};
+
+    return isEqual(aPrimitiveTypes, bPrimitiveTypes) &&
+      this.paginationFiltersEqual(aFilter, bFilter) &&
+      this.paginationFiltersEqual(aPN, bPN) &&
+      sameArrayObjects<PaginationSort>(aSort, bSort, true);
+  }
+}
+
+export default new PaginationUtils();

package/utils/pod-security-admission.ts

@@ -1,7 +1,7 @@
 import { reduce, filter, keys } from 'lodash';
 import { PSALabelPrefix, PSALabelsNamespaces } from '@shell/config/pod-security-admission';
 import { camelToTitle } from '@shell/utils/string';
-import { PSA } from '@shell/types/pod-security-admission';
+import { PSA } from '@shell/types/resources/pod-security-admission';
 
 /**
  * Return PSA labels present in the resource

package/utils/router.js

@@ -25,3 +25,89 @@ export function queryParamsFor(current, qp, defaults = {}) {
 
   return query;
 }
+
+export function getClusterFromRoute(to) {
+  let cluster = to.params?.cluster;
+
+  if (!cluster) {
+    cluster = findMeta(to, 'cluster');
+  }
+
+  return cluster;
+}
+
+export function getProductFromRoute(to) {
+  let product = to.params?.product;
+
+  if ( !product ) {
+    const match = to.name?.match(/^c-cluster-([^-]+)/);
+
+    if ( match ) {
+      product = match[1];
+    }
+  }
+
+  // If still no product, see if the route indicates the product via route metadata
+  if (!product) {
+    product = findMeta(to, 'product');
+  }
+
+  return product;
+}
+
+export const getPackageFromRoute = (route) => {
+  if (!route?.meta) {
+    return;
+  }
+  // Sometimes meta is an array... sometimes not
+  const arraySafe = Array.isArray(route.meta) ? route.meta : [route.meta];
+
+  return arraySafe.find((m) => !!m.pkg)?.pkg;
+};
+
+export const getResourceFromRoute = (to) => {
+  let resource = to.params?.resource;
+
+  if (!resource) {
+    resource = findMeta(to, 'resource');
+  }
+
+  return resource;
+};
+
+/**
+ * Given a route it will look through the matching parent routes to see if any match the fn (predicate) criteria
+ *
+ * @param {*} to a VueRouter Route object
+ * @param {*} fn fn is a predicate which is passed a matched route. It will return true to indicate there was a matching route and false otherwise
+ * @returns true if a matching route was found, false otherwise
+ */
+export const routeMatched = (to, fn) => {
+  const matched = to?.matched || [];
+
+  return !!matched.find(fn);
+};
+
+/**
+ * Checks to see if the route requires authentication by taking a look at the route and it's parents 'meta' to see if it
+ * contains { requiresAuthentication: true }
+ * @param {*} to a VueRouter Route object
+ * @returns true if the route requires authentication, false otherwise
+ */
+export const routeRequiresAuthentication = (to) => {
+  return routeMatched(to, (matched) => matched.meta?.requiresAuthentication);
+};
+
+function findMeta(route, key) {
+  if (route?.meta) {
+    const meta = Array.isArray(route.meta) ? route.meta : [route.meta];
+
+    for (let i = 0; i < meta.length; i++) {
+      if (meta[i][key]) {
+        return meta[i][key];
+      }
+    }
+  }
+
+  return undefined;
+}

package/utils/settings.ts

@@ -1,6 +1,8 @@
 import { MANAGEMENT } from '@shell/config/types';
 import { Store } from 'vuex';
 import { DEFAULT_PERF_SETTING, PerfSettings, SETTING } from '@shell/config/settings';
+import { pluralize } from '@shell/utils/string';
+import { _MULTI } from '@shell/plugins/dashboard-store/actions';
 
 export const fetchOrCreateSetting = async(store: Store<any>, id: string, val: string, save = true): Promise<any> => {
   let setting;
@@ -34,6 +36,50 @@ export const fetchSetting = async(store: Store<any>, id: string): Promise<any> =
   return setting;
 };
 
+/**
+ * Carefully fetch mgmt settings
+ *
+ * Ensures that
+ * - Concurrent calls to this function will only result in a single http request
+ * - Subsequent calls, when either logged in or logged out, will only result in a single http request
+ * - Logged out call will fetch partial settings, after logging in another call will fetch all settings
+ *
+ * Will be used in many places, particularly multiple times when loading the dashboard
+ *
+ * Note - We need to specify the url for cases where it can't be determined (i.e. we haven't fetched schemas)
+ */
+export const fetchInitialSettings = async(store: Store<any>): Promise<any> => {
+  const generation = store.getters['management/generation'](MANAGEMENT.SETTING);
+  // We use this as it copies the previous mechanism this was based on (in findAll)
+  // There is the getter `auth/loggedInAs` (which is set given `fromHeader`), but that's initialised after the first call to here (see `authenticated`)
+  const header = store.getters['auth/fromHeader'];
+  const authed = `${ header }` === 'true' || `${ header }` === 'none';
+
+  if (authed) {
+    // We're authed, we will always get the full list
+    return await store.dispatch('management/findAll', {
+      type: MANAGEMENT.SETTING,
+      opt:  { url: `/v1/${ pluralize(MANAGEMENT.SETTING) }` }
+    } );
+  }
+
+  if (!generation) {
+    // We're not authed, and haven't previously fetched settings (no generation)
+    // Fetch settings, put them in the store, but don't say we've got all yet (so subsequent calls will run)
+    return await store.dispatch('management/findAll', {
+      type: MANAGEMENT.SETTING,
+      opt:  {
+        url:                  `/v1/${ pluralize(MANAGEMENT.SETTING) }`,
+        load:                 _MULTI,
+        redirectUnauthorized: false
+      }
+    });
+  }
+
+  // We're not authed, but have a previous value, no need to make a http request to fetch again
+  return store.getters['management/all'](MANAGEMENT.SETTING);
+};
+
 export const setSetting = async(store: Store<any>, id: string, val: string): Promise<any> => {
   const setting = await fetchOrCreateSetting(store, id, val, false);
 

package/utils/time.js

@@ -10,7 +10,7 @@ export function diffFrom(value, from, t) {
   const now = day();
 
   from = from || now;
-  const diff = value.diff(now, 'seconds');
+  const diff = value.diff(from, 'seconds');
 
   let absDiff = Math.abs(diff);
 
@@ -34,6 +34,7 @@ export function diffFrom(value, from, t) {
     diff,
     absDiff,
     label,
+    // i18n-uses unit.day, unit.hour, unit.min, unit.sec
     unitsKey: `unit.${ LABELS[i] }`,
     units:    LABELS[i],
     next,

package/utils/unit-tests/ChildRenderingRouterLinkStub.ts

@@ -0,0 +1,36 @@
+import { RouterLinkStub } from '@vue/test-utils';
+import { NavigationFailure, Route } from 'vue-router';
+
+/**
+ * See {@link RouterLinkSlotArgument} in vue-router
+ */
+export interface RouterLinkSlotArgumentOptional {
+    href?: string;
+    route?: Route;
+    navigate?: (e?: MouseEvent) => Promise<undefined | NavigationFailure>;
+    isActive?: boolean;
+    isExactActive?: boolean;
+}
+
+/**
+ * This is a workaround because VueUtils RouterLinkStub doesn't currently support the slot api.
+ *
+ * See @link https://github.com/vuejs/vue-test-utils/issues/1803#issuecomment-940884170
+ *
+ * @param slotProps Provide arguments that you want passed to the child rendered by router-link
+ * @returns A stub
+ */
+export function createChildRenderingRouterLinkStub(slotProps?: RouterLinkSlotArgumentOptional): typeof RouterLinkStub | any {
+  return {
+    ...RouterLinkStub,
+    render() {
+      return this.$scopedSlots.default({
+        href:          slotProps?.href || '',
+        route:         slotProps?.route || ({} as any),
+        navigate:      slotProps?.navigate || (() => {}),
+        isActive:      slotProps?.isActive || false,
+        isExactActive: slotProps?.isExactActive || false,
+      });
+    }
+  };
+}

package/utils/url.ts

@@ -2,7 +2,7 @@ type UriField = 'source' | 'protocol' | 'authority' | 'userInfo' | 'user' | 'pas
 type UriFields = {
   [key in UriField]: string; // eslint-disable-line no-unused-vars
 }
-type QueryParams = {
+export type QueryParams = {
   [key: string]: string
 }
 

package/utils/validators/formRules/__tests__/index.test.ts

@@ -43,21 +43,87 @@ describe('formRules', () => {
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
-  it('"isHttps" : returns undefined when valid https url value is supplied', () => {
+  it('"https" : returns undefined when valid https url value is supplied', () => {
     const testValue = 'https://url.com';
-    const formRuleResult = formRules.isHttps('server-url')(testValue);
+    const formRuleResult = formRules.https(testValue);
 
     expect(formRuleResult).toBeUndefined();
   });
 
-  it('"isHttps" : returns correct message when http url value is supplied', () => {
+  it('"https" : returns correct message when http url value is supplied', () => {
     const testValue = 'http://url.com';
-    const formRuleResult = formRules.isHttps('server-url')(testValue);
+    const formRuleResult = formRules.https(testValue);
     const expectedResult = JSON.stringify({ message: 'validation.setting.serverUrl.https' });
 
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
+  describe('localhost', () => {
+    const message = JSON.stringify({ message: 'validation.setting.serverUrl.localhost' });
+    const testCases = [
+      ['http://LOCALhosT:8005', message],
+      ['http://localhost:8005', message],
+      ['https://localhost:8005', message],
+      ['localhost', message],
+      ['http://127.0.0.1', message],
+      ['https://127.0.0.1', message],
+      ['127.0.0.1', message],
+      ['https://test.com', undefined],
+      ['https://test.com/localhost', undefined],
+      [undefined, undefined]
+    ];
+
+    it.each(testCases)(
+      'should return undefined or correct message based on the provided url',
+      (url, expected) => {
+        const formRuleResult = formRules.localhost(url);
+
+        expect(formRuleResult).toStrictEqual(expected);
+      }
+    );
+  });
+
+  describe('trailingForwardSlash', () => {
+    const message = JSON.stringify({ message: 'validation.setting.serverUrl.trailingForwardSlash' });
+    const testCases = [
+      ['https://test.com', undefined],
+      ['https://test.com/', message],
+      ['https://', undefined],
+      ['/', undefined],
+      [undefined, undefined]
+    ];
+
+    it.each(testCases)(
+      'should return undefined or correct message based on the provided url',
+      (url, expected) => {
+        const formRuleResult = formRules.trailingForwardSlash(url);
+
+        expect(formRuleResult).toStrictEqual(expected);
+      }
+    );
+  });
+
+  describe('alphanumeric', () => {
+    const message = JSON.stringify({ message: 'validation.alphanumeric', key: 'testDisplayKey' });
+    const testCases = [
+      ['', undefined],
+      ['aaaAAAA111', undefined],
+      ['aaaAAAA111//', message],
+      ['/', message],
+      ['+1', message],
+      [undefined, undefined]
+    ];
+
+    it.each(testCases)(
+      'should return undefined or correct message based on the provided url',
+      (val, expected) => {
+        const formRuleResult = formRules.alphanumeric(val);
+
+        expect(formRuleResult).toStrictEqual(expected);
+      }
+    );
+  });
+
   it('"interval" : returns undefined when valid hour interval value is supplied', () => {
     const testValue = '5h';
     const formRuleResult = formRules.interval(testValue);