@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.10.6 → 1.12.0

package/dist/components/EntitySection/EntitySection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitySection.esm.js","sources":["../../../src/components/EntitySection/EntitySection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ReactNode } from 'react';\n\nimport { useState, useEffect, Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { useTheme, styled } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport EntityCard from './EntityCard';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport HomePageEntityIllustration from '../../images/homepage-entities-1.svg';\nimport { useEntities } from '../../hooks/useEntities';\nimport {\n  addDismissedEntityIllustrationUsers,\n  hasEntityIllustrationUserDismissed,\n} from '../../utils/utils';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const EntitySection = () => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const { displayName, loading: profileLoading } = useUserProfile();\n  const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);\n  const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);\n  const [imgLoaded, setImgLoaded] = useState(false);\n  const [isMediumBreakpoint, setIsMediumBreakpoint] = useState(false);\n\n  const isMd = useMediaQuery(theme.breakpoints.only('md'));\n\n  useEffect(() => {\n    if (isMd) {\n      setIsMediumBreakpoint(true);\n    } else {\n      setIsMediumBreakpoint(false);\n    }\n  }, [isMd]);\n\n  useEffect(() => {\n    const isUserDismissedEntityIllustration =\n      hasEntityIllustrationUserDismissed(displayName);\n    setIsRemoveFirstCard(isUserDismissedEntityIllustration);\n  }, [displayName]);\n\n  const handleClose = () => {\n    setShowDiscoveryCard(false);\n    setTimeout(() => {\n      addDismissedEntityIllustrationUsers(displayName);\n      setIsRemoveFirstCard(true);\n    }, 500);\n  };\n\n  const { data, error, isLoading } = useEntities({\n    kind: ['Component', 'API', 'Resource', 'System'],\n  });\n\n  const entities = data?.items ?? [];\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('entities.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('entities.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    let entityCardCount = 2;\n    if (isMediumBreakpoint) entityCardCount = 3;\n\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {!isRemoveFirstCard && !profileLoading && (\n              <Grid item xs={12} md={6} lg={5} key=\"entities illustration\">\n                <Card\n                  elevation={0}\n                  sx={{\n                    border: `1px solid ${theme.palette.grey[400]}`,\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    position: 'relative',\n                    transition:\n                      'opacity 0.5s ease-out, transform 0.5s ease-in-out',\n                    opacity: showDiscoveryCard ? 1 : 0,\n                    transform: showDiscoveryCard\n                      ? 'translateX(0)'\n                      : 'translateX(-50px)',\n                  }}\n                >\n                  {!imgLoaded && (\n                    <Skeleton\n                      variant=\"rectangular\"\n                      height={300}\n                      sx={{\n                        borderRadius: 3,\n                        width: 'clamp(140px, 14vw, 266px)',\n                      }}\n                    />\n                  )}\n                  <Box\n                    component=\"img\"\n                    src={HomePageEntityIllustration}\n                    onLoad={() => setImgLoaded(true)}\n                    alt=\"\"\n                    height={300}\n                    sx={{\n                      width: 'clamp(140px, 14vw, 266px)',\n                    }}\n                  />\n                  <Box sx={{ p: 2 }}>\n                    <Box>\n                      <Typography variant=\"body2\" paragraph>\n                        {t('entities.description')}\n                      </Typography>\n                    </Box>\n                    {entities?.length > 0 && (\n                      <IconButton\n                        onClick={handleClose}\n                        aria-label={t('entities.close')}\n                        style={{\n                          position: 'absolute',\n                          top: '8px',\n                          right: '8px',\n                        }}\n                      >\n                        <CloseIcon style={{ width: '16px', height: '16px' }} />\n                      </IconButton>\n                    )}\n                  </Box>\n                </Card>\n              </Grid>\n            )}\n            {entities\n              ?.slice(0, isRemoveFirstCard ? 4 : entityCardCount)\n              .map((item: any) => (\n                <Grid\n                  item\n                  xs={12}\n                  md={6}\n                  lg={isRemoveFirstCard ? 3 : 3.5}\n                  key={item.metadata.name}\n                >\n                  <EntityCard\n                    entity={item}\n                    title={item.metadata.title ?? item.metadata.name}\n                    version=\"latest\"\n                    description={item.metadata.description ?? ''}\n                    tags={item.metadata?.tags ?? []}\n                    kind={item.kind}\n                  />\n                </Grid>\n              ))}\n            {entities?.length === 0 && (\n              <Grid item md={isRemoveFirstCard ? 12 : 7}>\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    minHeight: 300,\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent>\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('entities.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('entities.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('entities.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n        }}\n      >\n        {t('entities.title')}\n      </Typography>\n      {content}\n      {entities?.length > 0 && (\n        <Box sx={{ pt: 2 }}>\n          <ViewMoreLink to=\"/catalog\">\n            <Trans\n              message=\"entities.viewAll\"\n              params={{ count: data?.totalItems?.toString() || '' }}\n            />\n          </ViewMoreLink>\n        </Box>\n      )}\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}
+{"version":3,"file":"EntitySection.esm.js","sources":["../../../src/components/EntitySection/EntitySection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ReactNode } from 'react';\n\nimport { useState, useEffect, Fragment, useRef, useCallback } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { useTheme, styled } from '@mui/material/styles';\n\nimport EntityCard from './EntityCard';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport HomePageEntityIllustration from '../../images/homepage-entities-1.svg';\nimport { useEntities } from '../../hooks/useEntities';\nimport {\n  addDismissedEntityIllustrationUsers,\n  hasEntityIllustrationUserDismissed,\n} from '../../utils/utils';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { containerGridItemSx } from '../../utils/GridItem';\nimport {\n  useContainerQuery,\n  type ContainerSize,\n} from '../../hooks/useContainerQuery';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const EntitySection = () => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const { displayName, loading: profileLoading } = useUserProfile();\n  const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);\n  const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);\n  const [imgLoaded, setImgLoaded] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerQuery(containerRef);\n\n  const entityCardCount =\n    containerSize === 'xs' || containerSize === 'sm' ? 2 : 4;\n\n  const illustrationWidthMap: Partial<Record<ContainerSize, number>> = {\n    md: 180,\n    lg: 220,\n    xl: 266,\n  };\n  const illustrationWidth = illustrationWidthMap[containerSize] ?? 266;\n\n  const visibleEntitiesCount = (() => {\n    const isWide =\n      containerSize === 'xl' ||\n      containerSize === 'lg' ||\n      containerSize === 'md';\n\n    if (!isWide) return entityCardCount;\n\n    return isRemoveFirstCard ? entityCardCount : entityCardCount - 2;\n  })();\n\n  useEffect(() => {\n    const isUserDismissedEntityIllustration =\n      hasEntityIllustrationUserDismissed(displayName);\n    setIsRemoveFirstCard(isUserDismissedEntityIllustration);\n  }, [displayName]);\n\n  const handleClose = useCallback(() => {\n    setShowDiscoveryCard(false);\n    setTimeout(() => {\n      addDismissedEntityIllustrationUsers(displayName);\n      setIsRemoveFirstCard(true);\n    }, 500);\n  }, [displayName]);\n\n  const { data, error, isLoading } = useEntities({\n    kind: ['Component', 'API', 'Resource', 'System'],\n  });\n\n  const entities = data?.items ?? [];\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('entities.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('entities.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {/* hiding discovery card on small containers */}\n            {!isRemoveFirstCard &&\n              !profileLoading &&\n              containerSize !== 'xs' &&\n              containerSize !== 'sm' && (\n                <Grid item sx={containerGridItemSx({ md: 4 })}>\n                  <Card\n                    elevation={0}\n                    sx={{\n                      height: '100%',\n                      border: `1px solid ${theme.palette.grey[400]}`,\n                      display: 'flex',\n                      flexDirection: 'row',\n                      alignItems: 'center',\n                      position: 'relative',\n                      transition:\n                        'opacity 0.5s ease-out, transform 0.5s ease-in-out',\n                      opacity: showDiscoveryCard ? 1 : 0,\n                      transform: showDiscoveryCard\n                        ? 'translateX(0)'\n                        : 'translateX(-50px)',\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        flexDirection: 'row',\n                        alignItems: 'center',\n                      }}\n                    >\n                      {!imgLoaded && (\n                        <Skeleton\n                          variant=\"rectangular\"\n                          height={300}\n                          sx={{\n                            borderRadius: 3,\n                            width: illustrationWidth,\n                          }}\n                        />\n                      )}\n                      <Box\n                        component=\"img\"\n                        src={HomePageEntityIllustration}\n                        onLoad={() => setImgLoaded(true)}\n                        alt=\"\"\n                        height={300}\n                        sx={{\n                          width: illustrationWidth,\n                        }}\n                      />\n                      <Box sx={{ p: 2 }}>\n                        <Box sx={{ p: 2 }}>\n                          <Typography variant=\"body2\" paragraph>\n                            {t('entities.description')}\n                          </Typography>\n                        </Box>\n                        {entities?.length > 0 && (\n                          <IconButton\n                            onClick={handleClose}\n                            aria-label={t('entities.close')}\n                            style={{\n                              position: 'absolute',\n                              top: '8px',\n                              right: '8px',\n                            }}\n                          >\n                            <CloseIcon\n                              style={{ width: '16px', height: '16px' }}\n                            />\n                          </IconButton>\n                        )}\n                      </Box>\n                    </Box>\n                  </Card>\n                </Grid>\n              )}\n            {entities?.slice(0, visibleEntitiesCount).map((item: any) => (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  xs: 12,\n                  sm: 6,\n                  md: isRemoveFirstCard ? 3 : 4,\n                })}\n                key={item.metadata.name}\n              >\n                <EntityCard\n                  entity={item}\n                  title={item.metadata.title ?? item.metadata.name}\n                  version=\"latest\"\n                  description={item.metadata.description ?? ''}\n                  tags={item.metadata?.tags ?? []}\n                  kind={item.kind}\n                />\n              </Grid>\n            ))}\n            {entities?.length === 0 && (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  sm: 12,\n                  md: isRemoveFirstCard ? 12 : 8,\n                })}\n              >\n                <Box\n                  sx={{\n                    height: '100%',\n                    minHeight: 300,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent>\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('entities.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('entities.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('entities.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,\n        containerType: 'inline-size',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n          flexShrink: 0,\n        }}\n      >\n        {t('entities.title')}\n      </Typography>\n      <Box\n        ref={containerRef}\n        sx={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          mt: 1,\n        }}\n      >\n        {content}\n        {entities?.length > 0 && (\n          <Box sx={{ pt: 2 }}>\n            <ViewMoreLink to=\"/catalog\">\n              {t('entities.browseTheCatalog')}\n            </ViewMoreLink>\n          </Box>\n        )}\n      </Box>\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}

package/dist/components/OnboardingSection/OnboardingCard.esm.js

@@ -18,6 +18,7 @@ const OnboardingCard = ({
     /* @__PURE__ */ jsx(
       Typography,
       {
+        variant: "h3",
         sx: {
           fontSize: "1.75rem",
           fontWeight: 500,
@@ -55,6 +56,8 @@ const OnboardingCard = ({
         target,
         "aria-label": ariaLabel,
         sx: {
+          width: 220,
+          minWidth: 220,
           padding: (theme) => theme.spacing(1, 1.5),
           fontSize: "16px",
           "& .v5-MuiButton-endIcon": {

package/dist/components/OnboardingSection/OnboardingCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingCard.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { FC } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\ninterface OnboardingCardProps {\n  title: string;\n  description: string;\n  buttonText: string;\n  buttonLink: string;\n  target?: string;\n  ariaLabel?: string;\n  endIcon: React.ReactNode;\n}\n\nconst OnboardingCard: FC<OnboardingCardProps> = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  target,\n  ariaLabel,\n  endIcon,\n}) => {\n  return (\n    <Box>\n      <CardContent sx={{ backgroundColor: 'transparent' }}>\n        <Typography\n          sx={{\n            fontSize: '1.75rem',\n            fontWeight: 500,\n            m: 0,\n          }}\n        >\n          {title}\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '1rem',\n            fontWeight: 500,\n            p: '16px',\n            pt: '8px',\n            pl: '0px',\n            display: '-webkit-box',\n            webkitBoxOrient: 'vertical',\n            maxWidth: '240px',\n            webkitLineClamp: 2,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {description}\n        </Typography>\n        <Button\n          component={RouterLink}\n          variant=\"outlined\"\n          color=\"primary\"\n          to={buttonLink}\n          target={target}\n          aria-label={ariaLabel}\n          sx={{\n            padding: theme => theme.spacing(1, 1.5),\n            fontSize: '16px',\n            '& .v5-MuiButton-endIcon': {\n              marginRight: 0,\n            },\n          }}\n          endIcon={endIcon}\n        >\n          {buttonText}{' '}\n        </Button>\n      </CardContent>\n    </Box>\n  );\n};\n\nexport default OnboardingCard;\n"],"names":["RouterLink"],"mappings":";;;;;;;AAiCA,MAAM,iBAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,OACC,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,IAAI,EAAE,eAAA,EAAiB,eAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,MAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA,KAAA;AAAA,UACJ,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA,aAAA;AAAA,UACT,eAAiB,EAAA,UAAA;AAAA,UACjB,QAAU,EAAA,OAAA;AAAA,UACV,eAAiB,EAAA,CAAA;AAAA,UACjB,QAAU,EAAA,QAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAA,IAAA;AAAA,QACX,OAAQ,EAAA,UAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,EAAI,EAAA,UAAA;AAAA,QACJ,MAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,GAAG,CAAA;AAAA,UACtC,QAAU,EAAA,MAAA;AAAA,UACV,yBAA2B,EAAA;AAAA,YACzB,WAAa,EAAA;AAAA;AACf,SACF;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UAAY;AAAA;AAAA;AAAA;AACf,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OnboardingCard.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { FC } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\ninterface OnboardingCardProps {\n  title: string;\n  description: string;\n  buttonText: string;\n  buttonLink: string;\n  target?: string;\n  ariaLabel?: string;\n  endIcon: React.ReactNode;\n}\n\nconst OnboardingCard: FC<OnboardingCardProps> = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  target,\n  ariaLabel,\n  endIcon,\n}) => {\n  return (\n    <Box>\n      <CardContent sx={{ backgroundColor: 'transparent' }}>\n        <Typography\n          variant=\"h3\"\n          sx={{\n            fontSize: '1.75rem',\n            fontWeight: 500,\n            m: 0,\n          }}\n        >\n          {title}\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '1rem',\n            fontWeight: 500,\n            p: '16px',\n            pt: '8px',\n            pl: '0px',\n            display: '-webkit-box',\n            webkitBoxOrient: 'vertical',\n            maxWidth: '240px',\n            webkitLineClamp: 2,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {description}\n        </Typography>\n        <Button\n          component={RouterLink}\n          variant=\"outlined\"\n          color=\"primary\"\n          to={buttonLink}\n          target={target}\n          aria-label={ariaLabel}\n          sx={{\n            width: 220,\n            minWidth: 220,\n            padding: theme => theme.spacing(1, 1.5),\n            fontSize: '16px',\n            '& .v5-MuiButton-endIcon': {\n              marginRight: 0,\n            },\n          }}\n          endIcon={endIcon}\n        >\n          {buttonText}{' '}\n        </Button>\n      </CardContent>\n    </Box>\n  );\n};\n\nexport default OnboardingCard;\n"],"names":["RouterLink"],"mappings":";;;;;;;AAiCA,MAAM,iBAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,OACC,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,IAAI,EAAE,eAAA,EAAiB,eAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,MAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA,KAAA;AAAA,UACJ,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA,aAAA;AAAA,UACT,eAAiB,EAAA,UAAA;AAAA,UACjB,QAAU,EAAA,OAAA;AAAA,UACV,eAAiB,EAAA,CAAA;AAAA,UACjB,QAAU,EAAA,QAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAA,IAAA;AAAA,QACX,OAAQ,EAAA,UAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,EAAI,EAAA,UAAA;AAAA,QACJ,MAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,GAAA;AAAA,UACP,QAAU,EAAA,GAAA;AAAA,UACV,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,GAAG,CAAA;AAAA,UACtC,QAAU,EAAA,MAAA;AAAA,UACV,yBAA2B,EAAA;AAAA,YACzB,WAAa,EAAA;AAAA;AACf,SACF;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UAAY;AAAA;AAAA;AAAA;AACf,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/OnboardingSection/OnboardingSection.esm.js

@@ -14,6 +14,7 @@ import HomePageIllustrationLight from '../../images/homepage-illustration-light.
 import { getLearningItems } from '../../utils/constants.esm.js';
 import useGreeting from '../../hooks/useGreeting.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
 
 const OnboardingSection = () => {
   const [user, setUser] = useState();
@@ -53,17 +54,17 @@ const OnboardingSection = () => {
     }
     return name;
   };
-  const content = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { container: true, margin: "auto", children: [
+  const content = /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
     /* @__PURE__ */ jsx(
       Grid,
       {
         item: true,
-        xs: 12,
-        md: 6,
-        lg: 3,
-        display: "flex",
-        justifyContent: "left",
-        alignItems: "center",
+        sx: {
+          ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),
+          display: "flex",
+          justifyContent: "left",
+          alignItems: "center"
+        },
         children: /* @__PURE__ */ jsx(
           Box,
           {
@@ -71,7 +72,8 @@ const OnboardingSection = () => {
             src: isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight,
             alt: "",
             sx: {
-              width: "clamp(200px, 20vw, 264px)"
+              width: "clamp(200px, 20vw, 264px)",
+              height: "auto"
             }
           }
         )
@@ -81,12 +83,12 @@ const OnboardingSection = () => {
       Grid,
       {
         item: true,
-        xs: 12,
-        md: 6,
-        lg: 3,
-        display: "flex",
-        justifyContent: "left",
-        alignItems: "center",
+        sx: {
+          ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),
+          display: "flex",
+          justifyContent: "left",
+          alignItems: "center"
+        },
         children: /* @__PURE__ */ jsx(
           OnboardingCard,
           {
@@ -110,7 +112,9 @@ const OnboardingSection = () => {
       sx: {
         padding: "24px",
         border: (muiTheme) => `1px solid ${muiTheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         !profileLoading && /* @__PURE__ */ jsx(
@@ -121,12 +125,24 @@ const OnboardingSection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: `${greeting}, ${profileDisplayName() || t("onboarding.guest")}!`
           }
         ),
-        content
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: content
+          }
+        )
       ]
     }
   );

package/dist/components/OnboardingSection/OnboardingSection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useEffect } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { getLearningItems } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box>\n      <Grid container margin=\"auto\">\n        <Grid\n          item\n          xs={12}\n          md={6}\n          lg={3}\n          display=\"flex\"\n          justifyContent=\"left\"\n          alignItems=\"center\"\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n            }}\n          />\n        </Grid>\n        {getLearningItems(t).map((item: LearningSectionItem) => (\n          <Grid\n            item\n            xs={12}\n            md={6}\n            lg={3}\n            key={item.title}\n            display=\"flex\"\n            justifyContent=\"left\"\n            alignItems=\"center\"\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}\n        </Typography>\n      )}\n      {content}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useEffect } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { getLearningItems } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { containerGridItemSx } from '../../utils/GridItem';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box sx={{ mt: 2 }}>\n      <Grid container spacing={2}>\n        <Grid\n          item\n          sx={{\n            ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),\n            display: 'flex',\n            justifyContent: 'left',\n            alignItems: 'center',\n          }}\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n              height: 'auto',\n            }}\n          />\n        </Grid>\n        {getLearningItems(t).map((item: LearningSectionItem) => (\n          <Grid\n            item\n            key={item.title}\n            sx={{\n              ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),\n              display: 'flex',\n              justifyContent: 'left',\n              alignItems: 'center',\n            }}\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        containerType: 'inline-size',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n            flexShrink: 0,\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}\n        </Typography>\n      )}\n      <Box\n        sx={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          mt: 1,\n        }}\n      >\n        {content}\n      </Box>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TemplateSection/TemplateSection.esm.js

@@ -13,6 +13,7 @@ import { useEntities } from '../../hooks/useEntities.esm.js';
 import { ViewMoreLink } from './ViewMoreLink.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { Trans } from '../Trans.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
@@ -58,53 +59,76 @@ const TemplateSection = () => {
     ) });
   } else {
     content = /* @__PURE__ */ jsx(Box, { sx: { padding: "8px 8px 8px 0" }, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", children: [
-      templates?.items.map((item) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: /* @__PURE__ */ jsx(
-        TemplateCard,
+      templates?.items.map((item) => /* @__PURE__ */ jsx(
+        Grid,
         {
-          link: `/create/templates/${item.metadata.namespace}/${item.metadata.name}`,
-          title: item.metadata.title,
-          description: item.metadata.description,
-          kind: item.kind,
-          type: item.spec?.type
-        }
-      ) }, item.title)),
-      templates?.items.length === 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(
-        Box,
+          item: true,
+          sx: containerGridItemSx({
+            xs: 12,
+            sm: 6,
+            md: 3
+          }),
+          children: /* @__PURE__ */ jsx(
+            TemplateCard,
+            {
+              link: `/create/templates/${item.metadata.namespace}/${item.metadata.name}`,
+              title: item.metadata.title,
+              description: item.metadata.description,
+              kind: item.kind,
+              type: item.spec?.type
+            }
+          )
+        },
+        item.title
+      )),
+      templates?.items.length === 0 && /* @__PURE__ */ jsx(
+        Grid,
         {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
-            borderRadius: 3,
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsxs(
-            CardContent,
+          item: true,
+          sx: containerGridItemSx({
+            xs: 12
+          }),
+          children: /* @__PURE__ */ jsx(
+            Box,
             {
               sx: {
-                margin: "1rem"
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: 250,
+                border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
+                borderRadius: 3,
+                overflow: "hidden"
               },
-              children: [
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("templates.empty") }),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    sx: {
-                      fontSize: "0.875rem",
-                      fontWeight: 400,
-                      mt: "20px",
-                      mb: "16px"
-                    },
-                    children: t("templates.emptyDescription")
-                  }
-                ),
-                /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("templates.register") })
-              ]
+              children: /* @__PURE__ */ jsxs(
+                CardContent,
+                {
+                  sx: {
+                    margin: "1rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("templates.empty") }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: {
+                          fontSize: "0.875rem",
+                          fontWeight: 400,
+                          mt: "20px",
+                          mb: "16px"
+                        },
+                        children: t("templates.emptyDescription")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("templates.register") })
+                  ]
+                }
+              )
             }
           )
         }
-      ) })
+      )
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs(
@@ -114,7 +138,9 @@ const TemplateSection = () => {
       sx: {
         padding: "24px",
         border: (muiTheme) => `1px solid ${muiTheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -125,19 +151,33 @@ const TemplateSection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: t("templates.title")
           }
         ),
-        content,
-        templates?.items && templates?.items.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: catalogTemplatesLink, underline: "always", children: /* @__PURE__ */ jsx(
-          Trans,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            message: "templates.viewAll",
-            params: { count: templates?.totalItems?.toString() || "" }
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: [
+              content,
+              templates?.items && templates?.items.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: catalogTemplatesLink, underline: "always", children: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  message: "templates.viewAll",
+                  params: { count: templates?.totalItems?.toString() || "" }
+                }
+              ) }) })
+            ]
           }
-        ) }) })
+        )
       ]
     }
   );

package/dist/components/TemplateSection/TemplateSection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateSection.esm.js","sources":["../../../src/components/TemplateSection/TemplateSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ReactNode } from 'react';\n\nimport { Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport TemplateCard from './TemplateCard';\nimport { useEntities } from '../../hooks/useEntities';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const TemplateSection = () => {\n  const { t } = useTranslation();\n  const {\n    data: templates,\n    error,\n    isLoading,\n  } = useEntities({ kind: 'Template' });\n\n  const params = new URLSearchParams({\n    'filters[kind]': 'template',\n    limit: '20',\n  });\n  const catalogTemplatesLink = `/catalog?${params.toString()}`;\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!templates) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('templates.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('templates.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {templates?.items.map((item: any) => (\n              <Grid item xs={12} md={6} lg={3} key={item.title}>\n                <TemplateCard\n                  link={`/create/templates/${item.metadata.namespace}/${item.metadata.name}`}\n                  title={item.metadata.title}\n                  description={item.metadata.description}\n                  kind={item.kind}\n                  type={item.spec?.type}\n                />\n              </Grid>\n            ))}\n            {templates?.items.length === 0 && (\n              <Grid item xs={12} md={12}>\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent\n                    sx={{\n                      margin: '1rem',\n                    }}\n                  >\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('templates.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('templates.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('templates.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n        }}\n      >\n        {t('templates.title')}\n      </Typography>\n      {content}\n      {templates?.items && templates?.items.length > 0 && (\n        <Box sx={{ pt: 2 }}>\n          <ViewMoreLink to={catalogTemplatesLink} underline=\"always\">\n            <Trans\n              message=\"templates.viewAll\"\n              params={{ count: templates?.totalItems?.toString() || '' }}\n            />\n          </ViewMoreLink>\n        </Box>\n      )}\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}
+{"version":3,"file":"TemplateSection.esm.js","sources":["../../../src/components/TemplateSection/TemplateSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ReactNode } from 'react';\n\nimport { Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport TemplateCard from './TemplateCard';\nimport { useEntities } from '../../hooks/useEntities';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\nimport { containerGridItemSx } from '../../utils/GridItem';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const TemplateSection = () => {\n  const { t } = useTranslation();\n  const {\n    data: templates,\n    error,\n    isLoading,\n  } = useEntities({ kind: 'Template' });\n\n  const params = new URLSearchParams({\n    'filters[kind]': 'template',\n    limit: '20',\n  });\n  const catalogTemplatesLink = `/catalog?${params.toString()}`;\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!templates) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('templates.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('templates.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {templates?.items.map((item: any) => (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  xs: 12,\n                  sm: 6,\n                  md: 3,\n                })}\n                key={item.title}\n              >\n                <TemplateCard\n                  link={`/create/templates/${item.metadata.namespace}/${item.metadata.name}`}\n                  title={item.metadata.title}\n                  description={item.metadata.description}\n                  kind={item.kind}\n                  type={item.spec?.type}\n                />\n              </Grid>\n            ))}\n            {templates?.items.length === 0 && (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  xs: 12,\n                })}\n              >\n                <Box\n                  sx={{\n                    height: '100%',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    minHeight: 250,\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent\n                    sx={{\n                      margin: '1rem',\n                    }}\n                  >\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('templates.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('templates.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('templates.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        containerType: 'inline-size',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n          flexShrink: 0,\n        }}\n      >\n        {t('templates.title')}\n      </Typography>\n      <Box\n        sx={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          mt: 1,\n        }}\n      >\n        {content}\n        {templates?.items && templates?.items.length > 0 && (\n          <Box sx={{ pt: 2 }}>\n            <ViewMoreLink to={catalogTemplatesLink} underline=\"always\">\n              <Trans\n                message=\"templates.viewAll\"\n                params={{ count: templates?.totalItems?.toString() || '' }}\n              />\n            </ViewMoreLink>\n          </Box>\n        )}\n      </Box>\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}

package/dist/hooks/useContainerQuery.esm.js

@@ -0,0 +1,78 @@
+import { useState, useLayoutEffect } from 'react';
+
+const CONTAINER_BREAKPOINTS = {
+  xs: 0,
+  // <600
+  sm: 600,
+  // ≥600
+  md: 900,
+  // ≥900
+  lg: 1200,
+  // ≥1200
+  xl: 1536
+  // ≥1536
+};
+const resolveContainerSize = (width) => {
+  if (width >= CONTAINER_BREAKPOINTS.xl) return "xl";
+  if (width >= CONTAINER_BREAKPOINTS.lg) return "lg";
+  if (width >= CONTAINER_BREAKPOINTS.md) return "md";
+  if (width >= CONTAINER_BREAKPOINTS.sm) return "sm";
+  return "xs";
+};
+const NOTIFY_WIDTH_EPSILON = 0.5;
+const useContainerQuery = (ref, options) => {
+  const notifyWindowResize = options?.notifyWindowResize ?? false;
+  const [containerSize, setContainerSize] = useState("lg");
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return undefined;
+    const updateSize = (width) => {
+      const next = resolveContainerSize(width);
+      setContainerSize((prev) => prev === next ? prev : next);
+    };
+    let lastNotifiedWidth = null;
+    let resizeNotifyRafId = null;
+    let pendingNotifyWidth = null;
+    const scheduleWindowResizeNotify = (width) => {
+      if (!notifyWindowResize || typeof window === "undefined") {
+        return;
+      }
+      pendingNotifyWidth = width;
+      if (resizeNotifyRafId !== null) {
+        return;
+      }
+      resizeNotifyRafId = window.requestAnimationFrame(() => {
+        resizeNotifyRafId = null;
+        const w = pendingNotifyWidth;
+        if (w === null) {
+          return;
+        }
+        if (lastNotifiedWidth !== null && Math.abs(w - lastNotifiedWidth) < NOTIFY_WIDTH_EPSILON) {
+          return;
+        }
+        lastNotifiedWidth = w;
+        window.dispatchEvent(new Event("resize"));
+      });
+    };
+    const onObservedWidth = (width) => {
+      updateSize(width);
+      scheduleWindowResizeNotify(width);
+    };
+    onObservedWidth(el.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      if (!entries.length) return;
+      onObservedWidth(entries[0].contentRect.width);
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      if (resizeNotifyRafId !== null && typeof window !== "undefined") {
+        window.cancelAnimationFrame(resizeNotifyRafId);
+      }
+    };
+  }, [ref, notifyWindowResize]);
+  return containerSize;
+};
+
+export { CONTAINER_BREAKPOINTS, useContainerQuery };
+//# sourceMappingURL=useContainerQuery.esm.js.map

package/dist/hooks/useContainerQuery.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerQuery.esm.js","sources":["../../src/hooks/useContainerQuery.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n * A React hook that observes the width of a DOM element and\n * returns a responsive \"container size\" (`xs | sm | md | lg | xl`)\n * based on predefined breakpoints.\n *\n * Unlike window-based media queries, this hook is **container-based**:\n * the returned size depends on the element's own width, not the viewport.\n *\n * Internally, it:\n * - Reads the element's initial layout width on mount\n * - Uses ResizeObserver to track width changes\n * - Maps the width to MUI-like breakpoints\n * - Updates state only when the breakpoint actually changes\n *\n * Optional `notifyWindowResize`: when true, also dispatches a `window` `resize`\n * event when the observed width changes meaningfully. Dispatches are coalesced\n * to at most once per animation frame to avoid resize storms during continuous\n * container resizes. That lets react-grid-layout's `WidthProvider` (used by\n * `CustomHomepageGrid`) remeasure when the main column shrinks without a\n * viewport resize (e.g. RHDH docked drawer).\n * */\n\nimport { useLayoutEffect, useState, RefObject } from 'react';\n\nexport type UseContainerQueryOptions = {\n  notifyWindowResize?: boolean;\n};\n\n// Container Breakpoints (MUI-like, but container-based)\nexport type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport const CONTAINER_BREAKPOINTS = {\n  xs: 0, // <600\n  sm: 600, // ≥600\n  md: 900, // ≥900\n  lg: 1200, // ≥1200\n  xl: 1536, // ≥1536\n} as const;\n\n// Width → containerSize mapper\nconst resolveContainerSize = (width: number): ContainerSize => {\n  if (width >= CONTAINER_BREAKPOINTS.xl) return 'xl';\n  if (width >= CONTAINER_BREAKPOINTS.lg) return 'lg';\n  if (width >= CONTAINER_BREAKPOINTS.md) return 'md';\n  if (width >= CONTAINER_BREAKPOINTS.sm) return 'sm';\n  return 'xs';\n};\n\n/** Ignore sub-pixel jitter when deciding whether to fire a synthetic resize. */\nconst NOTIFY_WIDTH_EPSILON = 0.5;\n\n// Hook: useContainerQuery\n\nexport const useContainerQuery = (\n  ref: RefObject<HTMLElement>,\n  options?: UseContainerQueryOptions,\n): ContainerSize => {\n  const notifyWindowResize = options?.notifyWindowResize ?? false;\n  const [containerSize, setContainerSize] = useState<ContainerSize>('lg');\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return undefined;\n\n    const updateSize = (width: number) => {\n      const next = resolveContainerSize(width);\n      setContainerSize(prev => (prev === next ? prev : next));\n    };\n\n    let lastNotifiedWidth: number | null = null;\n    let resizeNotifyRafId: number | null = null;\n    let pendingNotifyWidth: number | null = null;\n\n    const scheduleWindowResizeNotify = (width: number) => {\n      if (!notifyWindowResize || typeof window === 'undefined') {\n        return;\n      }\n      pendingNotifyWidth = width;\n      if (resizeNotifyRafId !== null) {\n        return;\n      }\n      resizeNotifyRafId = window.requestAnimationFrame(() => {\n        resizeNotifyRafId = null;\n        const w = pendingNotifyWidth;\n        if (w === null) {\n          return;\n        }\n        if (\n          lastNotifiedWidth !== null &&\n          Math.abs(w - lastNotifiedWidth) < NOTIFY_WIDTH_EPSILON\n        ) {\n          return;\n        }\n        lastNotifiedWidth = w;\n        window.dispatchEvent(new Event('resize'));\n      });\n    };\n\n    const onObservedWidth = (width: number) => {\n      updateSize(width);\n      scheduleWindowResizeNotify(width);\n    };\n\n    onObservedWidth(el.getBoundingClientRect().width);\n\n    const observer = new ResizeObserver(entries => {\n      if (!entries.length) return;\n      onObservedWidth(entries[0].contentRect.width);\n    });\n\n    observer.observe(el);\n    return () => {\n      observer.disconnect();\n      if (resizeNotifyRafId !== null && typeof window !== 'undefined') {\n        window.cancelAnimationFrame(resizeNotifyRafId);\n      }\n    };\n  }, [ref, notifyWindowResize]);\n\n  return containerSize;\n};\n"],"names":[],"mappings":"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"}