@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.10.5 → 1.11.0

package/dist/alpha.d.ts

@@ -0,0 +1,77 @@
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+
+/**
+ * Translation ref for the Dynamic Home Page plugin.
+ * Defines all translation keys used in the plugin.
+ *
+ * @public
+ */
+declare const homepageTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"plugin.homepage", {
+    readonly "header.local": string;
+    readonly "header.welcome": string;
+    readonly "header.welcomePersonalized": string;
+    readonly "search.placeholder": string;
+    readonly "homePage.empty": string;
+    readonly "quickAccess.title": string;
+    readonly "quickAccess.error": string;
+    readonly "quickAccess.fetchError": string;
+    readonly "featuredDocs.learnMore": string;
+    readonly "templates.title": string;
+    readonly "templates.error": string;
+    readonly "templates.empty": string;
+    readonly "templates.fetchError": string;
+    readonly "templates.emptyDescription": string;
+    readonly "templates.register": string;
+    readonly "templates.viewAll": string;
+    readonly "onboarding.guest": string;
+    readonly "onboarding.greeting.goodMorning": string;
+    readonly "onboarding.greeting.goodAfternoon": string;
+    readonly "onboarding.greeting.goodEvening": string;
+    readonly "onboarding.getStarted.title": string;
+    readonly "onboarding.getStarted.description": string;
+    readonly "onboarding.getStarted.buttonText": string;
+    readonly "onboarding.getStarted.ariaLabel": string;
+    readonly "onboarding.explore.title": string;
+    readonly "onboarding.explore.description": string;
+    readonly "onboarding.explore.buttonText": string;
+    readonly "onboarding.explore.ariaLabel": string;
+    readonly "onboarding.learn.title": string;
+    readonly "onboarding.learn.description": string;
+    readonly "onboarding.learn.buttonText": string;
+    readonly "onboarding.learn.ariaLabel": string;
+    readonly "entities.title": string;
+    readonly "entities.error": string;
+    readonly "entities.description": string;
+    readonly "entities.close": string;
+    readonly "entities.empty": string;
+    readonly "entities.fetchError": string;
+    readonly "entities.emptyDescription": string;
+    readonly "entities.register": string;
+    readonly "entities.viewAll": string;
+}>;
+
+/**
+ * Translation resource for the Dynamic Home Page plugin (en, de, es, fr, it, ja).
+ *
+ * @public
+ */
+declare const homepageTranslations: _backstage_frontend_plugin_api.TranslationResource<"plugin.homepage">;
+
+/**
+ * Frontend module for the Dynamic Home Page plugin (New Frontend System).
+ *
+ * Extends the `home` plugin with a custom layout and RHDH widgets: Onboarding,
+ * Entity Catalog, Templates, Quick Access, Search, Recently Visited, Top Visited, etc.
+ * Add to your app's `createApp({ features: [..., homePageDevModule] })`.
+ *
+ * @alpha
+ */
+declare const homePageModule: _backstage_frontend_plugin_api.FrontendModule;
+/**
+ * Translation module for the Dynamic Home Page plugin.
+ *
+ * @alpha
+ */
+declare const homepageTranslationsModule: _backstage_frontend_plugin_api.FrontendModule;
+
+export { homePageModule, homepageTranslationRef, homepageTranslations, homepageTranslationsModule };

package/dist/alpha.esm.js

