Merge pull request #932 from redpanda-data/10707-console-error-_histo…

…ry-should-not-be-overwritten frontend: Fix console issues rerendering when in embedded mode
redpanda-data · Nov 23, 2023 · c8e7e26 · c8e7e26
2 parents e6ef671 + 74e5e84
commit c8e7e26
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 30 deletions.
diff --git a/frontend/src/EmbeddedApp.tsx b/frontend/src/EmbeddedApp.tsx
@@ -33,18 +33,25 @@ import { observer } from 'mobx-react';
 import { ChakraProvider, redpandaTheme, redpandaToastOptions } from '@redpanda-data/ui';
 
 export interface EmbeddedProps extends SetConfigArguments {
-    // This is the base url that is used:
-    //   - when making api requests
-    //   - to setup the 'basename' in react-router
-    //
-    // In the simplest case this would be the exact url where the host is running,
-    // for example "http://localhost:3001/"
-    //
-    // When running in cloud-ui the base most likely need to include a few more
-    // things like cluster id, etc...
-    // So the base would probably be "https://cloud.redpanda.com/NAMESPACE/CLUSTER/"
-    //
+    /**
+     * This is the base url that is used:
+     * - when making api requests
+     * - to setup the 'basename' in react-router
+     *
+     * In the simplest case this would be the exact url where the host is running,
+     * for example "http://localhost:3001/"
+     *
+     * When running in cloud-ui the base most likely need to include a few more
+     * things like cluster id, etc...
+     * So the base would probably be "https://cloud.redpanda.com/NAMESPACE/CLUSTER/"
+     */
     basePath?: string;
+    /**
+     * We want to get explicit confirmation from the Cloud UI (our parent) so that
+     * we don't prematurely render console if the higher-order-component Console.tsx might rerender.
+     * In the future we might decide to use memo() as well
+     */
+    isConsoleReadyToMount?: boolean;
 }
 
 function EmbeddedApp({ basePath, ...p }: EmbeddedProps) {
@@ -68,11 +75,15 @@ function EmbeddedApp({ basePath, ...p }: EmbeddedProps) {
 
     setup(p);
 
+    if (!p.isConsoleReadyToMount) {
+        return null;
+    }
+
     return (
         <BrowserRouter basename={basePath}>
             <HistorySetter />
             <ChakraProvider theme={redpandaTheme} toastOptions={redpandaToastOptions}>
-                 <AppContent />
+                <AppContent />
             </ChakraProvider>
         </BrowserRouter>
     );

diff --git a/frontend/src/components/pages/connect/Connector.Details.tsx b/frontend/src/components/pages/connect/Connector.Details.tsx
@@ -26,7 +26,7 @@ import './helper';
 import { ConfirmModal, NotConfigured, statusColors, TaskState } from './helper';
 import PageContent from '../../misc/PageContent';
 import { delay } from '../../../utils/utils';
-import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip, SkeletonText } from '@redpanda-data/ui';
+import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip, Skeleton } from '@redpanda-data/ui';
 import Section from '../../misc/Section';
 import React from 'react';
 import { getConnectorFriendlyName } from './ConnectorBoxCard';
@@ -67,7 +67,7 @@ const KafkaConnectorMain = observer(
             deletingConnector: null,
         }));
         if (!connectClusterStore.isInitialized) {
-            return <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            return <Skeleton mt={5} noOfLines={20} height={4} />
         }
 
         const connectorStore = connectClusterStore.getConnectorStore(connectorName);

