fix form flickering & rerender on edit

kyma-project · Aug 23, 2024 · e86963a · e86963a
1 parent 46d7548
commit e86963a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/resources/CustomResourceDefinitions/CRCreate.js b/src/resources/CustomResourceDefinitions/CRCreate.js
@@ -8,6 +8,8 @@ import { usePrepareLayout } from 'shared/hooks/usePrepareLayout';
 import { useCustomResourceUrl } from 'resources/CustomResourceDefinitions/useCustomResourceUrl';
 
 import { createTemplate } from './templates';
+import { useTranslation } from 'react-i18next';
+import { useNotification } from 'shared/contexts/NotificationContext';
 
 function CRCreate({
   onChange,
@@ -17,6 +19,8 @@ function CRCreate({
   resource: initialCustomResource,
   ...props
 }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
   const [cr, setCr] = useState(
     cloneDeep(initialCustomResource) || createTemplate(crd),
   );
@@ -37,7 +41,7 @@ function CRCreate({
     ? nextQuery
     : currentQuery;
 
-  const currentVersion = crd.spec.versions.find(ver => ver.storage).name;
+  const currentVersion = crd.spec.versions?.find(ver => ver.storage).name;
   const namespace =
     crd.spec.scope === 'Namespaced'
       ? `/namespaces/${cr.metadata?.namespace || ''}`
@@ -66,6 +70,11 @@ function CRCreate({
       onlyYaml
       layoutNumber={layoutNumber}
       afterCreatedFn={() => {
+        notification.notifySuccess({
+          content: t('common.create-form.messages.patch-success', {
+            resourceType: crd.spec.names.kind,
+          }),
+        });
         navigate(`${customUrl(cr)}${goToLayoutQuery}`);
       }}
     />

diff --git a/src/resources/CustomResourceDefinitions/CustomResources.details.js b/src/resources/CustomResourceDefinitions/CustomResources.details.js
@@ -7,6 +7,7 @@ import { Spinner } from 'shared/components/Spinner/Spinner';
 import { ReadonlyEditorPanel } from 'shared/components/ReadonlyEditorPanel';
 import { activeNamespaceIdState } from 'state/activeNamespaceIdAtom';
 import CRCreate from 'resources/CustomResourceDefinitions/CRCreate';
+import { useCallback } from 'react';
 
 export default function CustomResource({ params }) {
   const namespace = useRecoilValue(activeNamespaceIdState);
@@ -27,6 +28,11 @@ export default function CustomResource({ params }) {
     },
   );
 
+  const CRCreateWrapper = useCallback(
+    props => <CRCreate {...props} crd={data} layoutNumber="MidColumn" />,
+    [data],
+  );
+
   if (loading) return <Spinner />;
 
   const versions = data?.spec?.versions;
@@ -61,9 +67,7 @@ export default function CustomResource({ params }) {
       resourceType={crdName}
       resourceName={resourceName}
       namespace={namespace}
-      createResourceForm={props => (
-        <CRCreate {...props} crd={data} layoutNumber="MidColumn" />
-      )}
+      createResourceForm={CRCreateWrapper}
       customComponents={[yamlPreview]}
       layoutCloseCreateUrl={params.layoutCloseCreateUrl}
       disableDelete={isModule}