@@ -0,0 +1,39 @@
+import { TranslationBlueprint } from '@backstage/plugin-app-react';
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { onboardingSectionWidget, entitySectionWidget, templateSectionWidget, quickAccessCardWidget, featuredDocsCardWidget, searchBarWidget, TopVisitedWidget, RecentlyVisitedWidget, catalogStarredWidget, disableToolkit } from './alpha/extensions/homePageCards.esm.js';
+import { homepageTranslations } from './translations/index.esm.js';
+import { homePageLayoutExtension } from './alpha/extensions/homePageLayoutExtension.esm.js';
+import { quickAccessApi } from './alpha/extensions/apis.esm.js';
+export { homepageTranslationRef } from './translations/ref.esm.js';
+
+const homePageModule = createFrontendModule({
+  pluginId: "home",
+  extensions: [
+    homePageLayoutExtension,
+    onboardingSectionWidget,
+    entitySectionWidget,
+    templateSectionWidget,
+    quickAccessApi,
+    quickAccessCardWidget,
+    featuredDocsCardWidget,
+    searchBarWidget,
+    TopVisitedWidget,
+    RecentlyVisitedWidget,
+    catalogStarredWidget,
+    disableToolkit
+  ]
+});
+const homepageTranslationsModule = createFrontendModule({
+  pluginId: "app",
+  extensions: [
+    TranslationBlueprint.make({
+      name: "homepage-translations",
+      params: {
+        resource: homepageTranslations
+      }
+    })
+  ]
+});
+
+export { homePageModule, homepageTranslations, homepageTranslationsModule };
+//# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha/index.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\nimport { TranslationBlueprint } from '@backstage/plugin-app-react';\nimport { createFrontendModule } from '@backstage/frontend-plugin-api';\nimport {\n  catalogStarredWidget,\n  disableToolkit,\n  entitySectionWidget,\n  featuredDocsCardWidget,\n  onboardingSectionWidget,\n  quickAccessCardWidget,\n  RecentlyVisitedWidget,\n  searchBarWidget,\n  templateSectionWidget,\n  TopVisitedWidget,\n} from './extensions/homePageCards';\nimport { homepageTranslations } from '../translations';\n\nimport { homePageLayoutExtension } from './extensions/homePageLayoutExtension';\nimport { quickAccessApi } from './extensions/apis';\n\n/**\n * Frontend module for the Dynamic Home Page plugin (New Frontend System).\n *\n * Extends the `home` plugin with a custom layout and RHDH widgets: Onboarding,\n * Entity Catalog, Templates, Quick Access, Search, Recently Visited, Top Visited, etc.\n * Add to your app's `createApp({ features: [..., homePageDevModule] })`.\n *\n * @alpha\n */\nexport const homePageModule = createFrontendModule({\n  pluginId: 'home',\n  extensions: [\n    homePageLayoutExtension,\n    onboardingSectionWidget,\n    entitySectionWidget,\n    templateSectionWidget,\n    quickAccessApi,\n    quickAccessCardWidget,\n    featuredDocsCardWidget,\n    searchBarWidget,\n    TopVisitedWidget,\n    RecentlyVisitedWidget,\n    catalogStarredWidget,\n    disableToolkit,\n  ],\n});\n\n/**\n * Translation module for the Dynamic Home Page plugin.\n *\n * @alpha\n */\nexport const homepageTranslationsModule = createFrontendModule({\n  pluginId: 'app',\n  extensions: [\n    TranslationBlueprint.make({\n      name: 'homepage-translations',\n      params: {\n        resource: homepageTranslations,\n      },\n    }),\n  ],\n});\n\n/**\n *\n * @alpha\n */\nexport { homepageTranslationRef, homepageTranslations } from '../translations';\n"],"names":[],"mappings":";;;;;;;;AA4CO,MAAM,iBAAiB,oBAAqB,CAAA;AAAA,EACjD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA;AAAA,IACV,uBAAA;AAAA,IACA,uBAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,sBAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,qBAAA;AAAA,IACA,oBAAA;AAAA,IACA;AAAA;AAEJ,CAAC;AAOM,MAAM,6BAA6B,oBAAqB,CAAA;AAAA,EAC7D,QAAU,EAAA,KAAA;AAAA,EACV,UAAY,EAAA;AAAA,IACV,qBAAqB,IAAK,CAAA;AAAA,MACxB,IAAM,EAAA,uBAAA;AAAA,MACN,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ,KACD;AAAA;AAEL,CAAC;;;;"}

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