diff --git a/frontend/src/components/pages/connect/CreateConnector.tsx b/frontend/src/components/pages/connect/CreateConnector.tsx
@@ -40,7 +40,7 @@ import {
     ModalHeader,
     ModalOverlay,
     SearchField,
-    SkeletonText,
+    Skeleton,
     Spinner,
     Tabs,
     Text,
@@ -442,7 +442,7 @@ const ConnectorWizard = observer(({ connectClusters, activeCluster }: ConnectorW
 
     if (!connectClusterStore.isInitialized) {
         return (
-            <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            <Skeleton mt={5} noOfLines={20} height={4} />
         );
     }
 
@@ -546,7 +546,7 @@ function Review({
             ) : null}
 
             {isCreating ? (
-                <SkeletonText mt={5} noOfLines={6} spacing={5} skeletonHeight={4} />
+                <Skeleton mt={5} noOfLines={6} height={4} />
             ) : (
                 <>
                     {invalidValidationResult != null ? <ValidationDisplay validationResult={invalidValidationResult} /> : null}

diff --git a/frontend/src/components/pages/connect/dynamic-ui/components.tsx b/frontend/src/components/pages/connect/dynamic-ui/components.tsx
@@ -15,7 +15,7 @@ import { ConnectorPropertiesStore, PropertyGroup } from '../../../../state/conne
 import { observer } from 'mobx-react';
 import { ConnectorStepComponent } from './ConnectorStep';
 import { ConnectorStep } from '../../../../state/restInterfaces';
-import { Box, RadioGroup, SkeletonText, Switch } from '@redpanda-data/ui';
+import { Box, RadioGroup, Skeleton, Switch } from '@redpanda-data/ui';
 import KowlEditor from '../../../misc/KowlEditor';
 import { api } from '../../../../state/backendApi';
 import { clone } from '../../../../utils/jsonUtils';
@@ -38,7 +38,7 @@ export const ConfigPage: React.FC<ConfigPageProps> = observer(({ connectorStore,
 
     if (connectorStore.initPending) {
         return (
-            <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+            <Skeleton mt={5} noOfLines={20} height={4} />
         );
     }
 

diff --git a/frontend/src/components/pages/overview/Overview.tsx b/frontend/src/components/pages/overview/Overview.tsx
@@ -24,7 +24,7 @@ import { KowlColumnType, KowlTable } from '../../misc/KowlTable';
 import Section from '../../misc/Section';
 import PageContent from '../../misc/PageContent';
 import './Overview.scss';
-import { Button, Flex, Heading, Icon, Link, SkeletonText, Tooltip } from '@redpanda-data/ui';
+import { Button, Flex, Heading, Icon, Link, Skeleton, Tooltip } from '@redpanda-data/ui';
 import { CheckIcon } from '@primer/octicons-react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import React from 'react';
@@ -212,11 +212,10 @@ class Overview extends PageComponent {
                             </ul>
 
                             <ul className="resource-list">
-                                <SkeletonText
+                                <Skeleton
                                     isLoaded={Boolean(news)}
                                     noOfLines={4}
-                                    spacing={5}
-                                    skeletonHeight={4}
+                                    height={4}
                                 >
                                     {news?.map((x, i) => <li key={i}>
                                         <a href={x.url} rel="noopener noreferrer" target="_blank"
@@ -228,7 +227,7 @@ class Overview extends PageComponent {
                                             </span>
                                         </a>
                                     </li>)}
-                                </SkeletonText>
+                                </Skeleton>
                             </ul>
                         </div>
 
@@ -265,7 +264,7 @@ function ClusterDetails() {
     const brokers = api.brokers;
 
     if (!overview || !brokers) {
-        return <SkeletonText mt={5} noOfLines={13} spacing={5} skeletonHeight={4} speed={0} />
+        return <Skeleton mt={5} noOfLines={13} height={4} speed={0} />
     }
 
     const totalStorageBytes = brokers.sum(x => x.totalLogDirSizeBytes ?? 0);

diff --git a/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx b/frontend/src/components/pages/reassign-partitions/components/ActiveReassignments.tsx
@@ -23,7 +23,7 @@ import { reassignmentTracker } from '../ReassignPartitions';
 import { BandwidthSlider } from './BandwidthSlider';
 import { KowlColumnType, KowlTable } from '../../../misc/KowlTable';
 import { BrokerList } from '../../../misc/BrokerList';
-import { Box, Button, Checkbox, createStandaloneToast, Flex, ListItem, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverCloseButton, PopoverArrow, PopoverContent, PopoverHeader, PopoverTrigger, Progress, redpandaTheme, redpandaToastOptions, Text, ToastId, UnorderedList, useDisclosure, useToast, PopoverFooter, PopoverBody, ButtonGroup, SkeletonText } from '@redpanda-data/ui';
+import { Box, Button, Checkbox, createStandaloneToast, Flex, ListItem, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverCloseButton, PopoverArrow, PopoverContent, PopoverHeader, PopoverTrigger, Progress, redpandaTheme, redpandaToastOptions, Text, ToastId, UnorderedList, useDisclosure, useToast, PopoverFooter, PopoverBody, ButtonGroup, Skeleton } from '@redpanda-data/ui';
 
 // TODO - once ActiveReassignments is migrated to FC, we could should move this code to use useToast()
 const { ToastContainer, toast } = createStandaloneToast({
@@ -374,7 +374,7 @@ export class ReassignmentDetailsDialog extends Component<{ state: ReassignmentSt
                 {/* Cancel */}
                 <CancelReassignmentButton onConfirm={() => this.cancelReassignment()}/>
             </Flex>
-        ) : <SkeletonText mt={5} noOfLines={5} spacing={5} skeletonHeight={4} />
+        ) : <Skeleton mt={5} noOfLines={5} height={4} />
 
         return (
             <Modal isOpen={visible} onClose={this.props.onClose}>

diff --git a/frontend/src/utils/tsxUtils.tsx b/frontend/src/utils/tsxUtils.tsx
@@ -24,7 +24,7 @@ import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { makeObservable, observable } from 'mobx';
 import { InfoIcon } from '@primer/octicons-react';
 import colors from '../colors';
-import { SkeletonText } from '@chakra-ui/react';
+import { Skeleton } from '@chakra-ui/react';
 
 const defaultLocale = 'en'
 const thousandsSeperator = (1234).toLocaleString(defaultLocale)[1];
@@ -487,15 +487,15 @@ export class ZeroSizeWrapper extends Component<{ width?: string, height?: string
 
 
 const defaultSkeletonStyle = { margin: '2rem' };
-const innerSkeleton = <SkeletonText noOfLines={8} spacing={5} skeletonHeight={4} />
+const innerSkeleton = <Skeleton noOfLines={8} height={4} />
 export const DefaultSkeleton = (
     <motion.div {...animProps} key={'defaultSkeleton'} style={defaultSkeletonStyle}>
         {innerSkeleton}
     </motion.div>
 );
 
 export const InlineSkeleton = (p: { width: string | number }) => (
-    <SkeletonText noOfLines={1} skeletonHeight="2" width={p.width} display="flex" alignItems="center" />
+    <Skeleton noOfLines={1} height={2} width={p.width} display="flex" alignItems="center" />
 );
 
 // Single line string, no wrapping, will not overflow and display ellipsis instead