From 0e8d283770bf506dd7a84881f9cb4231f64f2f60 Mon Sep 17 00:00:00 2001 From: Beniamin Malinski Date: Thu, 23 Nov 2023 02:29:48 +0100 Subject: [PATCH 1/2] frontend: Wait until it is safe to embed console into the parent --- frontend/src/EmbeddedApp.tsx | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/frontend/src/EmbeddedApp.tsx b/frontend/src/EmbeddedApp.tsx index 21c2ecacb..f597d0f07 100644 --- 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 ( - + ); From 74e5e8470ffc5ef662deafa271957db1f43918dd Mon Sep 17 00:00:00 2001 From: Beniamin Malinski Date: Thu, 23 Nov 2023 02:36:40 +0100 Subject: [PATCH 2/2] frontend: Replace SkeletonText with Skeleton to fix rerenders This is a fix for the Chakra UI issue which causes rerendering at least twice, making Console unusable --- .../components/pages/connect/Connector.Details.tsx | 4 ++-- .../src/components/pages/connect/CreateConnector.tsx | 6 +++--- .../pages/connect/dynamic-ui/components.tsx | 4 ++-- frontend/src/components/pages/overview/Overview.tsx | 11 +++++------ .../components/ActiveReassignments.tsx | 4 ++-- frontend/src/utils/tsxUtils.tsx | 6 +++--- 6 files changed, 17 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/pages/connect/Connector.Details.tsx b/frontend/src/components/pages/connect/Connector.Details.tsx index d58e5a800..71aad1e95 100644 --- 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 + return } const connectorStore = connectClusterStore.getConnectorStore(connectorName); diff --git a/frontend/src/components/pages/connect/CreateConnector.tsx b/frontend/src/components/pages/connect/CreateConnector.tsx index 420cf76ae..62d6eb03f 100644 --- 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 ( - + ); } @@ -546,7 +546,7 @@ function Review({ ) : null} {isCreating ? ( - + ) : ( <> {invalidValidationResult != null ? : null} diff --git a/frontend/src/components/pages/connect/dynamic-ui/components.tsx b/frontend/src/components/pages/connect/dynamic-ui/components.tsx index 7a10ba0e3..7f83d4ff2 100644 --- 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 = observer(({ connectorStore, if (connectorStore.initPending) { return ( - + ); } diff --git a/frontend/src/components/pages/overview/Overview.tsx b/frontend/src/components/pages/overview/Overview.tsx index 9f9368847..fff3c174b 100644 --- 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 {
    - {news?.map((x, i) =>
    • )} -     +
@@ -265,7 +264,7 @@ function ClusterDetails() { const brokers = api.brokers; if (!overview || !brokers) { - return + return } 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 index 79dd72325..ef4e83787 100644 --- 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 */} this.cancelReassignment()}/> - ) : + ) : return ( diff --git a/frontend/src/utils/tsxUtils.tsx b/frontend/src/utils/tsxUtils.tsx index 62572d079..536003406 100644 --- 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,7 +487,7 @@ export class ZeroSizeWrapper extends Component<{ width?: string, height?: string const defaultSkeletonStyle = { margin: '2rem' }; -const innerSkeleton = +const innerSkeleton = export const DefaultSkeleton = ( {innerSkeleton} @@ -495,7 +495,7 @@ export const DefaultSkeleton = ( ); export const InlineSkeleton = (p: { width: string | number }) => ( - + ); // Single line string, no wrapping, will not overflow and display ellipsis instead