@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.4.2 → 1.5.2

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 React 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 { LEARNING_SECTION_ITEMS } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = React.useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  React.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        {LEARNING_SECTION_ITEMS.map(item => (\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            />\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        '$::-webkit-scrollbar': {\n          display: 'none',\n        },\n        scrollbarWidth: 'none',\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() || '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 { LEARNING_SECTION_ITEMS } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\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 {\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        {LEARNING_SECTION_ITEMS.map(item => (\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            />\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() || 'Guest'}!`}\n        </Typography>\n      )}\n      {content}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Placeholder.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()({
@@ -21,7 +21,7 @@ const Placeholder = (props) => {
     props.debugContent ? classes.centerDebugContent : undefined,
     props.showBorder ? classes.showBorder : undefined
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "placeholder", className }, props.debugContent);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "placeholder", className, children: props.debugContent });
 };
 
 export { Placeholder };

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.esm.js","sources":["../../src/components/Placeholder.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 */\n\nimport React from 'react';\n\nimport { makeStyles } from 'tss-react/mui';\n\n/**\n * @public\n */\nexport interface PlaceholderProps {\n  showBorder?: boolean;\n  debugContent?: string;\n}\n\nconst useStyles = makeStyles()({\n  centerDebugContent: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  // Make card content scrollable (so that cards don't overlap)\n  showBorder: {\n    border: '1px solid gray',\n    width: '100%',\n    height: '100%',\n  },\n});\n\n/**\n * @public\n */\nexport const Placeholder = (props: PlaceholderProps) => {\n  const { classes } = useStyles();\n  const className = [\n    props.debugContent ? classes.centerDebugContent : undefined,\n    props.showBorder ? classes.showBorder : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div data-testid=\"placeholder\" className={className}>\n      {props.debugContent}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA4BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA;AAAA,EAEA,UAAY,EAAA;AAAA,IACV,MAAQ,EAAA,gBAAA;AAAA,IACR,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA;AAAA;AAEZ,CAAC,CAAA;AAKY,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,KAAA,CAAM,YAAe,GAAA,OAAA,CAAQ,kBAAqB,GAAA,SAAA;AAAA,IAClD,KAAA,CAAM,UAAa,GAAA,OAAA,CAAQ,UAAa,GAAA;AAAA,GAEvC,CAAA,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,2CACG,KAAI,EAAA,EAAA,aAAA,EAAY,aAAc,EAAA,SAAA,EAAA,EAC5B,MAAM,YACT,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Placeholder.esm.js","sources":["../../src/components/Placeholder.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 */\n\nimport { makeStyles } from 'tss-react/mui';\n\n/**\n * @public\n */\nexport interface PlaceholderProps {\n  showBorder?: boolean;\n  debugContent?: string;\n}\n\nconst useStyles = makeStyles()({\n  centerDebugContent: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  // Make card content scrollable (so that cards don't overlap)\n  showBorder: {\n    border: '1px solid gray',\n    width: '100%',\n    height: '100%',\n  },\n});\n\n/**\n * @public\n */\nexport const Placeholder = (props: PlaceholderProps) => {\n  const { classes } = useStyles();\n  const className = [\n    props.debugContent ? classes.centerDebugContent : undefined,\n    props.showBorder ? classes.showBorder : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div data-testid=\"placeholder\" className={className}>\n      {props.debugContent}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA0BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA;AAAA,EAEA,UAAY,EAAA;AAAA,IACV,MAAQ,EAAA,gBAAA;AAAA,IACR,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA;AAAA;AAEZ,CAAC,CAAA;AAKY,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,KAAA,CAAM,YAAe,GAAA,OAAA,CAAQ,kBAAqB,GAAA,SAAA;AAAA,IAClD,KAAA,CAAM,UAAa,GAAA,OAAA,CAAQ,UAAa,GAAA;AAAA,GAEvC,CAAA,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,2BACG,KAAI,EAAA,EAAA,aAAA,EAAY,aAAc,EAAA,SAAA,EAC5B,gBAAM,YACT,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickAccessCard.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { WarningPanel, CodeSnippet, InfoCard } from '@backstage/core-components';
 import { HomePageToolkit, ComponentAccordion } from '@backstage/plugin-home';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -27,24 +27,23 @@ const QuickAccessCard = (props) => {
   const { data, error, isLoading } = useQuickAccessLinks(props.path);
   let content;
   if (isLoading) {
-    content = /* @__PURE__ */ React.createElement("div", { className: classes.center }, /* @__PURE__ */ React.createElement(CircularProgress, null));
+    content = /* @__PURE__ */ jsx("div", { className: classes.center, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   } else if (!data) {
-    content = /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not fetch data." }, /* @__PURE__ */ React.createElement(
+    content = /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: "Could not fetch data.", children: /* @__PURE__ */ jsx(
       CodeSnippet,
       {
         language: "text",
         text: error?.toString() ?? "Unknown error"
       }
-    ));
+    ) });
   } else {
-    content = /* @__PURE__ */ React.createElement(React.Fragment, null, data.map((item) => /* @__PURE__ */ React.createElement(
+    content = /* @__PURE__ */ jsx(Fragment, { children: data.map((item) => /* @__PURE__ */ jsx(
       HomePageToolkit,
       {
-        key: item.title,
         title: item.title,
         tools: item.links.map((link) => ({
           ...link,
-          icon: /* @__PURE__ */ React.createElement(
+          icon: /* @__PURE__ */ jsx(
             "img",
             {
               className: classes.img,
@@ -53,18 +52,19 @@ const QuickAccessCard = (props) => {
             }
           )
         })),
-        Renderer: (renderProps) => /* @__PURE__ */ React.createElement(ComponentAccordion, { expanded: item.isExpanded, ...renderProps })
-      }
-    )));
+        Renderer: (renderProps) => /* @__PURE__ */ jsx(ComponentAccordion, { expanded: item.isExpanded, ...renderProps })
+      },
+      item.title
+    )) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     InfoCard,
     {
       title: props.title ?? "Quick Access",
       noPadding: true,
-      className: classes.title
-    },
-    content
+      className: classes.title,
+      children: content
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"QuickAccessCard.esm.js","sources":["../../src/components/QuickAccessCard.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 */\n\nimport React from 'react';\n\nimport {\n  CodeSnippet,\n  InfoCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { ComponentAccordion, HomePageToolkit } from '@backstage/plugin-home';\n\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';\n\nconst useStyles = makeStyles()({\n  center: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  img: {\n    height: '40px',\n    width: 'auto',\n  },\n  title: {\n    '& div > div > div > div > p': {\n      textTransform: 'uppercase',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface QuickAccessCardProps {\n  title?: string;\n  path?: string;\n}\n\n/**\n * @public\n */\nexport const QuickAccessCard = (props: QuickAccessCardProps) => {\n  const { classes } = useStyles();\n  const { data, error, isLoading } = useQuickAccessLinks(props.path);\n\n  let content: React.ReactNode;\n\n  if (isLoading) {\n    content = (\n      <div className={classes.center}>\n        <CircularProgress />\n      </div>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title=\"Could not fetch data.\">\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? 'Unknown error'}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <>\n        {data.map(item => (\n          <HomePageToolkit\n            key={item.title}\n            title={item.title}\n            tools={item.links.map(link => ({\n              ...link,\n              icon: (\n                <img\n                  className={classes.img}\n                  src={link.iconUrl}\n                  alt={link.label}\n                />\n              ),\n            }))}\n            // Component creation is allowed inside component props only\n            // if prop name starts with `render`.\n            // We accept it here since the upstream package use `Renderer` instead.\n            Renderer={(\n              renderProps, // NOSONAR\n            ) => (\n              <ComponentAccordion expanded={item.isExpanded} {...renderProps} />\n            )}\n          />\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <InfoCard\n      title={props.title ?? 'Quick Access'}\n      noPadding\n      className={classes.title}\n    >\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,KAAO,EAAA;AAAA,IACL,6BAA+B,EAAA;AAAA,MAC7B,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAaY,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,WAAc,GAAA,mBAAA,CAAoB,MAAM,IAAI,CAAA;AAEjE,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,OAAA,uCACG,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,MACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,sBAAiB,CACpB,CAAA;AAAA,GAEJ,MAAA,IAAW,CAAC,IAAM,EAAA;AAChB,IAAA,OAAA,mBACG,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,QAAS,EAAA,OAAA,EAAQ,OAAM,uBACnC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,MAAA;AAAA,QACT,IAAA,EAAM,KAAO,EAAA,QAAA,EAAc,IAAA;AAAA;AAAA,KAE/B,CAAA;AAAA,GAEG,MAAA;AACL,IACE,OAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAK,CAAA,GAAA,CAAI,CACR,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,KAAK,IAAK,CAAA,KAAA;AAAA,QACV,OAAO,IAAK,CAAA,KAAA;AAAA,QACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAS,IAAA,MAAA;AAAA,UAC7B,GAAG,IAAA;AAAA,UACH,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,GAAA;AAAA,cACnB,KAAK,IAAK,CAAA,OAAA;AAAA,cACV,KAAK,IAAK,CAAA;AAAA;AAAA;AACZ,SAEF,CAAA,CAAA;AAAA,QAIF,QAAA,EAAU,CACR,WAEA,qBAAA,KAAA,CAAA,aAAA,CAAC,sBAAmB,QAAU,EAAA,IAAA,CAAK,UAAa,EAAA,GAAG,WAAa,EAAA;AAAA;AAAA,KAGrE,CACH,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,MAAM,KAAS,IAAA,cAAA;AAAA,MACtB,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,IAElB;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"QuickAccessCard.esm.js","sources":["../../src/components/QuickAccessCard.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 */\n\nimport type { ReactNode } from 'react';\n\nimport {\n  CodeSnippet,\n  InfoCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { ComponentAccordion, HomePageToolkit } from '@backstage/plugin-home';\n\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';\n\nconst useStyles = makeStyles()({\n  center: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  img: {\n    height: '40px',\n    width: 'auto',\n  },\n  title: {\n    '& div > div > div > div > p': {\n      textTransform: 'uppercase',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface QuickAccessCardProps {\n  title?: string;\n  path?: string;\n}\n\n/**\n * @public\n */\nexport const QuickAccessCard = (props: QuickAccessCardProps) => {\n  const { classes } = useStyles();\n  const { data, error, isLoading } = useQuickAccessLinks(props.path);\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <div className={classes.center}>\n        <CircularProgress />\n      </div>\n    );\n  } else if (!data) {\n    content = (\n      <WarningPanel severity=\"error\" title=\"Could not fetch data.\">\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? 'Unknown error'}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <>\n        {data.map(item => (\n          <HomePageToolkit\n            key={item.title}\n            title={item.title}\n            tools={item.links.map(link => ({\n              ...link,\n              icon: (\n                <img\n                  className={classes.img}\n                  src={link.iconUrl}\n                  alt={link.label}\n                />\n              ),\n            }))}\n            // Component creation is allowed inside component props only\n            // if prop name starts with `render`.\n            // We accept it here since the upstream package use `Renderer` instead.\n            Renderer={(\n              renderProps, // NOSONAR\n            ) => (\n              <ComponentAccordion expanded={item.isExpanded} {...renderProps} />\n            )}\n          />\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <InfoCard\n      title={props.title ?? 'Quick Access'}\n      noPadding\n      className={classes.title}\n    >\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BA,MAAM,SAAA,GAAY,YAAa,CAAA;AAAA,EAC7B,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,KAAO,EAAA;AAAA,IACL,6BAA+B,EAAA;AAAA,MAC7B,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC,CAAA;AAaY,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,WAAc,GAAA,mBAAA,CAAoB,MAAM,IAAI,CAAA;AAEjE,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,OAAA,uBACG,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,MACtB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAiB,CACpB,EAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,CAAC,IAAM,EAAA;AAChB,IAAA,OAAA,mBACG,GAAA,CAAA,YAAA,EAAA,EAAa,QAAS,EAAA,OAAA,EAAQ,OAAM,uBACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,MAAA;AAAA,QACT,IAAA,EAAM,KAAO,EAAA,QAAA,EAAc,IAAA;AAAA;AAAA,KAE/B,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,OAAA,mBAAA,GAAA,CAAA,QAAA,EAAA,EACG,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,IAAA,qBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAK,CAAA,KAAA;AAAA,QACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAS,IAAA,MAAA;AAAA,UAC7B,GAAG,IAAA;AAAA,UACH,IACE,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,GAAA;AAAA,cACnB,KAAK,IAAK,CAAA,OAAA;AAAA,cACV,KAAK,IAAK,CAAA;AAAA;AAAA;AACZ,SAEF,CAAA,CAAA;AAAA,QAIF,QAAA,EAAU,CACR,WAEA,qBAAA,GAAA,CAAC,sBAAmB,QAAU,EAAA,IAAA,CAAK,UAAa,EAAA,GAAG,WAAa,EAAA;AAAA,OAAA;AAAA,MAlB7D,IAAK,CAAA;AAAA,KAqBb,CACH,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,MAAM,KAAS,IAAA,cAAA;AAAA,MACtB,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,OAAQ,CAAA,KAAA;AAAA,MAElB,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/ReadOnlyGrid.esm.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Responsive } from 'react-grid-layout';
 import { ErrorBoundary } from '@backstage/core-components';
 import { makeStyles } from 'tss-react/mui';
@@ -102,27 +103,30 @@ const ReadOnlyGrid = (props) => {
     return result;
   }, [cards]);
   const children = useMemo(() => {
-    return cards.map((card) => /* @__PURE__ */ React.createElement(
+    return cards.map((card) => /* @__PURE__ */ jsx(
       "div",
       {
-        key: card.id,
         "data-cardid": card.id,
         "data-testid": `home-page card ${card.id}`,
         "data-layout": JSON.stringify(card.layouts),
-        className: classes.cardWrapper
+        className: classes.cardWrapper,
+        children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(card.Component, { ...card.props }) })
       },
-      /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(card.Component, { ...card.props }))
+      card.id
     ));
   }, [cards, classes.cardWrapper]);
-  return /* @__PURE__ */ React.createElement("div", { style: { margin: -16 } }, /* @__PURE__ */ React.createElement("div", { ref: measureRef }), measureRect.width ? /* @__PURE__ */ React.createElement(
-    Responsive,
-    {
-      ...defaultProps,
-      width: measureRect.width,
-      layouts
-    },
-    children
-  ) : null);
+  return /* @__PURE__ */ jsxs("div", { style: { margin: -16 }, children: [
+    /* @__PURE__ */ jsx("div", { ref: measureRef }),
+    measureRect.width ? /* @__PURE__ */ jsx(
+      Responsive,
+      {
+        ...defaultProps,
+        width: measureRect.width,
+        layouts,
+        children
+      }
+    ) : null
+  ] });
 };
 
 export { ReadOnlyGrid };

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

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyGrid.esm.js","sources":["../../src/components/ReadOnlyGrid.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 */\n\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport React, { useMemo } from 'react';\nimport {\n  Layout,\n  Layouts,\n  Responsive,\n  ResponsiveProps,\n} from 'react-grid-layout';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport { makeStyles } from 'tss-react/mui';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport useMeasure from 'react-use/lib/useMeasure';\n\nimport { HomePageCardMountPoint } from '../types';\n\ninterface Card {\n  id: string;\n  Component: React.ComponentType<any>;\n  props?: Record<string, any>;\n  layouts: Record<string, Layout>;\n}\n\nconst gridGap = 16;\n\nconst defaultProps: ResponsiveProps = {\n  // Aligned with the 1.0-1.2 home page gap.\n  margin: [gridGap, gridGap],\n  // Same as in home-plugin CustomHomepageGrid\n  rowHeight: 60,\n\n  // We use always a 12-column grid, but each cards can define\n  // their number of columns (width) and start column (x) per breakpoint.\n  breakpoints: {\n    xl: 1600,\n    lg: 1200,\n    md: 996,\n    sm: 768,\n    xs: 480,\n    xxs: 0,\n  },\n  cols: {\n    xl: 12,\n    lg: 12,\n    md: 12,\n    sm: 12,\n    xs: 12,\n    xxs: 12,\n  },\n\n  isDraggable: false,\n  isResizable: false,\n  compactType: null,\n};\n\nconst useStyles = makeStyles()({\n  // Make card content scrollable (so that cards don't overlap)\n  cardWrapper: {\n    '& > div[class*=\"MuiCard-root\"]': {\n      width: '100%',\n      height: '100%',\n    },\n    '& div[class*=\"MuiCardContent-root\"]': {\n      overflow: 'auto',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface ReadOnlyGridProps {\n  mountPoints: HomePageCardMountPoint[];\n  breakpoints?: Record<string, number>;\n  cols?: Record<string, number>;\n}\n\n/**\n * @public\n */\nexport const ReadOnlyGrid = (props: ReadOnlyGridProps) => {\n  const { classes } = useStyles();\n  const [measureRef, measureRect] = useMeasure<HTMLDivElement>();\n\n  const cards = useMemo<Card[]>(() => {\n    return props.mountPoints.map<Card>((mountPoint, index) => {\n      const id = (index + 1).toString();\n      const layouts: Record<string, Layout> = {};\n\n      if (mountPoint.config?.layouts) {\n        for (const [breakpoint, layout] of Object.entries(\n          mountPoint.config.layouts,\n        )) {\n          layouts[breakpoint] = {\n            i: id,\n            x: layout.x ?? 0,\n            y: layout.y ?? 0,\n            w: layout.w ?? 12,\n            h: layout.h ?? 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        }\n      } else {\n        // Default layout for cards without a layout configuration\n        ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'].forEach(breakpoint => {\n          layouts[breakpoint] = {\n            i: id,\n            x: 0,\n            y: 0,\n            w: 12,\n            h: 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        });\n      }\n\n      return {\n        id,\n        Component: mountPoint.Component,\n        props: mountPoint.config?.props,\n        layouts,\n      };\n    });\n  }, [props.mountPoints]);\n\n  const layouts = useMemo<Layouts>(() => {\n    const result: Layouts = {};\n    for (const card of cards) {\n      for (const [breakpoint, layoutPerBreakpoint] of Object.entries(\n        card.layouts,\n      )) {\n        if (!result[breakpoint]) {\n          result[breakpoint] = [];\n        }\n        result[breakpoint].push(layoutPerBreakpoint);\n      }\n    }\n    return result;\n  }, [cards]);\n\n  const children = useMemo(() => {\n    return cards.map(card => (\n      <div\n        key={card.id}\n        data-cardid={card.id}\n        data-testid={`home-page card ${card.id}`}\n        data-layout={JSON.stringify(card.layouts)}\n        className={classes.cardWrapper}\n      >\n        <ErrorBoundary>\n          <card.Component {...card.props} />\n        </ErrorBoundary>\n      </div>\n    ));\n  }, [cards, classes.cardWrapper]);\n\n  return (\n    <div style={{ margin: -gridGap }}>\n      <div ref={measureRef} />\n      {measureRect.width ? (\n        <Responsive\n          {...defaultProps}\n          width={measureRect.width}\n          layouts={layouts}\n        >\n          {children}\n        </Responsive>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["layouts"],"mappings":"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"}
+{"version":3,"file":"ReadOnlyGrid.esm.js","sources":["../../src/components/ReadOnlyGrid.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 */\n\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport type { ComponentType } from 'react';\n\nimport { useMemo } from 'react';\nimport {\n  Layout,\n  Layouts,\n  Responsive,\n  ResponsiveProps,\n} from 'react-grid-layout';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport { makeStyles } from 'tss-react/mui';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport useMeasure from 'react-use/lib/useMeasure';\n\nimport { HomePageCardMountPoint } from '../types';\n\ninterface Card {\n  id: string;\n  Component: ComponentType<any>;\n  props?: Record<string, any>;\n  layouts: Record<string, Layout>;\n}\n\nconst gridGap = 16;\n\nconst defaultProps: ResponsiveProps = {\n  // Aligned with the 1.0-1.2 home page gap.\n  margin: [gridGap, gridGap],\n  // Same as in home-plugin CustomHomepageGrid\n  rowHeight: 60,\n\n  // We use always a 12-column grid, but each cards can define\n  // their number of columns (width) and start column (x) per breakpoint.\n  breakpoints: {\n    xl: 1600,\n    lg: 1200,\n    md: 996,\n    sm: 768,\n    xs: 480,\n    xxs: 0,\n  },\n  cols: {\n    xl: 12,\n    lg: 12,\n    md: 12,\n    sm: 12,\n    xs: 12,\n    xxs: 12,\n  },\n\n  isDraggable: false,\n  isResizable: false,\n  compactType: null,\n};\n\nconst useStyles = makeStyles()({\n  // Make card content scrollable (so that cards don't overlap)\n  cardWrapper: {\n    '& > div[class*=\"MuiCard-root\"]': {\n      width: '100%',\n      height: '100%',\n    },\n    '& div[class*=\"MuiCardContent-root\"]': {\n      overflow: 'auto',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface ReadOnlyGridProps {\n  mountPoints: HomePageCardMountPoint[];\n  breakpoints?: Record<string, number>;\n  cols?: Record<string, number>;\n}\n\n/**\n * @public\n */\nexport const ReadOnlyGrid = (props: ReadOnlyGridProps) => {\n  const { classes } = useStyles();\n  const [measureRef, measureRect] = useMeasure<HTMLDivElement>();\n\n  const cards = useMemo<Card[]>(() => {\n    return props.mountPoints.map<Card>((mountPoint, index) => {\n      const id = (index + 1).toString();\n      const layouts: Record<string, Layout> = {};\n\n      if (mountPoint.config?.layouts) {\n        for (const [breakpoint, layout] of Object.entries(\n          mountPoint.config.layouts,\n        )) {\n          layouts[breakpoint] = {\n            i: id,\n            x: layout.x ?? 0,\n            y: layout.y ?? 0,\n            w: layout.w ?? 12,\n            h: layout.h ?? 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        }\n      } else {\n        // Default layout for cards without a layout configuration\n        ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'].forEach(breakpoint => {\n          layouts[breakpoint] = {\n            i: id,\n            x: 0,\n            y: 0,\n            w: 12,\n            h: 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        });\n      }\n\n      return {\n        id,\n        Component: mountPoint.Component,\n        props: mountPoint.config?.props,\n        layouts,\n      };\n    });\n  }, [props.mountPoints]);\n\n  const layouts = useMemo<Layouts>(() => {\n    const result: Layouts = {};\n    for (const card of cards) {\n      for (const [breakpoint, layoutPerBreakpoint] of Object.entries(\n        card.layouts,\n      )) {\n        if (!result[breakpoint]) {\n          result[breakpoint] = [];\n        }\n        result[breakpoint].push(layoutPerBreakpoint);\n      }\n    }\n    return result;\n  }, [cards]);\n\n  const children = useMemo(() => {\n    return cards.map(card => (\n      <div\n        key={card.id}\n        data-cardid={card.id}\n        data-testid={`home-page card ${card.id}`}\n        data-layout={JSON.stringify(card.layouts)}\n        className={classes.cardWrapper}\n      >\n        <ErrorBoundary>\n          <card.Component {...card.props} />\n        </ErrorBoundary>\n      </div>\n    ));\n  }, [cards, classes.cardWrapper]);\n\n  return (\n    <div style={{ margin: -gridGap }}>\n      <div ref={measureRef} />\n      {measureRect.width ? (\n        <Responsive\n          {...defaultProps}\n          width={measureRect.width}\n          layouts={layouts}\n        >\n          {children}\n        </Responsive>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["layouts"],"mappings":"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"}

package/dist/components/SearchBar.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { SearchBarBase } from '@backstage/plugin-search-react';
 import { makeStyles } from 'tss-react/mui';
@@ -32,7 +33,7 @@ const SearchBar = ({ path, queryParam }) => {
     const search = url.searchParams.toString();
     navigate(`${url.pathname}${search ? "?" : ""}${search}`);
   }, [navigate, path, queryParam]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SearchBarBase,
     {
       placeholder: "Search",

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../src/components/SearchBar.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 */\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { SearchBarBase } from '@backstage/plugin-search-react';\n\nimport { makeStyles } from 'tss-react/mui';\n\nconst useStyles = makeStyles()(theme => ({\n  searchBar: {\n    '&&': {\n      backgroundColor: theme.palette.mode === 'dark' ? '#36373A' : '#FFFFFF',\n      boxShadow: 'none',\n      border: `1px solid ${\n        theme.palette.mode === 'dark' ? '#57585a' : '#E4E4E4'\n      }`,\n      borderRadius: '50px',\n      margin: 0,\n    },\n  },\n  notchedOutline: {\n    '&&': {\n      borderStyle: 'none',\n    },\n  },\n}));\n\n/**\n * @public\n */\nexport interface SearchBarProps {\n  path?: string;\n  queryParam?: string;\n}\n\n/**\n * @public\n */\nexport const SearchBar = ({ path, queryParam }: SearchBarProps) => {\n  const { classes } = useStyles();\n  const [value, setValue] = useState('');\n  const ref = useRef<HTMLInputElement | null>(null);\n  const navigate = useNavigate();\n\n  // This handler is called when \"enter\" is pressed\n  const handleSubmit = useCallback(() => {\n    const query = ref.current?.value ?? '';\n\n    const url = new URL(window.location.toString());\n    url.pathname = path ?? '/search';\n    url.searchParams.set(queryParam ?? 'query', query);\n    const search = url.searchParams.toString();\n\n    navigate(`${url.pathname}${search ? '?' : ''}${search}`);\n  }, [navigate, path, queryParam]);\n\n  return (\n    <SearchBarBase\n      placeholder=\"Search\"\n      value={value}\n      onChange={setValue}\n      onSubmit={handleSubmit}\n      inputProps={{ ref }}\n      classes={{\n        root: classes.searchBar,\n      }}\n      InputProps={{\n        classes: {\n          notchedOutline: classes.notchedOutline,\n        },\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,SAAA,GAAY,UAAW,EAAA,CAAE,CAAU,KAAA,MAAA;AAAA,EACvC,SAAW,EAAA;AAAA,IACT,IAAM,EAAA;AAAA,MACJ,eAAiB,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA;AAAA,MAC7D,SAAW,EAAA,MAAA;AAAA,MACX,QAAQ,CACN,UAAA,EAAA,KAAA,CAAM,QAAQ,IAAS,KAAA,MAAA,GAAS,YAAY,SAC9C,CAAA,CAAA;AAAA,MACA,YAAc,EAAA,MAAA;AAAA,MACd,MAAQ,EAAA;AAAA;AACV,GACF;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA;AAAA;AACf;AAEJ,CAAE,CAAA,CAAA;AAaK,MAAM,SAAY,GAAA,CAAC,EAAE,IAAA,EAAM,YAAiC,KAAA;AACjE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,EAAE,CAAA;AACrC,EAAM,MAAA,GAAA,GAAM,OAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,WAAW,WAAY,EAAA;AAG7B,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAM,MAAA,KAAA,GAAQ,GAAI,CAAA,OAAA,EAAS,KAAS,IAAA,EAAA;AAEpC,IAAA,MAAM,MAAM,IAAI,GAAA,CAAI,MAAO,CAAA,QAAA,CAAS,UAAU,CAAA;AAC9C,IAAA,GAAA,CAAI,WAAW,IAAQ,IAAA,SAAA;AACvB,IAAA,GAAA,CAAI,YAAa,CAAA,GAAA,CAAI,UAAc,IAAA,OAAA,EAAS,KAAK,CAAA;AACjD,IAAM,MAAA,MAAA,GAAS,GAAI,CAAA,YAAA,CAAa,QAAS,EAAA;AAEzC,IAAS,QAAA,CAAA,CAAA,EAAG,IAAI,QAAQ,CAAA,EAAG,SAAS,GAAM,GAAA,EAAE,CAAG,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,QAAU,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAE/B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,QAAU,EAAA,QAAA;AAAA,MACV,QAAU,EAAA,YAAA;AAAA,MACV,UAAA,EAAY,EAAE,GAAI,EAAA;AAAA,MAClB,OAAS,EAAA;AAAA,QACP,MAAM,OAAQ,CAAA;AAAA,OAChB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,OAAS,EAAA;AAAA,UACP,gBAAgB,OAAQ,CAAA;AAAA;AAC1B;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../src/components/SearchBar.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 */\n\nimport { useCallback, useRef, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { SearchBarBase } from '@backstage/plugin-search-react';\n\nimport { makeStyles } from 'tss-react/mui';\n\nconst useStyles = makeStyles()(theme => ({\n  searchBar: {\n    '&&': {\n      backgroundColor: theme.palette.mode === 'dark' ? '#36373A' : '#FFFFFF',\n      boxShadow: 'none',\n      border: `1px solid ${\n        theme.palette.mode === 'dark' ? '#57585a' : '#E4E4E4'\n      }`,\n      borderRadius: '50px',\n      margin: 0,\n    },\n  },\n  notchedOutline: {\n    '&&': {\n      borderStyle: 'none',\n    },\n  },\n}));\n\n/**\n * @public\n */\nexport interface SearchBarProps {\n  path?: string;\n  queryParam?: string;\n}\n\n/**\n * @public\n */\nexport const SearchBar = ({ path, queryParam }: SearchBarProps) => {\n  const { classes } = useStyles();\n  const [value, setValue] = useState('');\n  const ref = useRef<HTMLInputElement | null>(null);\n  const navigate = useNavigate();\n\n  // This handler is called when \"enter\" is pressed\n  const handleSubmit = useCallback(() => {\n    const query = ref.current?.value ?? '';\n\n    const url = new URL(window.location.toString());\n    url.pathname = path ?? '/search';\n    url.searchParams.set(queryParam ?? 'query', query);\n    const search = url.searchParams.toString();\n\n    navigate(`${url.pathname}${search ? '?' : ''}${search}`);\n  }, [navigate, path, queryParam]);\n\n  return (\n    <SearchBarBase\n      placeholder=\"Search\"\n      value={value}\n      onChange={setValue}\n      onSubmit={handleSubmit}\n      inputProps={{ ref }}\n      classes={{\n        root: classes.searchBar,\n      }}\n      InputProps={{\n        classes: {\n          notchedOutline: classes.notchedOutline,\n        },\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,SAAA,GAAY,UAAW,EAAA,CAAE,CAAU,KAAA,MAAA;AAAA,EACvC,SAAW,EAAA;AAAA,IACT,IAAM,EAAA;AAAA,MACJ,eAAiB,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA;AAAA,MAC7D,SAAW,EAAA,MAAA;AAAA,MACX,QAAQ,CACN,UAAA,EAAA,KAAA,CAAM,QAAQ,IAAS,KAAA,MAAA,GAAS,YAAY,SAC9C,CAAA,CAAA;AAAA,MACA,YAAc,EAAA,MAAA;AAAA,MACd,MAAQ,EAAA;AAAA;AACV,GACF;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA;AAAA;AACf;AAEJ,CAAE,CAAA,CAAA;AAaK,MAAM,SAAY,GAAA,CAAC,EAAE,IAAA,EAAM,YAAiC,KAAA;AACjE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,EAAE,CAAA;AACrC,EAAM,MAAA,GAAA,GAAM,OAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,WAAW,WAAY,EAAA;AAG7B,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAM,MAAA,KAAA,GAAQ,GAAI,CAAA,OAAA,EAAS,KAAS,IAAA,EAAA;AAEpC,IAAA,MAAM,MAAM,IAAI,GAAA,CAAI,MAAO,CAAA,QAAA,CAAS,UAAU,CAAA;AAC9C,IAAA,GAAA,CAAI,WAAW,IAAQ,IAAA,SAAA;AACvB,IAAA,GAAA,CAAI,YAAa,CAAA,GAAA,CAAI,UAAc,IAAA,OAAA,EAAS,KAAK,CAAA;AACjD,IAAM,MAAA,MAAA,GAAS,GAAI,CAAA,YAAA,CAAa,QAAS,EAAA;AAEzC,IAAS,QAAA,CAAA,CAAA,EAAG,IAAI,QAAQ,CAAA,EAAG,SAAS,GAAM,GAAA,EAAE,CAAG,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,QAAU,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAE/B,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,QAAU,EAAA,QAAA;AAAA,MACV,QAAU,EAAA,YAAA;AAAA,MACV,UAAA,EAAY,EAAE,GAAI,EAAA;AAAA,MAClB,OAAS,EAAA;AAAA,QACP,MAAM,OAAQ,CAAA;AAAA,OAChB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,OAAS,EAAA;AAAA,UACP,gBAAgB,OAAQ,CAAA;AAAA;AAC1B;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Link, MarkdownContent } from '@backstage/core-components';
 import Box from '@mui/material/Box';
 import CardContent from '@mui/material/CardContent';
@@ -12,7 +12,7 @@ const TemplateCard = ({
   description,
   kind
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Card,
     {
       elevation: 0,
@@ -20,73 +20,75 @@ const TemplateCard = ({
         border: (theme) => `1px solid ${theme.palette.grey[400]}`,
         overflow: "auto",
         maxHeight: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      CardContent,
-      {
-        sx: {
-          pb: 2,
-          "&:last-child": {
-            pb: 2
-          },
-          backgroundColor: "transparent"
-        }
       },
-      /* @__PURE__ */ React.createElement(Box, { sx: { padding: "8px 0" } }, /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          label: /* @__PURE__ */ React.createElement(Typography, { sx: { fontSize: "0.8rem", fontWeight: 400 } }, kind),
-          key: kind,
-          size: "small"
-        }
-      )),
-      /* @__PURE__ */ React.createElement(Box, { sx: { margin: "8px 0", height: "21px", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          to: link,
-          underline: "always",
-          style: {
-            display: "-webkit-box",
-            WebkitBoxOrient: "vertical",
-            WebkitLineClamp: 1,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            fontSize: "0.9rem",
-            fontWeight: "500"
-          }
-        },
-        title
-      )),
-      /* @__PURE__ */ React.createElement(
-        Box,
+      children: /* @__PURE__ */ jsxs(
+        CardContent,
         {
           sx: {
-            padding: "8px 0",
-            height: "90px",
-            overflow: "hidden"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: "body2",
-            paragraph: true,
-            sx: {
-              display: "-webkit-box",
-              WebkitLineClamp: 4,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              "& p": {
-                margin: "auto"
-              }
-            }
+            pb: 2,
+            "&:last-child": {
+              pb: 2
+            },
+            backgroundColor: "transparent"
           },
-          /* @__PURE__ */ React.createElement(MarkdownContent, { content: description })
-        )
+          children: [
+            /* @__PURE__ */ jsx(Box, { sx: { padding: "8px 0" }, children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.8rem", fontWeight: 400 }, children: kind }),
+                size: "small"
+              },
+              kind
+            ) }),
+            /* @__PURE__ */ jsx(Box, { sx: { margin: "8px 0", height: "21px", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: link,
+                underline: "always",
+                style: {
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  fontSize: "0.9rem",
+                  fontWeight: "500"
+                },
+                children: title
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  padding: "8px 0",
+                  height: "90px",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    paragraph: true,
+                    sx: {
+                      display: "-webkit-box",
+                      WebkitLineClamp: 4,
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      "& p": {
+                        margin: "auto"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(MarkdownContent, { content: description })
+                  }
+                )
+              }
+            )
+          ]
+        }
       )
-    )
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateCard.esm.js","sources":["../../../src/components/TemplateSection/TemplateCard.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 React from 'react';\n\nimport { Link } from '@backstage/core-components';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\n\ninterface TemplateCardProps {\n  link: string;\n  title: string;\n  description: string;\n  kind: string;\n}\n\nconst TemplateCard: React.FC<TemplateCardProps> = ({\n  link,\n  title,\n  description,\n  kind,\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={{ padding: '8px 0' }}>\n          <Chip\n            label={\n              <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>\n                {kind}\n              </Typography>\n            }\n            key={kind}\n            size=\"small\"\n          />\n        </Box>\n        <Box sx={{ margin: '8px 0', height: '21px', overflow: 'hidden' }}>\n          <Link\n            to={link}\n            underline=\"always\"\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.9rem',\n              fontWeight: '500',\n            }}\n          >\n            {title}\n          </Link>\n        </Box>\n        <Box\n          sx={{\n            padding: '8px 0',\n            height: '90px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 4,\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      </CardContent>\n    </Card>\n  );\n};\n\nexport default TemplateCard;\n"],"names":[],"mappings":";;;;;;;;AAiCA,MAAM,eAA4C,CAAC;AAAA,EACjD,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;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;AACb,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,EAAI,EAAA,CAAA;AAAA,UACJ,cAAgB,EAAA;AAAA,YACd,EAAI,EAAA;AAAA,WACN;AAAA,UACA,eAAiB,EAAA;AAAA;AACnB,OAAA;AAAA,0CAEC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,SAClB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,KAAA,kBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,UAAU,QAAU,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EACnD,IACH,CAAA;AAAA,UAEF,GAAK,EAAA,IAAA;AAAA,UACL,IAAK,EAAA;AAAA;AAAA,OAET,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,MAAA,EAAQ,SAAS,MAAQ,EAAA,MAAA,EAAQ,QAAU,EAAA,QAAA,EACpD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,IAAA;AAAA,UACJ,SAAU,EAAA,QAAA;AAAA,UACV,KAAO,EAAA;AAAA,YACL,OAAS,EAAA,aAAA;AAAA,YACT,eAAiB,EAAA,UAAA;AAAA,YACjB,eAAiB,EAAA,CAAA;AAAA,YACjB,QAAU,EAAA,QAAA;AAAA,YACV,YAAc,EAAA,UAAA;AAAA,YACd,QAAU,EAAA,QAAA;AAAA,YACV,UAAY,EAAA;AAAA;AACd,SAAA;AAAA,QAEC;AAAA,OAEL,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,OAAA;AAAA,YACT,MAAQ,EAAA,MAAA;AAAA,YACR,QAAU,EAAA;AAAA;AACZ,SAAA;AAAA,wBAEA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,OAAA;AAAA,YACR,SAAS,EAAA,IAAA;AAAA,YACT,EAAI,EAAA;AAAA,cACF,OAAS,EAAA,aAAA;AAAA,cACT,eAAiB,EAAA,CAAA;AAAA,cACjB,eAAiB,EAAA,UAAA;AAAA,cACjB,QAAU,EAAA,QAAA;AAAA,cACV,YAAc,EAAA,UAAA;AAAA,cACd,KAAO,EAAA;AAAA,gBACL,MAAQ,EAAA;AAAA;AACV;AACF,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AACzC;AACF;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"TemplateCard.esm.js","sources":["../../../src/components/TemplateSection/TemplateCard.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 { Link } from '@backstage/core-components';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\n\ninterface TemplateCardProps {\n  link: string;\n  title: string;\n  description: string;\n  kind: string;\n}\n\nconst TemplateCard: FC<TemplateCardProps> = ({\n  link,\n  title,\n  description,\n  kind,\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={{ padding: '8px 0' }}>\n          <Chip\n            label={\n              <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>\n                {kind}\n              </Typography>\n            }\n            key={kind}\n            size=\"small\"\n          />\n        </Box>\n        <Box sx={{ margin: '8px 0', height: '21px', overflow: 'hidden' }}>\n          <Link\n            to={link}\n            underline=\"always\"\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.9rem',\n              fontWeight: '500',\n            }}\n          >\n            {title}\n          </Link>\n        </Box>\n        <Box\n          sx={{\n            padding: '8px 0',\n            height: '90px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 4,\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      </CardContent>\n    </Card>\n  );\n};\n\nexport default TemplateCard;\n"],"names":[],"mappings":";;;;;;;;AAiCA,MAAM,eAAsC,CAAC;AAAA,EAC3C,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;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,OAAA,EAAS,SAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,KAAA,kBACG,GAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,UAAU,QAAU,EAAA,UAAA,EAAY,GAAI,EAAA,EACnD,QACH,EAAA,IAAA,EAAA,CAAA;AAAA,gBAGF,IAAK,EAAA;AAAA,eAAA;AAAA,cADA;AAAA,aAGT,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,MAAA,EAAQ,SAAS,MAAQ,EAAA,MAAA,EAAQ,QAAU,EAAA,QAAA,EACpD,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA,IAAA;AAAA,gBACJ,SAAU,EAAA,QAAA;AAAA,gBACV,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,QAAA;AAAA,kBACV,UAAY,EAAA;AAAA,iBACd;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aAEL,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,OAAS,EAAA,OAAA;AAAA,kBACT,MAAQ,EAAA,MAAA;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;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}