@@ -19,14 +19,19 @@ const EntityCard = ({
     {
       elevation: 0,
       sx: {
+        height: "100%",
         border: (theme) => `1px solid ${theme.palette.grey[400]}`,
         overflow: "auto",
-        maxHeight: "100%"
+        display: "flex",
+        flexDirection: "column"
       },
       children: /* @__PURE__ */ jsxs(
         CardContent,
         {
           sx: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
             pb: 2,
             "&:last-child": {
               pb: 2

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

@@ -1 +1 @@
-{"version":3,"file":"EntityCard.esm.js","sources":["../../../src/components/EntitySection/EntityCard.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';\n\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\n\nimport TagList from './TagList';\n\ninterface EntityCardProps {\n  title: string;\n  version?: string;\n  description: string;\n  tags: string[];\n  kind: string;\n  entity: Entity;\n}\n\nconst EntityCard: FC<EntityCardProps> = ({\n  title,\n  description,\n  tags,\n  kind,\n  entity,\n}) => {\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        border: theme => `1px solid ${theme.palette.grey[400]}`,\n        overflow: 'auto',\n        maxHeight: '100%',\n      }}\n    >\n      <CardContent\n        sx={{\n          pb: 2,\n          '&:last-child': {\n            pb: 2,\n          },\n          backgroundColor: 'transparent',\n        }}\n      >\n        <Box sx={{ overflow: 'hidden' }}>\n          <EntityRefLink\n            entityRef={entity}\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.875rem',\n              fontWeight: '500',\n              textDecoration: 'underline',\n            }}\n          >\n            {title}\n          </EntityRefLink>\n        </Box>\n        <Box\n          sx={{\n            pt: 2,\n            height: '175px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 8,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              '& p': {\n                margin: 'auto',\n              },\n            }}\n          >\n            <MarkdownContent content={description} />\n          </Typography>\n        </Box>\n        <TagList kind={kind} tags={tags} />\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default EntityCard;\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,aAAkC,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QACrD,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA;AAAA,OACb;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,EAAI,EAAA,CAAA;AAAA,YACJ,cAAgB,EAAA;AAAA,cACd,EAAI,EAAA;AAAA,aACN;AAAA,YACA,eAAiB,EAAA;AAAA,WACnB;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,UACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,MAAA;AAAA,gBACX,KAAO,EAAA;AAAA,kBACL,OAAS,EAAA,aAAA;AAAA,kBACT,eAAiB,EAAA,UAAA;AAAA,kBACjB,eAAiB,EAAA,CAAA;AAAA,kBACjB,QAAU,EAAA,QAAA;AAAA,kBACV,YAAc,EAAA,UAAA;AAAA,kBACd,QAAU,EAAA,UAAA;AAAA,kBACV,UAAY,EAAA,KAAA;AAAA,kBACZ,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aAEL,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,EAAI,EAAA,CAAA;AAAA,kBACJ,MAAQ,EAAA,OAAA;AAAA,kBACR,QAAU,EAAA;AAAA,iBACZ;AAAA,gBAEA,QAAA,kBAAA,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,OAAQ,EAAA,OAAA;AAAA,oBACR,SAAS,EAAA,IAAA;AAAA,oBACT,EAAI,EAAA;AAAA,sBACF,OAAS,EAAA,aAAA;AAAA,sBACT,eAAiB,EAAA,CAAA;AAAA,sBACjB,eAAiB,EAAA,UAAA;AAAA,sBACjB,QAAU,EAAA,QAAA;AAAA,sBACV,YAAc,EAAA,UAAA;AAAA,sBACd,KAAO,EAAA;AAAA,wBACL,MAAQ,EAAA;AAAA;AACV,qBACF;AAAA,oBAEA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AAAA;AACzC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"EntityCard.esm.js","sources":["../../../src/components/EntitySection/EntityCard.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';\n\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\n\nimport TagList from './TagList';\n\ninterface EntityCardProps {\n  title: string;\n  version?: string;\n  description: string;\n  tags: string[];\n  kind: string;\n  entity: Entity;\n}\n\nconst EntityCard: FC<EntityCardProps> = ({\n  title,\n  description,\n  tags,\n  kind,\n  entity,\n}) => {\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        height: '100%',\n        border: theme => `1px solid ${theme.palette.grey[400]}`,\n        overflow: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <CardContent\n        sx={{\n          flex: 1,\n          display: 'flex',\n          flexDirection: 'column',\n          pb: 2,\n          '&:last-child': {\n            pb: 2,\n          },\n          backgroundColor: 'transparent',\n        }}\n      >\n        <Box sx={{ overflow: 'hidden' }}>\n          <EntityRefLink\n            entityRef={entity}\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.875rem',\n              fontWeight: '500',\n              textDecoration: 'underline',\n            }}\n          >\n            {title}\n          </EntityRefLink>\n        </Box>\n        <Box\n          sx={{\n            pt: 2,\n            height: '175px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 8,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              '& p': {\n                margin: 'auto',\n              },\n            }}\n          >\n            <MarkdownContent content={description} />\n          </Typography>\n        </Box>\n        <TagList kind={kind} tags={tags} />\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default EntityCard;\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,aAAkC,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QACrD,QAAU,EAAA,MAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,IAAM,EAAA,CAAA;AAAA,YACN,OAAS,EAAA,MAAA;AAAA,YACT,aAAe,EAAA,QAAA;AAAA,YACf,EAAI,EAAA,CAAA;AAAA,YACJ,cAAgB,EAAA;AAAA,cACd,EAAI,EAAA;AAAA,aACN;AAAA,YACA,eAAiB,EAAA;AAAA,WACnB;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,UACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,MAAA;AAAA,gBACX,KAAO,EAAA;AAAA,kBACL,OAAS,EAAA,aAAA;AAAA,kBACT,eAAiB,EAAA,UAAA;AAAA,kBACjB,eAAiB,EAAA,CAAA;AAAA,kBACjB,QAAU,EAAA,QAAA;AAAA,kBACV,YAAc,EAAA,UAAA;AAAA,kBACd,QAAU,EAAA,UAAA;AAAA,kBACV,UAAY,EAAA,KAAA;AAAA,kBACZ,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aAEL,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,EAAI,EAAA,CAAA;AAAA,kBACJ,MAAQ,EAAA,OAAA;AAAA,kBACR,QAAU,EAAA;AAAA,iBACZ;AAAA,gBAEA,QAAA,kBAAA,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,OAAQ,EAAA,OAAA;AAAA,oBACR,SAAS,EAAA,IAAA;AAAA,oBACT,EAAI,EAAA;AAAA,sBACF,OAAS,EAAA,aAAA;AAAA,sBACT,eAAiB,EAAA,CAAA;AAAA,sBACjB,eAAiB,EAAA,UAAA;AAAA,sBACjB,QAAU,EAAA,QAAA;AAAA,sBACV,YAAc,EAAA,UAAA;AAAA,sBACd,KAAO,EAAA;AAAA,wBACL,MAAQ,EAAA;AAAA;AACV,qBACF;AAAA,oBAEA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AAAA;AACzC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
 import { Link, WarningPanel, CodeSnippet } from '@backstage/core-components';
 import { useUserProfile } from '@backstage/plugin-user-settings';
 import Grid from '@mui/material/Grid';
@@ -12,7 +12,6 @@ import CloseIcon from '@mui/icons-material/Close';
 import CircularProgress from '@mui/material/CircularProgress';
 import CardContent from '@mui/material/CardContent';
 import { styled, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import EntityCard from './EntityCard.esm.js';
 import { ViewMoreLink } from './ViewMoreLink.esm.js';
 import HomePageEntityIllustration from '../../images/homepage-entities-1.svg';
@@ -20,6 +19,8 @@ import { useEntities } from '../../hooks/useEntities.esm.js';
 import { hasEntityIllustrationUserDismissed, addDismissedEntityIllustrationUsers } from '../../utils/utils.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { Trans } from '../Trans.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
+import { useContainerQuery } from '../../hooks/useContainerQuery.esm.js';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
@@ -36,26 +37,31 @@ const EntitySection = () => {
   const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);
   const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);
   const [imgLoaded, setImgLoaded] = useState(false);
-  const [isMediumBreakpoint, setIsMediumBreakpoint] = useState(false);
-  const isMd = useMediaQuery(theme.breakpoints.only("md"));
-  useEffect(() => {
-    if (isMd) {
-      setIsMediumBreakpoint(true);
-    } else {
-      setIsMediumBreakpoint(false);
-    }
-  }, [isMd]);
+  const containerRef = useRef(null);
+  const containerSize = useContainerQuery(containerRef);
+  const entityCardCount = containerSize === "xs" || containerSize === "sm" ? 2 : 4;
+  const illustrationWidthMap = {
+    md: 180,
+    lg: 220,
+    xl: 266
+  };
+  const illustrationWidth = illustrationWidthMap[containerSize] ?? 266;
+  const visibleEntitiesCount = (() => {
+    const isWide = containerSize === "xl" || containerSize === "lg" || containerSize === "md";
+    if (!isWide) return entityCardCount;
+    return isRemoveFirstCard ? entityCardCount : entityCardCount - 2;
+  })();
   useEffect(() => {
     const isUserDismissedEntityIllustration = hasEntityIllustrationUserDismissed(displayName);
     setIsRemoveFirstCard(isUserDismissedEntityIllustration);
   }, [displayName]);
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setShowDiscoveryCard(false);
     setTimeout(() => {
       addDismissedEntityIllustrationUsers(displayName);
       setIsRemoveFirstCard(true);
     }, 500);
-  };
+  }, [displayName]);
   const { data, error, isLoading } = useEntities({
     kind: ["Component", "API", "Resource", "System"]
   });
@@ -83,14 +89,13 @@ const EntitySection = () => {
       }
     ) });
   } else {
-    let entityCardCount = 2;
-    if (isMediumBreakpoint) entityCardCount = 3;
     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: [
-      !isRemoveFirstCard && !profileLoading && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, lg: 5, children: /* @__PURE__ */ jsxs(
+      !isRemoveFirstCard && !profileLoading && containerSize !== "xs" && containerSize !== "sm" && /* @__PURE__ */ jsx(Grid, { item: true, sx: containerGridItemSx({ md: 4 }), children: /* @__PURE__ */ jsx(
         Card,
         {
           elevation: 0,
           sx: {
+            height: "100%",
             border: `1px solid ${theme.palette.grey[400]}`,
             display: "flex",
             flexDirection: "row",
@@ -100,62 +105,79 @@ const EntitySection = () => {
             opacity: showDiscoveryCard ? 1 : 0,
             transform: showDiscoveryCard ? "translateX(0)" : "translateX(-50px)"
           },
-          children: [
-            !imgLoaded && /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                variant: "rectangular",
-                height: 300,
-                sx: {
-                  borderRadius: 3,
-                  width: "clamp(140px, 14vw, 266px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "img",
-                src: HomePageEntityIllustration,
-                onLoad: () => setImgLoaded(true),
-                alt: "",
-                height: 300,
-                sx: {
-                  width: "clamp(140px, 14vw, 266px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("entities.description") }) }),
-              entities?.length > 0 && /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  onClick: handleClose,
-                  "aria-label": t("entities.close"),
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px"
-                  },
-                  children: /* @__PURE__ */ jsx(CloseIcon, { style: { width: "16px", height: "16px" } })
-                }
-              )
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center"
+              },
+              children: [
+                !imgLoaded && /* @__PURE__ */ jsx(
+                  Skeleton,
+                  {
+                    variant: "rectangular",
+                    height: 300,
+                    sx: {
+                      borderRadius: 3,
+                      width: illustrationWidth
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: HomePageEntityIllustration,
+                    onLoad: () => setImgLoaded(true),
+                    alt: "",
+                    height: 300,
+                    sx: {
+                      width: illustrationWidth
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("entities.description") }) }),
+                  entities?.length > 0 && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: handleClose,
+                      "aria-label": t("entities.close"),
+                      style: {
+                        position: "absolute",
+                        top: "8px",
+                        right: "8px"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        CloseIcon,
+                        {
+                          style: { width: "16px", height: "16px" }
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         }
-      ) }, "entities illustration"),
-      entities?.slice(0, isRemoveFirstCard ? 4 : entityCardCount).map((item) => /* @__PURE__ */ jsx(
+      ) }),
+      entities?.slice(0, visibleEntitiesCount).map((item) => /* @__PURE__ */ jsx(
         Grid,
         {
           item: true,
-          xs: 12,
-          md: 6,
-          lg: isRemoveFirstCard ? 3 : 3.5,
+          sx: containerGridItemSx({
+            xs: 12,
+            sm: 6,
+            md: isRemoveFirstCard ? 3 : 4
+          }),
           children: /* @__PURE__ */ jsx(
             EntityCard,
             {
               entity: item,
-              title: item.spec?.profile?.displayName ?? item.metadata.name,
+              title: item.metadata.title ?? item.metadata.name,
               version: "latest",
               description: item.metadata.description ?? "",
               tags: item.metadata?.tags ?? [],
@@ -165,36 +187,47 @@ const EntitySection = () => {
         },
         item.metadata.name
       )),
-      entities?.length === 0 && /* @__PURE__ */ jsx(Grid, { item: true, md: isRemoveFirstCard ? 12 : 7, children: /* @__PURE__ */ jsx(
-        Box,
+      entities?.length === 0 && /* @__PURE__ */ jsx(
+        Grid,
         {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: 300,
-            border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
-            borderRadius: 3,
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsxs(CardContent, { children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("entities.empty") }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                sx: {
-                  fontSize: "0.875rem",
-                  fontWeight: 400,
-                  mt: "20px",
-                  mb: "16px"
-                },
-                children: t("entities.emptyDescription")
-              }
-            ),
-            /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("entities.register") })
-          ] })
+          item: true,
+          sx: containerGridItemSx({
+            sm: 12,
+            md: isRemoveFirstCard ? 12 : 8
+          }),
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                height: "100%",
+                minHeight: 300,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
+                borderRadius: 3,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxs(CardContent, { children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("entities.empty") }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      fontSize: "0.875rem",
+                      fontWeight: 400,
+                      mt: "20px",
+                      mb: "16px"
+                    },
+                    children: t("entities.emptyDescription")
+                  }
+                ),
+                /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("entities.register") })
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs(
@@ -204,7 +237,9 @@ const EntitySection = () => {
       sx: {
         padding: "24px",
         border: (muitheme) => `1px solid ${muitheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -215,19 +250,34 @@ const EntitySection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: t("entities.title")
           }
         ),
-        content,
-        entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: "/catalog", children: /* @__PURE__ */ jsx(
-          Trans,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            message: "entities.viewAll",
-            params: { count: data?.totalItems?.toString() || "" }
+            ref: containerRef,
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: [
+              content,
+              entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: "/catalog", children: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  message: "entities.viewAll",
+                  params: { count: data?.totalItems?.toString() || "" }
+                }
+              ) }) })
+            ]
           }
-        ) }) })
+        )
       ]
     }
   );

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={\n                      item.spec?.profile?.displayName ?? item.metadata.name\n                    }\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 { Trans } from '../Trans';\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              <Trans\n                message=\"entities.viewAll\"\n                params={{ count: data?.totalItems?.toString() || '' }}\n              />\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": {