feat: Truncate and reduce label sizes + Responsive enhancements (#266)

pluralsh · Feb 9, 2023 · 4c85be2 · 4c85be2
1 parent 7fcb097
commit 4c85be2
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 61 deletions.
diff --git a/assets/src/components/apps/Apps.tsx b/assets/src/components/apps/Apps.tsx
@@ -178,6 +178,8 @@ export default function Apps() {
   return (
     <ResponsivePageFullWidth
       heading="Apps"
+      // 1528 is magic number for content width when screen is 1640px wide
+      maxContentWidth={1528}
       headingContent={(
         <>
           <Flex grow={1} />

diff --git a/assets/src/components/apps/app/components/Component.tsx b/assets/src/components/apps/app/components/Component.tsx
@@ -22,6 +22,7 @@ export default function Component({
     <Card
       display="flex"
       gap="small"
+      alignItems="center"
       paddingHorizontal="xsmall"
       paddingVertical="xxsmall"
       grow={1}
@@ -37,7 +38,7 @@ export default function Component({
         type="tertiary"
       />
       <Flex
-        align="center"
+        align="baseline"
         gap="small"
         flexShrink={1}
         overflow="hidden"

diff --git a/assets/src/components/cluster/LabelsAnnotations.tsx b/assets/src/components/cluster/LabelsAnnotations.tsx
@@ -1,7 +1,9 @@
-import { Card, CardProps, Chip } from '@pluralsh/design-system'
+import { CardProps, Chip, ChipList } from '@pluralsh/design-system'
 import { Div, Flex } from 'honorable'
 import { ReactNode } from 'react'
-import type { LabelPair, Metadata as MetadataT } from 'generated/graphql'
+import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
+import { CARD_CONTENT_MAX_WIDTH, MetadataCard } from 'components/utils/Metadata'
+import { useTheme } from 'styled-components'
 
 export const mapify = tags => tags.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {})
 
@@ -34,45 +36,66 @@ export function LabelsAnnotationsRow({
 
 export function LabelsAnnotationsTag({ name, value }: LabelPair) {
   return (
-    <Chip>
+    <Chip size="small">
       {name}
       {value && `: ${value}`}
     </Chip>
   )
 }
 
+function renderLabel(label: Maybe<LabelPair>) {
+  return (
+    <>
+      {label?.name}
+      {label?.value && `: ${label.value}`}
+    </>
+  )
+}
+
 export function LabelsAnnotations({
   metadata: { labels, annotations },
   ...props
 }: {
   metadata: MetadataT
 } & CardProps) {
+  const theme = useTheme()
+
+  const hasLabels = labels && labels?.length > 0
+  const hasAnnotations = annotations && annotations.length > 0
+  const hasData = hasLabels || hasAnnotations
+
+  if (!hasData) {
+    return null
+  }
+
   return (
-    <Card
-      padding="xlarge"
-      {...props}
-    >
+    <MetadataCard {...props}>
       <Flex
         direction="column"
         gap="xlarge"
+        maxWidth={(CARD_CONTENT_MAX_WIDTH - theme.spacing.xlarge * 3) / 2}
       >
-        <LabelsAnnotationsRow name="Labels">
-          {labels?.map(label => (
-            <LabelsAnnotationsTag
-              key={label?.name}
-              {...label}
+        {hasLabels && (
+          <LabelsAnnotationsRow name="Labels">
+            <ChipList
+              size="small"
+              limit={8}
+              values={labels}
+              transformValue={renderLabel}
             />
-          ))}
-        </LabelsAnnotationsRow>
-        <LabelsAnnotationsRow name="Annotations">
-          {annotations?.map(annotation => (
-            <LabelsAnnotationsTag
-              key={annotation?.name}
-              {...annotation}
+          </LabelsAnnotationsRow>
+        )}
+        {hasAnnotations && (
+          <LabelsAnnotationsRow name="Annotations">
+            <ChipList
+              size="small"
+              limit={8}
+              values={annotations}
+              transformValue={renderLabel}
             />
-          ))}
-        </LabelsAnnotationsRow>
+          </LabelsAnnotationsRow>
+        )}
       </Flex>
-    </Card>
+    </MetadataCard>
   )
 }
diff --git a/assets/src/components/cluster/containers/Container.tsx b/assets/src/components/cluster/containers/Container.tsx
@@ -85,6 +85,7 @@ export default function Container() {
 
   const match = useMatch('/pods/:namespace/:name/shell/:container/:subpath')
   const subpath = match?.params?.subpath || ''
+  const currentTab = DIRECTORY.find(({ path }) => path === subpath)
 
   const { data, error } = useQuery<{ pod: Pod }>(POD_INFO_Q, {
     variables: { name, namespace },
@@ -148,7 +149,7 @@ export default function Container() {
 
   return (
     <ResponsivePageFullWidth
-      scrollable={false}
+      scrollable={currentTab?.path === 'metadata'}
       heading={containerName}
       headingContent={(
         <Flex gap="medium">

diff --git a/assets/src/components/cluster/nodes/Node.tsx b/assets/src/components/cluster/nodes/Node.tsx
@@ -61,7 +61,7 @@ export default function Node() {
       stateRef={tabStateRef}
       as={(
         <ResponsivePageFullWidth
-          scrollable={(currentTab?.label ?? 'Info') === 'Info'}
+          scrollable={(currentTab?.label ?? 'Info') === 'Info' || currentTab?.label === 'Metadata'}
           heading={name}
           headingContent={(
             <HeadingTabList

diff --git a/assets/src/components/utils/Metadata.tsx b/assets/src/components/utils/Metadata.tsx
@@ -1,25 +1,55 @@
 import { Card, SidecarProps } from '@pluralsh/design-system'
-import { Div, Flex, H2 } from 'honorable'
+import {
+  CardProps,
+  Div,
+  Flex,
+  H2,
+} from 'honorable'
 import { Children, forwardRef } from 'react'
 import styled from 'styled-components'
 import { makeGrid } from 'utils/makeGrid'
 
 const MAX_COLS = 4
 
-export const MetadataGridCard = styled(Card)<{$maxCols:number}>(({ theme, maxCols = MAX_COLS }) => ({
-  ...makeGrid({ maxCols, minColWidth: 186, gap: theme.spacing.xlarge }),
-  padding: theme.spacing.large,
+export const CARD_CONTENT_MAX_WIDTH = 1526
+
+const MetadataGridGrid = styled.div<{ maxCols: number }>(({ theme, maxCols = MAX_COLS }) => ({
+  ...makeGrid({
+    maxCols,
+    minColWidth: 186,
+    gap: theme.spacing.xlarge,
+  }),
 }))
 
+export function MetadataCard({ children, ...props }: CardProps) {
+  return (
+    <Card
+      display="flex"
+      justifyContent="center"
+      {...props}
+    >
+      {/* 1526 is magic number which is the card's width when screen is 1940px wide */}
+      <Div
+        maxWidth={CARD_CONTENT_MAX_WIDTH}
+        width="100%"
+        padding="xlarge"
+      >{children}
+      </Div>
+    </Card>
+  )
+}
+
 export function MetadataGrid(props) {
   const numChildren = Children.count(props.children)
-  const maxCols = (numChildren < MAX_COLS) ? numChildren : MAX_COLS
+  const maxCols = numChildren < MAX_COLS ? numChildren : MAX_COLS
 
   return (
-    <MetadataGridCard
-      maxCols={maxCols}
-      {...props}
-    />
+    <MetadataCard>
+      <MetadataGridGrid
+        maxCols={maxCols}
+        {...props}
+      />
+    </MetadataCard>
   )
 }
 

diff --git a/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx b/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx
@@ -1,5 +1,4 @@
 import { ResponsiveLayoutPage } from 'components/utils/layout/ResponsiveLayoutPage'
-import { useTheme } from 'styled-components'
 import { ComponentProps } from 'react'
 
 import { ScrollablePage } from './ScrollablePage'
@@ -9,8 +8,6 @@ export function ResponsivePageFullWidth({
   children,
   ...props
 }: ComponentProps<typeof ScrollablePage>) {
-  const theme = useTheme()
-
   return (
     <ResponsiveLayoutPage
       flexDirection="column"
@@ -23,16 +20,7 @@ export function ResponsivePageFullWidth({
     >
       <ScrollablePage
         scrollable={scrollable}
-        {...(scrollable
-          ? {
-            marginRight: 'large',
-            contentStyles: {
-              paddingRight: theme.spacing.large - 6,
-              paddingTop: theme.spacing.medium,
-              paddingBottom: theme.spacing.large,
-            },
-          }
-          : {})}
+        fullWidth
         {...props}
       >
         {children}

diff --git a/assets/src/components/utils/layout/ScrollablePage.tsx b/assets/src/components/utils/layout/ScrollablePage.tsx
@@ -7,17 +7,38 @@ import ConsolePageTitle from './ConsolePageTitle'
 const ScrollablePageContent = styled.div<{
   scrollable?: boolean
   extraStyles?: CSSProperties
-}>(({ theme, scrollable, extraStyles }) => ({
+  maxContentWidth?: number
+  fullWidth?: boolean
+}>(({
+  theme, scrollable, extraStyles, maxContentWidth, fullWidth,
+}) => ({
+  position: 'relative',
   height: '100%',
   maxHeight: '100%',
   width: '100%',
   overflowY: scrollable ? 'auto' : 'hidden',
   overflowX: 'hidden',
-  paddingTop: theme.spacing.medium,
   paddingRight: scrollable ? theme.spacing.small : 0,
-  paddingBottom: scrollable ? theme.spacing.xxlarge : theme.spacing.large,
-  ...(extraStyles ?? {}),
-  position: 'relative',
+  ...(scrollable ? { scrollbarGutter: 'stable' } : {}),
+  ...(scrollable && fullWidth
+    ? {
+      paddingRight: theme.spacing.large - 6,
+    }
+    : {}),
+  '& > .widthLimiter': {
+    width: '100%',
+    paddingTop: theme.spacing.medium,
+    paddingBottom: scrollable ? theme.spacing.xxlarge : theme.spacing.large,
+    ...(!scrollable
+      ? {
+        height: '100%',
+      }
+      : {}),
+    ...(maxContentWidth
+      ? { maxWidth: maxContentWidth, marginLeft: 'auto', marginRight: 'auto' }
+      : {}),
+    ...(extraStyles ?? {}),
+  },
 }))
 
 const ScrollShadow = styled.div(({ theme }) => ({
@@ -38,32 +59,46 @@ export function ScrollablePage({
   contentStyles,
   children,
   scrollable = true,
+  maxContentWidth,
+  fullWidth,
   ...props
 }: {
   heading: ReactNode
   headingContent?: ReactNode | undefined
   contentStyles?: CSSProperties
   children: ReactNode
   scrollable?: boolean
+  maxContentWidth?: number
+  fullWidth?: boolean
 } & FlexProps) {
   return (
     <>
       {heading && (
-        <Div position="relative">
-          {scrollable && <ScrollShadow />}
-          <ConsolePageTitle
-            heading={heading}
-            {...props}
+        <Div paddingRight={scrollable && fullWidth ? 'large' : undefined}>
+          <Div
+            position="relative"
+            width="100%"
+            marginLeft="auto"
+            marginRight="auto"
+            maxWidth={maxContentWidth}
           >
-            {headingContent}
-          </ConsolePageTitle>
+            {scrollable && <ScrollShadow />}
+            <ConsolePageTitle
+              heading={heading}
+              {...props}
+            >
+              {headingContent}
+            </ConsolePageTitle>
+          </Div>
         </Div>
       )}
       <ScrollablePageContent
         scrollable={scrollable}
         extraStyles={contentStyles}
+        maxContentWidth={maxContentWidth}
+        fullWidth={fullWidth}
       >
-        {children}
+        <div className="widthLimiter">{children}</div>
       </ScrollablePageContent>
     </>
   )

diff --git a/assets/src/utils/makeGrid.ts b/assets/src/utils/makeGrid.ts
@@ -1,18 +1,27 @@
+import { CSSProperties } from 'styled-components'
+
 export function makeGrid({
   gap,
   maxCols,
   minColWidth,
+  maxColWidth,
 }: {
   gap: number
   maxCols: number
   minColWidth: number
-}) {
+  maxColWidth?: number
+}): CSSProperties {
   const gapCount = maxCols - 1
   const totalGapWidth = gapCount * gap
 
   return {
     display: 'grid',
     gridTemplateColumns: `repeat(auto-fill, minmax(max(${minColWidth}px, calc((100% - ${totalGapWidth}px) / ${maxCols})), 1fr))`,
     gap,
+    ...(maxColWidth
+      ? {
+        maxWidth: maxCols * maxColWidth + totalGapWidth,
+      }
+      : {}),
   }
 }