fix: Busola is flickering when ObjectPage is opened (kyma-project#3498)

* fix: fix flickering on column layout * fix: remove unused * fix: replace DynamicPage with ObjectPage * fix: fix key error * fix: banner height and remove unused * fix: initial render flicker * fix: change to DynamicPage * hotfix * Replace props spread * hotfix * fix: shadow & unused * fix: shadow & sticky tabs * fix: hide button everywhere --------- Co-authored-by: mrCherry97 <[email protected]> Co-authored-by: akucharska <[email protected]>
OliwiaGowor · Dec 13, 2024 · 5b7fd61 · 5b7fd61
1 parent 3517ff7
commit 5b7fd61
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 165 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -39,6 +39,7 @@ import { useAfterInitHook } from 'state/useAfterInitHook';
 import useSidebarCondensed from 'sidebar/useSidebarCondensed';
 import { useGetValidationEnabledSchemas } from 'state/validationEnabledSchemasAtom';
 import { useGetKymaResources } from 'state/kymaResourcesAtom';
+import { Spinner } from 'shared/components/Spinner/Spinner';
 
 export default function App() {
   const language = useRecoilValue(languageAtom);
@@ -59,7 +60,7 @@ export default function App() {
   useResourceSchemas();
   useSidebarCondensed();
 
-  useAuthHandler();
+  const { isLoading } = useAuthHandler();
   useGetConfiguration();
   useGetExtensions();
   useGetExtensibilitySchemas();
@@ -75,6 +76,10 @@ export default function App() {
   useAfterInitHook(kubeconfigIdState);
   useGetKymaResources();
 
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   return (
     <div id="html-wrap">
       <Header />

diff --git a/src/components/Extensibility/components-form/GenericList.js b/src/components/Extensibility/components-form/GenericList.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { PluginStack, useUIStore } from '@ui-schema/ui-schema';
 import { Button } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';

diff --git a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss
@@ -3,6 +3,11 @@
   margin-left: 0.25rem !important;
   margin-right: 0.25rem !important;
 }
+
+.banner-carousel {
+  height: fit-content;
+}
+
 .feature-card {
   position: relative;
   display: flex;

diff --git a/src/components/HelmReleases/HelmReleasesList.js b/src/components/HelmReleases/HelmReleasesList.js
@@ -72,36 +72,34 @@ function HelmReleasesList() {
   ];
 
   return (
-    <>
-      <ResourcesList
-        resources={entries}
-        customColumns={customColumns}
-        serverDataLoading={loading}
-        serverDataError={error}
-        allowSlashShortcut
-        hasDetailsView
-        enableColumnLayout
-        customUrl={resourceUrl}
-        resourceUrl={dataUrl}
-        resourceType="HelmReleases"
-        sortBy={{
-          name: (a, b) => a.releaseName.localeCompare(b.releaseName),
-        }}
-        searchSettings={{
-          textSearchProperties: [
-            'recentRelease.chart.metadata.name',
-            'releaseName',
-          ],
-        }}
-        emptyListProps={{
-          subtitleText: ResourceDescription,
-          url: docsURL,
-          showButton: false,
-        }}
-        readOnly
-        description={ResourceDescription}
-      />
-    </>
+    <ResourcesList
+      resources={entries}
+      customColumns={customColumns}
+      serverDataLoading={loading}
+      serverDataError={error}
+      allowSlashShortcut
+      hasDetailsView
+      enableColumnLayout
+      customUrl={resourceUrl}
+      resourceUrl={dataUrl}
+      resourceType="HelmReleases"
+      sortBy={{
+        name: (a, b) => a.releaseName.localeCompare(b.releaseName),
+      }}
+      searchSettings={{
+        textSearchProperties: [
+          'recentRelease.chart.metadata.name',
+          'releaseName',
+        ],
+      }}
+      emptyListProps={{
+        subtitleText: ResourceDescription,
+        url: docsURL,
+        showButton: false,
+      }}
+      readOnly
+      description={ResourceDescription}
+    />
   );
 }
 

diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -421,7 +421,7 @@ export default function KymaModulesList({
       layoutNumber="StartColumn"
       windowTitle={t('kyma-modules.title')}
       headerContent={
-        <DynamicPageHeader>
+        <DynamicPageHeader className="no-shadow">
           <FlexBox alignItems="Center">
             <Label showColon>{t('kyma-modules.release-channel')}</Label>
             <Text renderWhitespace={true}> </Text>

diff --git a/src/header/NamespaceDropdown/NamespaceDropdown.tsx b/src/header/NamespaceDropdown/NamespaceDropdown.tsx
@@ -11,7 +11,7 @@ export function NamespaceDropdown() {
 
   let namespaces = [];
 
-  if (allNamespaces.length > 0) {
+  if (allNamespaces && allNamespaces.length > 0) {
     namespaces.push(
       <ComboBoxItem
         text={t('navigation.all-namespaces')}
@@ -21,7 +21,7 @@ export function NamespaceDropdown() {
     );
   }
 
-  allNamespaces.map(ns =>
+  allNamespaces?.map(ns =>
     namespaces.push(<ComboBoxItem text={ns} key={ns} data-key={ns} />),
   );
 

diff --git a/src/hooks/useAvailableNamespaces.ts b/src/hooks/useAvailableNamespaces.ts
@@ -28,7 +28,7 @@ export function useAvailableNamespaces() {
 
   useEffect(() => {
     if (error) {
-      setNamespaces([]);
+      setNamespaces(null);
       return;
     }
     const filteredNamespaces = allNamespaces

diff --git a/src/resources/createResourceRoutes.js b/src/resources/createResourceRoutes.js
@@ -84,17 +84,31 @@ const ColumnWrapper = ({
   });
 
   const elementListProps = usePrepareListProps({
-    ...props,
+    resourceCustomType: props.resourceCustomType,
+    resourceType: props.resourceType,
+    resourceI18Key: props.resourceI18Key,
+    apiGroup: props.apiGroup,
+    apiVersion: props.apiVersion,
+    hasDetailsView: props.hasDetailsView,
   });
 
   const elementDetailsProps = usePrepareDetailsProps({
-    ...props,
+    resourceCustomType: props.resourceCustomType,
+    resourceType: props.resourceType,
+    resourceI18Key: props.resourceI18Key,
+    apiGroup: props.apiGroup,
+    apiVersion: props.apiVersion,
     resourceName: layoutState?.midColumn?.resourceName ?? resourceName,
     namespaceId: layoutState?.midColumn?.namespaceId ?? namespaceId,
+    showYamlTab: props.showYamlTab,
   });
 
   const elementCreateProps = usePrepareCreateProps({
-    ...props,
+    resourceCustomType: props.resourceCustomType,
+    resourceType: props.resourceType,
+    resourceTypeForTitle: props.resourceType,
+    apiGroup: props.apiGroup,
+    apiVersion: props.apiVersion,
   });
 
   const listComponent = React.cloneElement(list, {
@@ -122,16 +136,13 @@ const ColumnWrapper = ({
     detailsMidColumn = detailsComponent;
   }
 
-  const { schema, loading } = useGetSchema({
+  const { schema } = useGetSchema({
     resource: {
       group: props?.apiGroup,
       version: props.apiVersion,
       kind: props?.resourceType.slice(0, -1),
     },
   });
-  if (loading) {
-    return null;
-  }
 
   const createMidColumn = (
     <ResourceCreate
@@ -156,7 +167,7 @@ const ColumnWrapper = ({
   );
 
   return (
-    <SchemaContext.Provider value={schema}>
+    <SchemaContext.Provider value={schema || null}>
       <FlexibleColumnLayout
         style={{ height: '100%' }}
         layout={layoutState?.layout || 'OneColumn'}