fix: Console errors in busola (#4204)

* fix: console errors

* fix: container logs

* fix: duplicate keys

* fix: test issues

* fix: correctly set initialResource

* fix: test flakiness

* fix: test flakiness

Author: chriskari

src/command-pallette/CommandPalletteUI/components/components.tsx

@@ -110,8 +110,8 @@ export function CommandPalletteHelp({
       </Title>
       <br className="help-divider" />
       <div className="help-text">
-        {helpEntries.navigation.map(({ name, aliases }) => (
-          <div key={name}>
+        {helpEntries.navigation.map(({ name, aliases }, idx) => (
+          <div key={`${name}-${idx}`}>
             <p className="help-text__name">{name}</p>
             <pre className="key">
               {aliases?.join(', ') || EMPTY_TEXT_PLACEHOLDER}

src/components/App/ExtensibilityRoutes.jsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import pluralize from 'pluralize';
 import i18next from 'i18next';
-import { Route, useParams } from 'react-router';
+import { Route, useParams, useSearchParams } from 'react-router';
 import { useAtomValue } from 'jotai';
 import { FlexibleColumnLayout } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,12 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
 
   const { t } = useTranslation();
 
-  const { namespaceId, resourceName } = useParams();
+  const { namespaceId: rawNamespaceId, resourceName } = useParams();
+  const [searchParams] = useSearchParams();
+  const namespaceId =
+    rawNamespaceId === '-all-'
+      ? searchParams.get('resourceNamespace')
+      : rawNamespaceId;
 
   const defaultColumn = resourceName ? 'details' : 'list';
 
@@ -127,7 +132,7 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
   );
 };
 
-export const createExtensibilityRoutes = (extension, language, ...props) => {
+export const createExtensibilityRoutes = (extension, language) => {
   const urlPath =
     extension?.general?.urlPath ||
     pluralize(extension?.general?.resource?.kind?.toLowerCase() || '');

src/components/BusolaExtensions/BusolaExtensionDetails.jsx

@@ -43,7 +43,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
   const updateResourceMutation = useUpdate(resourceUrl);
   const notification = useNotification();
 
-  if (!name) {
+  if (!name || !namespace) {
     return null;
   }
 

src/components/CustomResources/CustomResources.jsx

@@ -22,6 +22,11 @@ export function CustomResources({
   const name = names.plural;
   const customUrl = useCustomResourceUrl(crd);
   const { namespace } = useUrl();
+
+  if (!group || !version.name) {
+    return null;
+  }
+
   const resourceUrl =
     namespace && namespace !== '-all-'
       ? `/apis/${group}/${version.name}/namespaces/${namespace}/${name}`

src/components/Extensibility/ExtensibilityCreate.jsx

@@ -1,4 +1,11 @@
-import { useCallback, useMemo, useState, useContext, useEffect } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useState,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import { fromJS } from 'immutable';
 import pluralize from 'pluralize';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +29,7 @@ import {
 } from './helpers/immutableConverter';
 import { useVariables } from './hooks/useVariables';
 import { prepareRules } from './helpers/prepareRules';
-import { merge } from 'lodash';
+import { cloneDeep, merge } from 'lodash';
 
 import { TriggerContext, TriggerContextProvider } from './contexts/Trigger';
 import { useAtomValue } from 'jotai';
@@ -69,6 +76,7 @@ export function ExtensibilityCreateCore({
   const [initialResource, setInitialResource] = useState(
     initialExtensibilityResource,
   );
+  const hasSetInitialResource = useRef(false);
 
   useEffect(() => {
     if (layoutState?.showEdit?.resource) return;
@@ -85,9 +93,24 @@ export function ExtensibilityCreateCore({
   const presets = usePreparePresets(createResource?.presets, emptyTemplate);
   const resource = useMemo(() => getResourceObjFromUIStore(store), [store]);
 
+  useEffect(() => {
+    if (
+      !initialResource &&
+      !initialExtensibilityResource &&
+      !hasSetInitialResource.current &&
+      resource
+    ) {
+      const excludedResource = cloneDeep(resource);
+      delete excludedResource.status;
+      delete excludedResource.metadata;
+      setInitialResource(excludedResource);
+      hasSetInitialResource.current = true;
+    }
+  }, [initialExtensibilityResource, initialResource, resource]);
+
   const isEdit = useMemo(
     () =>
-      !!initialResource?.metadata?.name && !!!layoutState?.showCreate?.resource,
+      !!initialResource?.metadata?.name && !layoutState?.showCreate?.resource,
     [initialResource, layoutState?.showCreate?.resource],
   );
 

src/components/Extensibility/ExtensibilityWizard.jsx

@@ -53,17 +53,10 @@ function FormContainer({ children }) {
 const FormStack = injectPluginStack(FormContainer);
 
 export function ExtensibilityWizardCore({
-  formElementRef,
-  setCustomValid,
-  resourceType,
-  resourceUrl,
   resource: initialResource,
   resourceSchema,
-  toggleFormFn,
-  resourceName,
   onCancel,
   disableOnEdit = false,
-  ...props
 }) {
   const { prepareVars, setVar } = useVariables();
   const { t } = useTranslation();

src/components/Extensibility/components/ConditionList.jsx

@@ -34,7 +34,7 @@ export const ConditionList = ({
       value.map(async (v) => {
         const override = structure?.highlights?.find((o) => o.type === v.type);
         const customContentPromise = await Promise.all(
-          structure?.customContent?.map(async (c) => {
+          (structure?.customContent || []).map(async (c) => {
             return {
               ...c,
               value:

src/components/HelmReleases/HelmReleasesDetails.jsx

@@ -16,7 +16,7 @@ import { decodeHelmRelease } from './decodeHelmRelease';
 import { EventsList } from 'shared/components/EventsList';
 import { filterByResource } from 'hooks/useMessageList';
 
-function HelmReleasesDetails({ releaseName, namespace }) {
+export default function HelmReleasesDetails({ releaseName, namespace }) {
   const { t } = useTranslation();
 
   const resourceUrl =
@@ -82,39 +82,35 @@ function HelmReleasesDetails({ releaseName, namespace }) {
   );
 
   return (
-    <>
-      <ResourceDetails
-        description={ResourceDescription}
-        resourceType="HelmReleases"
-        namespace={namespace}
-        resourceName={releaseName}
-        customTitle={releaseName}
-        resourceUrl={resourceUrl}
-        resource={releaseSecret}
-        customStatusColumns={customStatusColumns}
-        statusBadge={statusBadge}
-        createResourceForm={() => (
-          <ResourceCreate
-            title={'HelmRelease'}
-            isEdit={true}
-            confirmText={t('common.buttons.save')}
-            disableEdit={true}
-            renderForm={(props) => (
-              <ErrorBoundary>
-                <HelmReleasesYaml
-                  resource={releaseSecret}
-                  editMode={true}
-                  {...props}
-                />
-              </ErrorBoundary>
-            )}
-          />
-        )}
-        customComponents={customComponents}
-        disableDelete
-      />
-    </>
+    <ResourceDetails
+      description={ResourceDescription}
+      resourceType="HelmReleases"
+      namespace={namespace}
+      resourceName={releaseName}
+      customTitle={releaseName}
+      resourceUrl={resourceUrl}
+      resource={releaseSecret}
+      customStatusColumns={customStatusColumns}
+      statusBadge={statusBadge}
+      createResourceForm={() => (
+        <ResourceCreate
+          title={'HelmRelease'}
+          isEdit={true}
+          confirmText={t('common.buttons.save')}
+          disableEdit={true}
+          renderForm={(props) => (
+            <ErrorBoundary>
+              <HelmReleasesYaml
+                resource={releaseSecret}
+                editMode={true}
+                {...props}
+              />
+            </ErrorBoundary>
+          )}
+        />
+      )}
+      customComponents={customComponents}
+      disableDelete
+    />
   );
 }
-
-export default HelmReleasesDetails;

src/resources/ClusterEvents/ClusterEventDetails.tsx

@@ -17,10 +17,12 @@ export default function ClusterEventDetails({
 }: ClusterEventDetailsProps) {
   const params = useParams();
   const overriddenNamespace = params.namespace ?? namespace;
-  const overriddenResourceUrl = resourceUrl
-    ? `/api/v1/namespaces/${overriddenNamespace}/events/${resourceName}`
-    : undefined;
+  const overriddenResourceUrl =
+    resourceUrl && overriddenNamespace && resourceName
+      ? `/api/v1/namespaces/${overriddenNamespace}/events/${resourceName}`
+      : undefined;
   const { clusterUrl } = useUrl();
+
   return (
     <EventDetails
       {...props}

src/resources/CustomResourceDefinitions/CRCreate.jsx

@@ -42,8 +42,7 @@ function CRCreateForm({
 
   const isEdit = useMemo(
     () =>
-      !!initialResource?.metadata?.name &&
-      !!!layoutColumn?.showCreate?.resource,
+      !!initialResource?.metadata?.name && !layoutColumn?.showCreate?.resource,
     [initialResource, layoutColumn?.showCreate?.resource],
   );