chore: Migrate validationSchemasState to Jotai (#4137)

* chore: Migrate validationSchemasState to Jotai

* fix

Author: OliwiaGowor

src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx

@@ -36,6 +36,7 @@ import { ScanResult } from './ScanResult';
 import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { createPortal } from 'react-dom';
 import { K8sAPIResource } from 'types';
+import { useAtomValue } from 'jotai';
 
 export const ClusterValidation = () => {
   const { t } = useTranslation();
@@ -55,7 +56,7 @@ export const ClusterValidation = () => {
     () => new ResourceLoader(relativeUrl => fetch({ relativeUrl }), undefined),
     [fetch],
   );
-  const validationSchemas = useRecoilValue(validationSchemasState);
+  const validationSchemas = useAtomValue(validationSchemasState);
   const defaultPolicySet = usePolicySet();
 
   const { namespaces } = useAvailableNamespaces();

src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { Button, Switch } from '@ui5/webcomponents-react';
 import {
   getExtendedValidateResourceState,
@@ -15,6 +15,7 @@ import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 
 import './ResourceValidationSettings.scss';
 import { configFeaturesNames } from 'state/types';
+import { useAtomValue } from 'jotai';
 
 export default function ResourceValidationSettings() {
   const { t } = useTranslation();
@@ -33,7 +34,7 @@ export default function ResourceValidationSettings() {
       [],
   } = getExtendedValidateResourceState(validateResources);
 
-  const validationSchemas = useRecoilValue(validationSchemasState);
+  const validationSchemas = useAtomValue(validationSchemasState);
   const allOptions = useMemo(
     () =>
       validationSchemas?.policies
@@ -122,6 +123,7 @@ export default function ResourceValidationSettings() {
               title={t(
                 'settings.clusters.resourcesValidation.enabled-policies',
               )}
+              //@ts-ignore
               entries={
                 choosePolicies
                   ? policyList
@@ -176,6 +178,8 @@ export default function ResourceValidationSettings() {
                   'settings.clusters.resourcesValidation.no-policies-found',
                 ),
                 textSearchProperties: ['key', 'text'],
+                showSearchField: true,
+                allowSlashShortcut: true,
               }}
             />
           </>

…s/YamlUpload/ResourceValidationResult.js …/YamlUpload/ResourceValidationResult.tsxsrc/resources/Namespaces/YamlUpload/ResourceValidationResult.js renamed to src/resources/Namespaces/YamlUpload/ResourceValidationResult.tsx src/resources/Namespaces/YamlUpload/ResourceValidationResult.js renamed to src/resources/Namespaces/YamlUpload/ResourceValidationResult.tsx

@@ -23,8 +23,9 @@ import { validationSchemasEnabledState } from 'state/validationEnabledSchemasAto
 import { useLoadingDebounce } from 'shared/hooks/useLoadingDebounce';
 
 import { SeparatorLine } from './SeparatorLine';
+import { ValidationSchema } from 'state/validationSchemasAtom';
 
-const useNamespaceWarning = resource => {
+const useNamespaceWarning = (resource: any) => {
   const { t } = useTranslation();
   return useIsInCurrentNamespace(resource)
     ? []
@@ -38,7 +39,7 @@ const useNamespaceWarning = resource => {
       ];
 };
 
-const ValidationWarning = ({ warning }) => {
+const ValidationWarning = ({ warning }: { warning: string }) => {
   const [where, reason] = warning.split(' - ');
   return (
     <>
@@ -51,15 +52,19 @@ const ValidationWarning = ({ warning }) => {
   );
 };
 
-const ValidationWarnings = ({ resource, validationSchema }) => {
+const ValidationWarnings = ({
+  resource,
+  validationSchema,
+}: {
+  resource: any;
+  validationSchema: ValidationSchema;
+}) => {
   const { t } = useTranslation();
 
   const { debounced } = useLoadingDebounce(resource, 500);
 
   const warnings = [
-    useValidateResourceBySchema(debounced, validationSchema, {
-      base: 'https://dashboard.kyma.cloud.sap', // Workaround for jsonschema 1.5.0 - https://github.com/tdegrunt/jsonschema/issues/407
-    }),
+    useValidateResourceBySchema(debounced, validationSchema),
     useNamespaceWarning(debounced),
   ];
 
@@ -72,15 +77,15 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
         className="sap-margin-bottom-small"
       >
         <p> {t('common.headers.loading')}</p>
-        <Spinner size="Small" center={false} />
+        <Spinner size="S" center={false} />
       </MessageStrip>
     );
 
   return (
     <>
       {warnings.flat().map((warning, idx) => (
         <React.Fragment key={idx}>
-          <FlexBox alignItems={'Begin'}>
+          <FlexBox alignItems="Start">
             <ObjectStatus
               showDefaultIcon
               aria-label="Warning"
@@ -90,7 +95,11 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
                 marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-11-0_panel_content_padding` is divided by 2
               }}
             />
-            <ValidationWarning warning={warning.message} />
+            <ValidationWarning
+              warning={
+                typeof warning === 'string' ? warning : warning.message ?? ''
+              }
+            />
           </FlexBox>
           <SeparatorLine
             className="sap-margin-y-small"
@@ -105,16 +114,14 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
   );
 };
 
-export const ResourceValidationResult = ({ resource }) => {
+export const ResourceValidationResult = ({ resource }: { resource: any }) => {
   const validateResources = getExtendedValidateResourceState(
     useRecoilValue(validateResourcesState),
   );
   const validationSchemas = useAtomValue(validationSchemasEnabledState);
   const { debounced } = useLoadingDebounce(resource, 500);
   const warnings = [
-    useValidateResourceBySchema(debounced, validationSchemas, {
-      base: 'https://dashboard.kyma.cloud.sap',
-    }),
+    useValidateResourceBySchema(debounced, validationSchemas),
     useNamespaceWarning(debounced),
   ];
   const statusIcon = validateResources.isEnabled ? (
@@ -148,7 +155,7 @@ export const ResourceValidationResult = ({ resource }) => {
           </Toolbar>
         }
         accessibleName={resource?.kind + ' ' + resource?.metadata?.name}
-        accessibleRole="listitem"
+        role="listitem"
       >
         {validateResources.isEnabled && (
           <ValidationWarnings

src/shared/hooks/useValidateResourceBySchema/useValidateResourceBySchema.ts

@@ -14,7 +14,7 @@ export type Warning =
 
 export const validateResourceBySchema = (
   resource: K8sResource,
-  schema?: ValidationSchema,
+  schema: ValidationSchema,
   options?: Options,
 ) => {
   const warnings = (schema?.rules || [])
@@ -49,10 +49,12 @@ export const validateResourceBySchema = (
 export const useValidateResourceBySchema = (
   resource: K8sResource,
   validationSchema: ValidationSchema,
+  options?: Options,
 ) => {
   return useMemo(() => {
     return validateResourceBySchema(resource, validationSchema, {
       base: 'https://dashboard.kyma.cloud.sap', // Workaround for jsonschema 1.5.0 - https://github.com/tdegrunt/jsonschema/issues/407
+      ...options,
     });
-  }, [resource, validationSchema]);
+  }, [options, resource, validationSchema]);
 };

src/state/validationEnabledSchemasAtom.ts

@@ -1,6 +1,6 @@
 import { useFeature } from 'hooks/useFeature';
 import { useEffect, useMemo } from 'react';
-import { atom, useSetAtom } from 'jotai';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
 import {
   ExtendedValidateResources,
   getExtendedValidateResourceState,
@@ -9,6 +9,7 @@ import {
 import {
   emptyValidationSchema,
   getEnabledRules,
+  ValidationPolicy,
   ValidationSchema,
   validationSchemasState,
 } from './validationSchemasAtom';
@@ -70,7 +71,9 @@ export const getValidationEnabledSchemas = (
 ) => {
   const { rules, policies } = validationSchemas;
 
-  const enabledPolicies = policies.filter(policy => policySet.has(policy.name));
+  const enabledPolicies = policies.filter((policy: ValidationPolicy) =>
+    policySet.has(policy.name),
+  );
   const enabledRules = getEnabledRules(rules, enabledPolicies, policies);
 
   return {
@@ -82,7 +85,7 @@ export const getValidationEnabledSchemas = (
 export const useGetValidationEnabledSchemas = () => {
   const setSchemas = useSetAtom(validationSchemasEnabledState);
 
-  const validationSchemas = useRecoilValue(validationSchemasState);
+  const validationSchemas = useAtomValue(validationSchemasState);
   const policySet = usePolicySet();
 
   useEffect(() => {
@@ -98,7 +101,7 @@ export const useGetValidationEnabledSchemas = () => {
   }, [validationSchemas, policySet]);
 };
 
-export const validationSchemasEnabledState = atom<ValidationSchema | null>(
+export const validationSchemasEnabledState = atom<ValidationSchema>(
   emptyValidationSchema,
 );
 validationSchemasEnabledState.debugLabel = 'validationSchemasEnabledState';

src/state/validationSchemasAtom.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { authDataState } from 'state/authDataAtom';
 import { clusterState } from 'state/clusterAtom';
 import jsyaml from 'js-yaml';
-import { atom, RecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
+import { atom, useSetAtom } from 'jotai';
 import {
   permissionSetsSelector,
   PermissionSetState,
@@ -12,8 +12,9 @@ import { ConfigMapResponse, getConfigMaps } from './utils/getConfigMaps';
 import { getFetchFn } from './utils/getFetchFn';
 import { JSONSchema4 } from 'json-schema';
 import { FetchFn } from 'shared/hooks/BackendAPI/useFetch';
+import { useRecoilValue } from 'recoil';
 
-type Rule = {
+export type Rule = {
   uniqueName: string;
   messageOnFailure?: string;
   documentationUrl?: string;
@@ -43,7 +44,7 @@ type RuleReference =
       identifier: string;
     };
 
-type ValidationPolicy = {
+export type ValidationPolicy = {
   name: string;
   isEnabled: boolean;
   includes: Array<string>;
@@ -191,7 +192,7 @@ export const getEnabledRules = (
 };
 
 export const useGetValidationSchemas = async () => {
-  const setSchemas = useSetRecoilState(validationSchemasState);
+  const setSchemas = useSetAtom(validationSchemasState);
   const fetchFn = getFetchFn(useRecoilValue);
   const cluster = useRecoilValue(clusterState);
   const auth = useRecoilValue(authDataState);
@@ -221,9 +222,6 @@ export const useGetValidationSchemas = async () => {
   }, [cluster, auth, permissionSet, namespace]);
 };
 
-export const validationSchemasState: RecoilState<ValidationSchema | null> = atom<ValidationSchema | null>(
-  {
-    key: 'validationSchemasState',
-    default: emptyValidationSchema,
-  },
+export const validationSchemasState = atom<ValidationSchema | null>(
+  emptyValidationSchema,
 );