@backstage-community/plugin-lighthouse 0.8.1 → 0.9.0

package/dist/components/AuditView/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/AuditView/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport React, { ReactNode, useEffect, useState } from 'react';\nimport {\n  generatePath,\n  Link,\n  resolvePath,\n  useNavigate,\n  useParams,\n} from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Audit, Website } from '@backstage-community/plugin-lighthouse-common';\nimport { lighthouseApiRef } from '../../api';\nimport { formatTime } from '../../utils';\nimport AuditStatusIcon from '../AuditStatusIcon';\nimport LighthouseSupportButton from '../SupportButton';\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  HeaderLabel,\n  InfoCard,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { rootRouteRef } from '../../plugin';\n\n// TODO(freben): move all of this out of index\n\nconst useStyles = makeStyles({\n  contentGrid: {\n    height: '100%',\n  },\n  iframe: {\n    border: '0',\n    width: '100%',\n    height: '100%',\n  },\n  errorOutput: { whiteSpace: 'pre' },\n});\n\ninterface AuditLinkListProps {\n  audits?: Audit[];\n  selectedId: string;\n}\nconst AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => {\n  const fromPath = useRouteRef(rootRouteRef)?.() ?? '../';\n  return (\n    <List\n      data-testid=\"audit-sidebar\"\n      component=\"nav\"\n      aria-label=\"lighthouse audit history\"\n    >\n      {audits.map(audit => (\n        <ListItem\n          key={audit.id}\n          selected={audit.id === selectedId}\n          button\n          component={Link}\n          replace\n          to={resolvePath(\n            generatePath('audit/:id', { id: audit.id }),\n            fromPath,\n          )}\n        >\n          <ListItemIcon>\n            <AuditStatusIcon audit={audit} />\n          </ListItemIcon>\n          <ListItemText primary={formatTime(audit.timeCreated)} />\n        </ListItem>\n      ))}\n    </List>\n  );\n};\n\nconst AuditView = ({ audit }: { audit?: Audit }) => {\n  const classes = useStyles();\n  const params = useParams() as { id: string };\n  const { url: lighthouseUrl } = useApi(lighthouseApiRef);\n\n  if (audit?.status === 'RUNNING') return <Progress />;\n  if (audit?.status === 'FAILED')\n    return (\n      <Alert severity=\"error\">\n        This audit failed when attempting to run after several retries. Check\n        that your instance of lighthouse-audit-service can successfully connect\n        to your website and try again.\n      </Alert>\n    );\n\n  return (\n    <InfoCard variant=\"fullHeight\">\n      <iframe\n        className={classes.iframe}\n        title={`Lighthouse audit${audit?.url ? ` for ${audit.url}` : ''}`}\n        src={`${lighthouseUrl}/v1/audits/${encodeURIComponent(params.id)}`}\n      />\n    </InfoCard>\n  );\n};\n\nexport const AuditViewContent = () => {\n  const lighthouseApi = useApi(lighthouseApiRef);\n  const fromPath = useRouteRef(rootRouteRef)?.() ?? '../';\n  const params = useParams() as { id: string };\n  const classes = useStyles();\n  const navigate = useNavigate();\n\n  const {\n    loading,\n    error,\n    value: nextValue,\n  } = useAsync(\n    async () => await lighthouseApi.getWebsiteForAuditId(params.id),\n    [params.id],\n  );\n  const [value, setValue] = useState<Website>();\n  useEffect(() => {\n    if (!!nextValue && nextValue.url !== value?.url) {\n      setValue(nextValue);\n    }\n  }, [value, nextValue, setValue]);\n\n  let content: ReactNode = null;\n  if (value) {\n    content = (\n      <Grid container alignItems=\"stretch\" className={classes.contentGrid}>\n        <Grid item xs={3}>\n          <AuditLinkList audits={value?.audits} selectedId={params.id} />\n        </Grid>\n        <Grid item xs={9}>\n          <AuditView audit={value?.audits.find(a => a.id === params.id)} />\n        </Grid>\n      </Grid>\n    );\n  } else if (loading) {\n    content = <Progress />;\n  } else if (error) {\n    content = (\n      <Alert\n        data-testid=\"error-message\"\n        severity=\"error\"\n        className={classes.errorOutput}\n      >\n        {error.message}\n      </Alert>\n    );\n  }\n\n  let createAuditButtonUrl = 'create-audit';\n  if (value?.url) {\n    createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        title={value?.url || 'Audit'}\n        description=\"See a history of all Lighthouse audits for your website run through Backstage.\"\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => navigate(resolvePath(createAuditButtonUrl, fromPath))}\n        >\n          Create New Audit\n        </Button>\n        <LighthouseSupportButton />\n      </ContentHeader>\n      {content}\n    </>\n  );\n};\n\nconst ConnectedAuditView = () => (\n  <Page themeId=\"tool\">\n    <Header title=\"Lighthouse\" subtitle=\"Website audits powered by Lighthouse\">\n      <HeaderLabel label=\"Owner\" value=\"Spotify\" />\n      <HeaderLabel label=\"Lifecycle\" value=\"Alpha\" />\n    </Header>\n    <Content stretch>\n      <AuditViewContent />\n    </Content>\n  </Page>\n);\n\nexport default ConnectedAuditView;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/AuditView/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport { ReactNode, useEffect, useState } from 'react';\nimport {\n  generatePath,\n  Link,\n  resolvePath,\n  useNavigate,\n  useParams,\n} from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Audit, Website } from '@backstage-community/plugin-lighthouse-common';\nimport { lighthouseApiRef } from '../../api';\nimport { formatTime } from '../../utils';\nimport AuditStatusIcon from '../AuditStatusIcon';\nimport LighthouseSupportButton from '../SupportButton';\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  HeaderLabel,\n  InfoCard,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { rootRouteRef } from '../../plugin';\n\n// TODO(freben): move all of this out of index\n\nconst useStyles = makeStyles({\n  contentGrid: {\n    height: '100%',\n  },\n  iframe: {\n    border: '0',\n    width: '100%',\n    height: '100%',\n  },\n  errorOutput: { whiteSpace: 'pre' },\n});\n\ninterface AuditLinkListProps {\n  audits?: Audit[];\n  selectedId: string;\n}\nconst AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => {\n  const fromPath = useRouteRef(rootRouteRef)?.() ?? '../';\n  return (\n    <List\n      data-testid=\"audit-sidebar\"\n      component=\"nav\"\n      aria-label=\"lighthouse audit history\"\n    >\n      {audits.map(audit => (\n        <ListItem\n          key={audit.id}\n          selected={audit.id === selectedId}\n          button\n          component={Link}\n          replace\n          to={resolvePath(\n            generatePath('audit/:id', { id: audit.id }),\n            fromPath,\n          )}\n        >\n          <ListItemIcon>\n            <AuditStatusIcon audit={audit} />\n          </ListItemIcon>\n          <ListItemText primary={formatTime(audit.timeCreated)} />\n        </ListItem>\n      ))}\n    </List>\n  );\n};\n\nconst AuditView = ({ audit }: { audit?: Audit }) => {\n  const classes = useStyles();\n  const params = useParams() as { id: string };\n  const { url: lighthouseUrl } = useApi(lighthouseApiRef);\n\n  if (audit?.status === 'RUNNING') return <Progress />;\n  if (audit?.status === 'FAILED')\n    return (\n      <Alert severity=\"error\">\n        This audit failed when attempting to run after several retries. Check\n        that your instance of lighthouse-audit-service can successfully connect\n        to your website and try again.\n      </Alert>\n    );\n\n  return (\n    <InfoCard variant=\"fullHeight\">\n      <iframe\n        className={classes.iframe}\n        title={`Lighthouse audit${audit?.url ? ` for ${audit.url}` : ''}`}\n        src={`${lighthouseUrl}/v1/audits/${encodeURIComponent(params.id)}`}\n      />\n    </InfoCard>\n  );\n};\n\nexport const AuditViewContent = () => {\n  const lighthouseApi = useApi(lighthouseApiRef);\n  const fromPath = useRouteRef(rootRouteRef)?.() ?? '../';\n  const params = useParams() as { id: string };\n  const classes = useStyles();\n  const navigate = useNavigate();\n\n  const {\n    loading,\n    error,\n    value: nextValue,\n  } = useAsync(\n    async () => await lighthouseApi.getWebsiteForAuditId(params.id),\n    [params.id],\n  );\n  const [value, setValue] = useState<Website>();\n  useEffect(() => {\n    if (!!nextValue && nextValue.url !== value?.url) {\n      setValue(nextValue);\n    }\n  }, [value, nextValue, setValue]);\n\n  let content: ReactNode = null;\n  if (value) {\n    content = (\n      <Grid container alignItems=\"stretch\" className={classes.contentGrid}>\n        <Grid item xs={3}>\n          <AuditLinkList audits={value?.audits} selectedId={params.id} />\n        </Grid>\n        <Grid item xs={9}>\n          <AuditView audit={value?.audits.find(a => a.id === params.id)} />\n        </Grid>\n      </Grid>\n    );\n  } else if (loading) {\n    content = <Progress />;\n  } else if (error) {\n    content = (\n      <Alert\n        data-testid=\"error-message\"\n        severity=\"error\"\n        className={classes.errorOutput}\n      >\n        {error.message}\n      </Alert>\n    );\n  }\n\n  let createAuditButtonUrl = 'create-audit';\n  if (value?.url) {\n    createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        title={value?.url || 'Audit'}\n        description=\"See a history of all Lighthouse audits for your website run through Backstage.\"\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => navigate(resolvePath(createAuditButtonUrl, fromPath))}\n        >\n          Create New Audit\n        </Button>\n        <LighthouseSupportButton />\n      </ContentHeader>\n      {content}\n    </>\n  );\n};\n\nconst ConnectedAuditView = () => (\n  <Page themeId=\"tool\">\n    <Header title=\"Lighthouse\" subtitle=\"Website audits powered by Lighthouse\">\n      <HeaderLabel label=\"Owner\" value=\"Spotify\" />\n      <HeaderLabel label=\"Lifecycle\" value=\"Alpha\" />\n    </Header>\n    <Content stretch>\n      <AuditViewContent />\n    </Content>\n  </Page>\n);\n\nexport default ConnectedAuditView;\n"],"names":[],"mappings":"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"}

package/dist/components/Cards/LastLighthouseAuditCard.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity.esm.js';
 import AuditStatusIcon from '../AuditStatusIcon/index.esm.js';
@@ -8,16 +8,31 @@ const LighthouseCategoryScoreStatus = (props) => {
   const scoreAsPercentage = Math.round(props.score * 100);
   switch (true) {
     case scoreAsPercentage >= 90:
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusOK, null), scoreAsPercentage, "%");
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StatusOK, {}),
+        scoreAsPercentage,
+        "%"
+      ] });
     case (scoreAsPercentage >= 50 && scoreAsPercentage < 90):
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusWarning, null), scoreAsPercentage, "%");
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StatusWarning, {}),
+        scoreAsPercentage,
+        "%"
+      ] });
     case scoreAsPercentage < 50:
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusError, null), scoreAsPercentage, "%");
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StatusError, {}),
+        scoreAsPercentage,
+        "%"
+      ] });
     default:
-      return /* @__PURE__ */ React.createElement(Typography, { component: "span" }, "N/A");
+      return /* @__PURE__ */ jsx(Typography, { component: "span", children: "N/A" });
   }
 };
-const LighthouseAuditStatus = (props) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AuditStatusIcon, { audit: props.audit }), props.audit.status.toLocaleUpperCase("en-US"));
+const LighthouseAuditStatus = (props) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(AuditStatusIcon, { audit: props.audit }),
+  props.audit.status.toLocaleUpperCase("en-US")
+] });
 const LighthouseAuditSummary = (props) => {
   const { audit, dense = false } = props;
   const { url } = audit;
@@ -27,30 +42,30 @@ const LighthouseAuditSummary = (props) => {
     const categoryIds = Object.keys(categories);
     categoryIds.forEach((id) => {
       const { title, score } = categories[id];
-      flattenedCategoryData[title] = /* @__PURE__ */ React.createElement(LighthouseCategoryScoreStatus, { score });
+      flattenedCategoryData[title] = /* @__PURE__ */ jsx(LighthouseCategoryScoreStatus, { score });
     });
   }
   const tableData = {
     url,
-    status: /* @__PURE__ */ React.createElement(LighthouseAuditStatus, { audit }),
+    status: /* @__PURE__ */ jsx(LighthouseAuditStatus, { audit }),
     ...flattenedCategoryData
   };
-  return /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: tableData, dense });
+  return /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: tableData, dense });
 };
 const LastLighthouseAuditCard = (props) => {
   const { dense = false, variant } = props;
   const { value: website, loading, error } = useWebsiteForEntity();
   let content;
   if (loading) {
-    content = /* @__PURE__ */ React.createElement(Progress, null);
+    content = /* @__PURE__ */ jsx(Progress, {});
   }
   if (error) {
-    content = error.message.includes("no audited website found for url") ? /* @__PURE__ */ React.createElement(EmptyState, { title: "No Audits Found", missing: "data" }) : /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not load audit list." }, error.message);
+    content = error.message.includes("no audited website found for url") ? /* @__PURE__ */ jsx(EmptyState, { title: "No Audits Found", missing: "data" }) : /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: "Could not load audit list.", children: error.message });
   }
   if (website) {
-    content = /* @__PURE__ */ React.createElement(LighthouseAuditSummary, { audit: website.lastAudit, dense });
+    content = /* @__PURE__ */ jsx(LighthouseAuditSummary, { audit: website.lastAudit, dense });
   }
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Lighthouse Audit", variant }, content);
+  return /* @__PURE__ */ jsx(InfoCard, { title: "Lighthouse Audit", variant, children: content });
 };
 
 export { LastLighthouseAuditCard };

package/dist/components/Cards/LastLighthouseAuditCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LastLighthouseAuditCard.esm.js","sources":["../../../src/components/Cards/LastLighthouseAuditCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  Audit,\n  AuditCompleted,\n  LighthouseCategoryId,\n} from '@backstage-community/plugin-lighthouse-common';\nimport { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';\nimport AuditStatusIcon from '../AuditStatusIcon';\nimport {\n  EmptyState,\n  InfoCard,\n  InfoCardVariants,\n  Progress,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n  StructuredMetadataTable,\n  WarningPanel,\n} from '@backstage/core-components';\n\nconst LighthouseCategoryScoreStatus = (props: { score: number }) => {\n  const scoreAsPercentage = Math.round(props.score * 100);\n  switch (true) {\n    case scoreAsPercentage >= 90:\n      return (\n        <>\n          <StatusOK />\n          {scoreAsPercentage}%\n        </>\n      );\n    case scoreAsPercentage >= 50 && scoreAsPercentage < 90:\n      return (\n        <>\n          <StatusWarning />\n          {scoreAsPercentage}%\n        </>\n      );\n    case scoreAsPercentage < 50:\n      return (\n        <>\n          <StatusError />\n          {scoreAsPercentage}%\n        </>\n      );\n    default:\n      return <Typography component=\"span\">N/A</Typography>;\n  }\n};\n\nconst LighthouseAuditStatus = (props: { audit: Audit }) => (\n  <>\n    <AuditStatusIcon audit={props.audit} />\n    {props.audit.status.toLocaleUpperCase('en-US')}\n  </>\n);\n\nconst LighthouseAuditSummary = (props: { audit: Audit; dense?: boolean }) => {\n  const { audit, dense = false } = props;\n  const { url } = audit;\n  const flattenedCategoryData: Record<string, React.ReactNode> = {};\n  if (audit.status === 'COMPLETED') {\n    const categories = (audit as AuditCompleted).categories;\n    const categoryIds = Object.keys(categories) as LighthouseCategoryId[];\n    categoryIds.forEach((id: LighthouseCategoryId) => {\n      const { title, score } = categories[id];\n\n      flattenedCategoryData[title] = (\n        <LighthouseCategoryScoreStatus score={score} />\n      );\n    });\n  }\n  const tableData = {\n    url,\n    status: <LighthouseAuditStatus audit={audit} />,\n    ...flattenedCategoryData,\n  };\n\n  return <StructuredMetadataTable metadata={tableData} dense={dense} />;\n};\n\n/** @public */\nexport const LastLighthouseAuditCard = (props: {\n  dense?: boolean;\n  variant?: InfoCardVariants;\n}) => {\n  const { dense = false, variant } = props;\n  const { value: website, loading, error } = useWebsiteForEntity();\n\n  let content;\n  if (loading) {\n    content = <Progress />;\n  }\n  if (error) {\n    // We only want to display this warning panel when its caused by an error other than no audits being found for the website\n    content = error.message.includes('no audited website found for url') ? (\n      <EmptyState title=\"No Audits Found\" missing=\"data\" />\n    ) : (\n      <WarningPanel severity=\"error\" title=\"Could not load audit list.\">\n        {error.message}\n      </WarningPanel>\n    );\n  }\n  if (website) {\n    content = (\n      <LighthouseAuditSummary audit={website.lastAudit} dense={dense} />\n    );\n  }\n  return (\n    <InfoCard title=\"Lighthouse Audit\" variant={variant}>\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LastLighthouseAuditCard.esm.js","sources":["../../../src/components/Cards/LastLighthouseAuditCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  Audit,\n  AuditCompleted,\n  LighthouseCategoryId,\n} from '@backstage-community/plugin-lighthouse-common';\nimport { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';\nimport AuditStatusIcon from '../AuditStatusIcon';\nimport {\n  EmptyState,\n  InfoCard,\n  InfoCardVariants,\n  Progress,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n  StructuredMetadataTable,\n  WarningPanel,\n} from '@backstage/core-components';\n\nconst LighthouseCategoryScoreStatus = (props: { score: number }) => {\n  const scoreAsPercentage = Math.round(props.score * 100);\n  switch (true) {\n    case scoreAsPercentage >= 90:\n      return (\n        <>\n          <StatusOK />\n          {scoreAsPercentage}%\n        </>\n      );\n    case scoreAsPercentage >= 50 && scoreAsPercentage < 90:\n      return (\n        <>\n          <StatusWarning />\n          {scoreAsPercentage}%\n        </>\n      );\n    case scoreAsPercentage < 50:\n      return (\n        <>\n          <StatusError />\n          {scoreAsPercentage}%\n        </>\n      );\n    default:\n      return <Typography component=\"span\">N/A</Typography>;\n  }\n};\n\nconst LighthouseAuditStatus = (props: { audit: Audit }) => (\n  <>\n    <AuditStatusIcon audit={props.audit} />\n    {props.audit.status.toLocaleUpperCase('en-US')}\n  </>\n);\n\nconst LighthouseAuditSummary = (props: { audit: Audit; dense?: boolean }) => {\n  const { audit, dense = false } = props;\n  const { url } = audit;\n  const flattenedCategoryData: Record<string, ReactNode> = {};\n  if (audit.status === 'COMPLETED') {\n    const categories = (audit as AuditCompleted).categories;\n    const categoryIds = Object.keys(categories) as LighthouseCategoryId[];\n    categoryIds.forEach((id: LighthouseCategoryId) => {\n      const { title, score } = categories[id];\n\n      flattenedCategoryData[title] = (\n        <LighthouseCategoryScoreStatus score={score} />\n      );\n    });\n  }\n  const tableData = {\n    url,\n    status: <LighthouseAuditStatus audit={audit} />,\n    ...flattenedCategoryData,\n  };\n\n  return <StructuredMetadataTable metadata={tableData} dense={dense} />;\n};\n\n/** @public */\nexport const LastLighthouseAuditCard = (props: {\n  dense?: boolean;\n  variant?: InfoCardVariants;\n}) => {\n  const { dense = false, variant } = props;\n  const { value: website, loading, error } = useWebsiteForEntity();\n\n  let content;\n  if (loading) {\n    content = <Progress />;\n  }\n  if (error) {\n    // We only want to display this warning panel when its caused by an error other than no audits being found for the website\n    content = error.message.includes('no audited website found for url') ? (\n      <EmptyState title=\"No Audits Found\" missing=\"data\" />\n    ) : (\n      <WarningPanel severity=\"error\" title=\"Could not load audit list.\">\n        {error.message}\n      </WarningPanel>\n    );\n  }\n  if (website) {\n    content = (\n      <LighthouseAuditSummary audit={website.lastAudit} dense={dense} />\n    );\n  }\n  return (\n    <InfoCard title=\"Lighthouse Audit\" variant={variant}>\n      {content}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CreateAudit/index.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
@@ -5,7 +6,7 @@ import ListItem from '@material-ui/core/ListItem';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { lighthouseApiRef } from '../../api.esm.js';
 import { useQuery } from '../../utils.esm.js';
@@ -80,73 +81,91 @@ const CreateAuditContent = () => {
       setSubmitting(false);
     }
   }, [url, formFactor, lighthouseApi, setSubmitting, errorApi, navigate]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ContentHeader,
-    {
-      title: "Trigger a new audit",
-      description: "Submitting this form will immediately trigger and store a new Lighthouse audit. Trigger audits to track your website's accessibility, performance, SEO, and best practices over time."
-    },
-    /* @__PURE__ */ React.createElement(LighthouseSupportButton, null)
-  ), /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6 }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
-    "form",
-    {
-      onSubmit: (ev) => {
-        ev.preventDefault();
-        triggerAudit();
-      }
-    },
-    /* @__PURE__ */ React.createElement(List, null, /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(
-      TextField,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ContentHeader,
       {
-        name: "lighthouse-create-audit-url-tf",
-        className: classes.input,
-        label: "URL",
-        placeholder: "https://spotify.com",
-        helperText: "The target URL for Lighthouse to use.",
-        required: true,
-        disabled: submitting,
-        onChange: (ev) => setUrl(ev.target.value),
-        value: url,
-        inputProps: { "aria-label": "URL" }
+        title: "Trigger a new audit",
+        description: "Submitting this form will immediately trigger and store a new Lighthouse audit. Trigger audits to track your website's accessibility, performance, SEO, and best practices over time.",
+        children: /* @__PURE__ */ jsx(LighthouseSupportButton, {})
       }
-    )), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(
-      TextField,
-      {
-        name: "lighthouse-create-audit-emulated-form-factor-tf",
-        className: classes.input,
-        label: "Emulated Form Factor",
-        helperText: "Device to simulate when auditing",
-        select: true,
-        required: true,
-        disabled: submitting,
-        onChange: (ev) => setFormFactor(ev.target.value),
-        value: formFactor,
-        inputProps: { "aria-label": "Emulated form factor" }
-      },
-      /* @__PURE__ */ React.createElement(MenuItem, { value: "mobile" }, "Mobile"),
-      /* @__PURE__ */ React.createElement(MenuItem, { value: "desktop" }, "Desktop")
-    )), /* @__PURE__ */ React.createElement(ListItem, { className: classes.buttonList }, /* @__PURE__ */ React.createElement(
-      Button,
+    ),
+    /* @__PURE__ */ jsx(Grid, { container: true, direction: "column", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, children: /* @__PURE__ */ jsx(InfoCard, { children: /* @__PURE__ */ jsx(
+      "form",
       {
-        variant: "outlined",
-        color: "primary",
-        onClick: () => navigate(".."),
-        disabled: submitting
-      },
-      "Cancel"
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: submitting
-      },
-      "Create Audit"
-    )))
-  )))));
+        onSubmit: (ev) => {
+          ev.preventDefault();
+          triggerAudit();
+        },
+        children: /* @__PURE__ */ jsxs(List, { children: [
+          /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              name: "lighthouse-create-audit-url-tf",
+              className: classes.input,
+              label: "URL",
+              placeholder: "https://spotify.com",
+              helperText: "The target URL for Lighthouse to use.",
+              required: true,
+              disabled: submitting,
+              onChange: (ev) => setUrl(ev.target.value),
+              value: url,
+              inputProps: { "aria-label": "URL" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsxs(
+            TextField,
+            {
+              name: "lighthouse-create-audit-emulated-form-factor-tf",
+              className: classes.input,
+              label: "Emulated Form Factor",
+              helperText: "Device to simulate when auditing",
+              select: true,
+              required: true,
+              disabled: submitting,
+              onChange: (ev) => setFormFactor(ev.target.value),
+              value: formFactor,
+              inputProps: { "aria-label": "Emulated form factor" },
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "mobile", children: "Mobile" }),
+                /* @__PURE__ */ jsx(MenuItem, { value: "desktop", children: "Desktop" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(ListItem, { className: classes.buttonList, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                color: "primary",
+                onClick: () => navigate(".."),
+                disabled: submitting,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "primary",
+                type: "submit",
+                disabled: submitting,
+                children: "Create Audit"
+              }
+            )
+          ] })
+        ] })
+      }
+    ) }) }) })
+  ] });
 };
-const CreateAudit = () => /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Lighthouse", subtitle: "Website audits powered by Lighthouse" }, /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Owner", value: "Spotify" }), /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: "Alpha" })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(CreateAuditContent, null)));
+const CreateAudit = () => /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+  /* @__PURE__ */ jsxs(Header, { title: "Lighthouse", subtitle: "Website audits powered by Lighthouse", children: [
+    /* @__PURE__ */ jsx(HeaderLabel, { label: "Owner", value: "Spotify" }),
+    /* @__PURE__ */ jsx(HeaderLabel, { label: "Lifecycle", value: "Alpha" })
+  ] }),
+  /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(CreateAuditContent, {}) })
+] });
 
 export { CreateAuditContent, CreateAudit as default };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/CreateAudit/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/CreateAudit/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport TextField from '@material-ui/core/TextField';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  FormFactor,\n  LighthouseConfigSettings,\n} from '@backstage-community/plugin-lighthouse-common';\nimport { lighthouseApiRef } from '../../api';\nimport { useQuery } from '../../utils';\nimport LighthouseSupportButton from '../SupportButton';\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  HeaderLabel,\n  InfoCard,\n  Page,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\n\n// TODO(freben): move all of this out of index\n\nconst useStyles = makeStyles(theme => ({\n  input: {\n    minWidth: 300,\n    [theme.breakpoints.down('xs')]: {\n      minWidth: '100%',\n    },\n  },\n  buttonList: {\n    marginLeft: theme.spacing(-1),\n    marginRight: theme.spacing(-1),\n    '& > *': {\n      margin: theme.spacing(1),\n    },\n    [theme.breakpoints.down('xs')]: {\n      marginLeft: 0,\n      marginRight: 0,\n      flexDirection: 'column',\n      '& > *': {\n        width: '100%',\n      },\n    },\n  },\n}));\n\nconst formFactorToScreenEmulationMap: Record<\n  FormFactor,\n  LighthouseConfigSettings['screenEmulation']\n> = {\n  // the default is mobile, so no need to override\n  mobile: undefined,\n  // Values from lighthouse's cli \"desktop\" preset\n  // https://github.com/GoogleChrome/lighthouse/blob/a6738e0033e7e5ca308b97c1c36f298b7d399402/lighthouse-core/config/constants.js#L71-L77\n  desktop: {\n    mobile: false,\n    width: 1350,\n    height: 940,\n    deviceScaleFactor: 1,\n    disabled: false,\n  },\n};\n\nexport const CreateAuditContent = () => {\n  const errorApi = useApi(errorApiRef);\n  const lighthouseApi = useApi(lighthouseApiRef);\n  const classes = useStyles();\n  const query = useQuery();\n  const navigate = useNavigate();\n  const [submitting, setSubmitting] = useState(false);\n  const [url, setUrl] = useState<string>(query.get('url') || '');\n  const [formFactor, setFormFactor] = useState<FormFactor>('mobile');\n\n  const triggerAudit = useCallback(async (): Promise<void> => {\n    setSubmitting(true);\n    try {\n      // TODO use the id from the response to redirect to the audit page for that id when\n      // FAILED and RUNNING audits are supported\n      await lighthouseApi.triggerAudit({\n        url: url.replace(/\\/$/, ''),\n        options: {\n          lighthouseConfig: {\n            settings: {\n              formFactor,\n              emulatedFormFactor: formFactor,\n              screenEmulation: formFactorToScreenEmulationMap[formFactor],\n            },\n          },\n        },\n      });\n      navigate('..');\n    } catch (err) {\n      errorApi.post(err);\n    } finally {\n      setSubmitting(false);\n    }\n  }, [url, formFactor, lighthouseApi, setSubmitting, errorApi, navigate]);\n\n  return (\n    <>\n      <ContentHeader\n        title=\"Trigger a new audit\"\n        description=\"Submitting this form will immediately trigger and store a new Lighthouse audit. Trigger audits to track your website's accessibility, performance, SEO, and best practices over time.\"\n      >\n        <LighthouseSupportButton />\n      </ContentHeader>\n      <Grid container direction=\"column\">\n        <Grid item xs={12} sm={6}>\n          <InfoCard>\n            <form\n              onSubmit={ev => {\n                ev.preventDefault();\n                triggerAudit();\n              }}\n            >\n              <List>\n                <ListItem>\n                  <TextField\n                    name=\"lighthouse-create-audit-url-tf\"\n                    className={classes.input}\n                    label=\"URL\"\n                    placeholder=\"https://spotify.com\"\n                    helperText=\"The target URL for Lighthouse to use.\"\n                    required\n                    disabled={submitting}\n                    onChange={ev => setUrl(ev.target.value)}\n                    value={url}\n                    inputProps={{ 'aria-label': 'URL' }}\n                  />\n                </ListItem>\n                <ListItem>\n                  <TextField\n                    name=\"lighthouse-create-audit-emulated-form-factor-tf\"\n                    className={classes.input}\n                    label=\"Emulated Form Factor\"\n                    helperText=\"Device to simulate when auditing\"\n                    select\n                    required\n                    disabled={submitting}\n                    onChange={ev =>\n                      setFormFactor(ev.target.value as FormFactor)\n                    }\n                    value={formFactor}\n                    inputProps={{ 'aria-label': 'Emulated form factor' }}\n                  >\n                    <MenuItem value=\"mobile\">Mobile</MenuItem>\n                    <MenuItem value=\"desktop\">Desktop</MenuItem>\n                  </TextField>\n                </ListItem>\n                <ListItem className={classes.buttonList}>\n                  <Button\n                    variant=\"outlined\"\n                    color=\"primary\"\n                    onClick={() => navigate('..')}\n                    disabled={submitting}\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    type=\"submit\"\n                    disabled={submitting}\n                  >\n                    Create Audit\n                  </Button>\n                </ListItem>\n              </List>\n            </form>\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n\nconst CreateAudit = () => (\n  <Page themeId=\"tool\">\n    <Header title=\"Lighthouse\" subtitle=\"Website audits powered by Lighthouse\">\n      <HeaderLabel label=\"Owner\" value=\"Spotify\" />\n      <HeaderLabel label=\"Lifecycle\" value=\"Alpha\" />\n    </Header>\n    <Content>\n      <CreateAuditContent />\n    </Content>\n  </Page>\n);\n\nexport default CreateAudit;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/CreateAudit/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport TextField from '@material-ui/core/TextField';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  FormFactor,\n  LighthouseConfigSettings,\n} from '@backstage-community/plugin-lighthouse-common';\nimport { lighthouseApiRef } from '../../api';\nimport { useQuery } from '../../utils';\nimport LighthouseSupportButton from '../SupportButton';\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  HeaderLabel,\n  InfoCard,\n  Page,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\n\n// TODO(freben): move all of this out of index\n\nconst useStyles = makeStyles(theme => ({\n  input: {\n    minWidth: 300,\n    [theme.breakpoints.down('xs')]: {\n      minWidth: '100%',\n    },\n  },\n  buttonList: {\n    marginLeft: theme.spacing(-1),\n    marginRight: theme.spacing(-1),\n    '& > *': {\n      margin: theme.spacing(1),\n    },\n    [theme.breakpoints.down('xs')]: {\n      marginLeft: 0,\n      marginRight: 0,\n      flexDirection: 'column',\n      '& > *': {\n        width: '100%',\n      },\n    },\n  },\n}));\n\nconst formFactorToScreenEmulationMap: Record<\n  FormFactor,\n  LighthouseConfigSettings['screenEmulation']\n> = {\n  // the default is mobile, so no need to override\n  mobile: undefined,\n  // Values from lighthouse's cli \"desktop\" preset\n  // https://github.com/GoogleChrome/lighthouse/blob/a6738e0033e7e5ca308b97c1c36f298b7d399402/lighthouse-core/config/constants.js#L71-L77\n  desktop: {\n    mobile: false,\n    width: 1350,\n    height: 940,\n    deviceScaleFactor: 1,\n    disabled: false,\n  },\n};\n\nexport const CreateAuditContent = () => {\n  const errorApi = useApi(errorApiRef);\n  const lighthouseApi = useApi(lighthouseApiRef);\n  const classes = useStyles();\n  const query = useQuery();\n  const navigate = useNavigate();\n  const [submitting, setSubmitting] = useState(false);\n  const [url, setUrl] = useState<string>(query.get('url') || '');\n  const [formFactor, setFormFactor] = useState<FormFactor>('mobile');\n\n  const triggerAudit = useCallback(async (): Promise<void> => {\n    setSubmitting(true);\n    try {\n      // TODO use the id from the response to redirect to the audit page for that id when\n      // FAILED and RUNNING audits are supported\n      await lighthouseApi.triggerAudit({\n        url: url.replace(/\\/$/, ''),\n        options: {\n          lighthouseConfig: {\n            settings: {\n              formFactor,\n              emulatedFormFactor: formFactor,\n              screenEmulation: formFactorToScreenEmulationMap[formFactor],\n            },\n          },\n        },\n      });\n      navigate('..');\n    } catch (err) {\n      errorApi.post(err);\n    } finally {\n      setSubmitting(false);\n    }\n  }, [url, formFactor, lighthouseApi, setSubmitting, errorApi, navigate]);\n\n  return (\n    <>\n      <ContentHeader\n        title=\"Trigger a new audit\"\n        description=\"Submitting this form will immediately trigger and store a new Lighthouse audit. Trigger audits to track your website's accessibility, performance, SEO, and best practices over time.\"\n      >\n        <LighthouseSupportButton />\n      </ContentHeader>\n      <Grid container direction=\"column\">\n        <Grid item xs={12} sm={6}>\n          <InfoCard>\n            <form\n              onSubmit={ev => {\n                ev.preventDefault();\n                triggerAudit();\n              }}\n            >\n              <List>\n                <ListItem>\n                  <TextField\n                    name=\"lighthouse-create-audit-url-tf\"\n                    className={classes.input}\n                    label=\"URL\"\n                    placeholder=\"https://spotify.com\"\n                    helperText=\"The target URL for Lighthouse to use.\"\n                    required\n                    disabled={submitting}\n                    onChange={ev => setUrl(ev.target.value)}\n                    value={url}\n                    inputProps={{ 'aria-label': 'URL' }}\n                  />\n                </ListItem>\n                <ListItem>\n                  <TextField\n                    name=\"lighthouse-create-audit-emulated-form-factor-tf\"\n                    className={classes.input}\n                    label=\"Emulated Form Factor\"\n                    helperText=\"Device to simulate when auditing\"\n                    select\n                    required\n                    disabled={submitting}\n                    onChange={ev =>\n                      setFormFactor(ev.target.value as FormFactor)\n                    }\n                    value={formFactor}\n                    inputProps={{ 'aria-label': 'Emulated form factor' }}\n                  >\n                    <MenuItem value=\"mobile\">Mobile</MenuItem>\n                    <MenuItem value=\"desktop\">Desktop</MenuItem>\n                  </TextField>\n                </ListItem>\n                <ListItem className={classes.buttonList}>\n                  <Button\n                    variant=\"outlined\"\n                    color=\"primary\"\n                    onClick={() => navigate('..')}\n                    disabled={submitting}\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    type=\"submit\"\n                    disabled={submitting}\n                  >\n                    Create Audit\n                  </Button>\n                </ListItem>\n              </List>\n            </form>\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n\nconst CreateAudit = () => (\n  <Page themeId=\"tool\">\n    <Header title=\"Lighthouse\" subtitle=\"Website audits powered by Lighthouse\">\n      <HeaderLabel label=\"Owner\" value=\"Spotify\" />\n      <HeaderLabel label=\"Lifecycle\" value=\"Alpha\" />\n    </Header>\n    <Content>\n      <CreateAuditContent />\n    </Content>\n  </Page>\n);\n\nexport default CreateAudit;\n"],"names":[],"mappings":"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"}

package/dist/components/Intro/index.esm.js

@@ -1,10 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import useLocalStorage from 'react-use/esm/useLocalStorage';
 import LighthouseSupportButton from '../SupportButton/index.esm.js';
 import { ContentHeader, InfoCard, Link, MarkdownContent } from '@backstage/core-components';
@@ -63,11 +64,11 @@ const useStyles = makeStyles((theme) => ({
 function GettingStartedCard() {
   const classes = useStyles();
   const [value, setValue] = useState(0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     InfoCard,
     {
       title: "Get started",
-      subheader: /* @__PURE__ */ React.createElement(
+      subheader: /* @__PURE__ */ jsxs(
         Tabs,
         {
           value,
@@ -75,24 +76,28 @@ function GettingStartedCard() {
           textColor: "primary",
           onChange: (_ev, newValue) => setValue(newValue),
           "aria-label": "get started tabs",
-          className: classes.tabs
-        },
-        /* @__PURE__ */ React.createElement(Tab, { className: classes.tab, label: "Use cases" }),
-        /* @__PURE__ */ React.createElement(Tab, { className: classes.tab, label: "Setup" })
+          className: classes.tabs,
+          children: [
+            /* @__PURE__ */ jsx(Tab, { className: classes.tab, label: "Use cases" }),
+            /* @__PURE__ */ jsx(Tab, { className: classes.tab, label: "Setup" })
+          ]
+        }
       ),
       divider: true,
-      actions: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+      actions: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row", justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
         Button,
         {
           component: Link,
           to: "https://github.com/spotify/lighthouse-audit-service",
-          size: "small"
-        },
-        "Check out the README"
-      ))))
-    },
-    value === 0 && /* @__PURE__ */ React.createElement(MarkdownContent, { content: USE_CASES }),
-    value === 1 && /* @__PURE__ */ React.createElement(MarkdownContent, { content: SETUP })
+          size: "small",
+          children: "Check out the README"
+        }
+      ) }) }) }),
+      children: [
+        value === 0 && /* @__PURE__ */ jsx(MarkdownContent, { content: USE_CASES }),
+        value === 1 && /* @__PURE__ */ jsx(MarkdownContent, { content: SETUP })
+      ]
+    }
   );
 }
 function LighthouseIntro({ onDismiss = () => {
@@ -103,27 +108,35 @@ function LighthouseIntro({ onDismiss = () => {
     false
   );
   if (dismissed) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Welcome to Lighthouse in Backstage!" }, /* @__PURE__ */ React.createElement(LighthouseSupportButton, null)), /* @__PURE__ */ React.createElement(Grid, { className: classes.content, container: true, spacing: 3, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4 }, /* @__PURE__ */ React.createElement(GettingStartedCard, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 8 }, /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      container: true,
-      justifyContent: "flex-end",
-      alignItems: "flex-end",
-      className: classes.closeButtonContainer
-    },
-    /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.closeButtonItem }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "text",
-        onClick: () => {
-          onDismiss();
-          setDismissed(true);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ContentHeader, { title: "Welcome to Lighthouse in Backstage!", children: /* @__PURE__ */ jsx(LighthouseSupportButton, {}) }),
+    /* @__PURE__ */ jsxs(Grid, { className: classes.content, container: true, spacing: 3, direction: "row", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: /* @__PURE__ */ jsx(GettingStartedCard, {}) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 8, children: /* @__PURE__ */ jsx(
+        Grid,
+        {
+          container: true,
+          justifyContent: "flex-end",
+          alignItems: "flex-end",
+          className: classes.closeButtonContainer,
+          children: /* @__PURE__ */ jsx(Grid, { item: true, className: classes.closeButtonItem, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "text",
+              onClick: () => {
+                onDismiss();
+                setDismissed(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(CloseIcon, {}),
+                " Hide intro"
+              ]
+            }
+          ) })
         }
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null),
-      " Hide intro"
-    ))
-  ))));
+      ) })
+    ] })
+  ] });
 }
 
 export { LIGHTHOUSE_INTRO_LOCAL_STORAGE, LighthouseIntro as default };

package/dist/components/Intro/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/Intro/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { useState } from 'react';\nimport useLocalStorage from 'react-use/esm/useLocalStorage';\nimport LighthouseSupportButton from '../SupportButton';\nimport {\n  ContentHeader,\n  InfoCard,\n  Link,\n  MarkdownContent,\n} from '@backstage/core-components';\n\n// TODO(freben): move all of this out of index\n\nexport const LIGHTHOUSE_INTRO_LOCAL_STORAGE =\n  '@backstage/lighthouse-plugin/intro-dismissed';\n\nconst USE_CASES = `\nGoogle's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites\nis a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.\nAt Spotify, we keep track of Lighthouse audit scores over time to look at trends and overall areas for investment.\n\nThis plugin allows you to generate on-demand Lighthouse audits for websites, and to track the trends for the\ntop-level categories of Lighthouse at a glance.\n\nIn the future, we hope to add support for scheduling audits (which we do internally), as well as allowing\ncustom runs of Lighthouse to be ingested (for auditing sites that require authentication or some session state).\n`;\n\nconst SETUP = `\nTo get started, you will need a running instance of [lighthouse-audit-service](https://github.com/spotify/lighthouse-audit-service).\n_It's likely you will need to enable CORS when running lighthouse-audit-service. Initialize the app\nwith the environment variable \\`LAS_CORS\\` set to \\`true\\`._\n\nWhen you have an instance running that Backstage can hook into, first install the plugin into your app:\n\n\\`\\`\\`sh\n# From your Backstage root directory\nyarn --cwd packages/app add @backstage-community/plugin-lighthouse\n\\`\\`\\`\n\nModify your app routes in \\`App.tsx\\` to include the \\`LighthousePage\\` component exported from the plugin, for example:\n\n\\`\\`\\`tsx\n// At the top imports\nimport { LighthousePage } from '@backstage-community/plugin-lighthouse';\n\n<FlatRoutes>\n  // ...\n  <Route path=\"/lighthouse\" element={<LighthousePage />} />\n  // ...\n</FlatRoutes>;\n\\`\\`\\`\n\nThen configure the \\`lighthouse-audit-service\\` URL in your [\\`app-config.yaml\\`](https://github.com/backstage/backstage/blob/master/app-config.yaml).\n\n\\`\\`\\`yaml\nlighthouse:\n  baseUrl: http://your-service-url\n\\`\\`\\`\n`;\n\nconst useStyles = makeStyles(theme => ({\n  tabs: { marginBottom: -18 },\n  tab: { minWidth: 72, paddingLeft: 1, paddingRight: 1 },\n  content: { marginBottom: theme.spacing(2) },\n  closeButtonContainer: { height: '100%' },\n  closeButtonItem: { paddingBottom: 0 },\n}));\n\nfunction GettingStartedCard() {\n  const classes = useStyles();\n  const [value, setValue] = useState(0);\n  return (\n    <InfoCard\n      title=\"Get started\"\n      subheader={\n        <Tabs\n          value={value}\n          indicatorColor=\"primary\"\n          textColor=\"primary\"\n          onChange={(_ev, newValue: number) => setValue(newValue)}\n          aria-label=\"get started tabs\"\n          className={classes.tabs}\n        >\n          <Tab className={classes.tab} label=\"Use cases\" />\n          <Tab className={classes.tab} label=\"Setup\" />\n        </Tabs>\n      }\n      divider\n      actions={\n        <>\n          <Grid container direction=\"row\" justifyContent=\"flex-end\">\n            <Grid item>\n              <Button\n                component={Link}\n                to=\"https://github.com/spotify/lighthouse-audit-service\"\n                size=\"small\"\n              >\n                Check out the README\n              </Button>\n            </Grid>\n          </Grid>\n        </>\n      }\n    >\n      {value === 0 && <MarkdownContent content={USE_CASES} />}\n      {value === 1 && <MarkdownContent content={SETUP} />}\n    </InfoCard>\n  );\n}\n\nexport interface Props {\n  onDismiss?: () => void;\n}\n\nexport default function LighthouseIntro({ onDismiss = () => {} }: Props) {\n  const classes = useStyles();\n  const [dismissed, setDismissed] = useLocalStorage(\n    LIGHTHOUSE_INTRO_LOCAL_STORAGE,\n    false,\n  );\n\n  if (dismissed) return null;\n\n  return (\n    <>\n      <ContentHeader title=\"Welcome to Lighthouse in Backstage!\">\n        <LighthouseSupportButton />\n      </ContentHeader>\n      <Grid className={classes.content} container spacing={3} direction=\"row\">\n        <Grid item xs={12} sm={6} md={4}>\n          <GettingStartedCard />\n        </Grid>\n        {/* TODO add link and image for blog post here */}\n        {/* <Grid item xs={12} sm={6} md={4}>\n          <InfoCard>Blog</InfoCard>\n        </Grid> */}\n        <Grid item xs={12} sm={6} md={8}>\n          <Grid\n            container\n            justifyContent=\"flex-end\"\n            alignItems=\"flex-end\"\n            className={classes.closeButtonContainer}\n          >\n            <Grid item className={classes.closeButtonItem}>\n              <Button\n                variant=\"text\"\n                onClick={() => {\n                  onDismiss();\n                  setDismissed(true);\n                }}\n              >\n                <CloseIcon /> Hide intro\n              </Button>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/Intro/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport { useState } from 'react';\nimport useLocalStorage from 'react-use/esm/useLocalStorage';\nimport LighthouseSupportButton from '../SupportButton';\nimport {\n  ContentHeader,\n  InfoCard,\n  Link,\n  MarkdownContent,\n} from '@backstage/core-components';\n\n// TODO(freben): move all of this out of index\n\nexport const LIGHTHOUSE_INTRO_LOCAL_STORAGE =\n  '@backstage/lighthouse-plugin/intro-dismissed';\n\nconst USE_CASES = `\nGoogle's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites\nis a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.\nAt Spotify, we keep track of Lighthouse audit scores over time to look at trends and overall areas for investment.\n\nThis plugin allows you to generate on-demand Lighthouse audits for websites, and to track the trends for the\ntop-level categories of Lighthouse at a glance.\n\nIn the future, we hope to add support for scheduling audits (which we do internally), as well as allowing\ncustom runs of Lighthouse to be ingested (for auditing sites that require authentication or some session state).\n`;\n\nconst SETUP = `\nTo get started, you will need a running instance of [lighthouse-audit-service](https://github.com/spotify/lighthouse-audit-service).\n_It's likely you will need to enable CORS when running lighthouse-audit-service. Initialize the app\nwith the environment variable \\`LAS_CORS\\` set to \\`true\\`._\n\nWhen you have an instance running that Backstage can hook into, first install the plugin into your app:\n\n\\`\\`\\`sh\n# From your Backstage root directory\nyarn --cwd packages/app add @backstage-community/plugin-lighthouse\n\\`\\`\\`\n\nModify your app routes in \\`App.tsx\\` to include the \\`LighthousePage\\` component exported from the plugin, for example:\n\n\\`\\`\\`tsx\n// At the top imports\nimport { LighthousePage } from '@backstage-community/plugin-lighthouse';\n\n<FlatRoutes>\n  // ...\n  <Route path=\"/lighthouse\" element={<LighthousePage />} />\n  // ...\n</FlatRoutes>;\n\\`\\`\\`\n\nThen configure the \\`lighthouse-audit-service\\` URL in your [\\`app-config.yaml\\`](https://github.com/backstage/backstage/blob/master/app-config.yaml).\n\n\\`\\`\\`yaml\nlighthouse:\n  baseUrl: http://your-service-url\n\\`\\`\\`\n`;\n\nconst useStyles = makeStyles(theme => ({\n  tabs: { marginBottom: -18 },\n  tab: { minWidth: 72, paddingLeft: 1, paddingRight: 1 },\n  content: { marginBottom: theme.spacing(2) },\n  closeButtonContainer: { height: '100%' },\n  closeButtonItem: { paddingBottom: 0 },\n}));\n\nfunction GettingStartedCard() {\n  const classes = useStyles();\n  const [value, setValue] = useState(0);\n  return (\n    <InfoCard\n      title=\"Get started\"\n      subheader={\n        <Tabs\n          value={value}\n          indicatorColor=\"primary\"\n          textColor=\"primary\"\n          onChange={(_ev, newValue: number) => setValue(newValue)}\n          aria-label=\"get started tabs\"\n          className={classes.tabs}\n        >\n          <Tab className={classes.tab} label=\"Use cases\" />\n          <Tab className={classes.tab} label=\"Setup\" />\n        </Tabs>\n      }\n      divider\n      actions={\n        <>\n          <Grid container direction=\"row\" justifyContent=\"flex-end\">\n            <Grid item>\n              <Button\n                component={Link}\n                to=\"https://github.com/spotify/lighthouse-audit-service\"\n                size=\"small\"\n              >\n                Check out the README\n              </Button>\n            </Grid>\n          </Grid>\n        </>\n      }\n    >\n      {value === 0 && <MarkdownContent content={USE_CASES} />}\n      {value === 1 && <MarkdownContent content={SETUP} />}\n    </InfoCard>\n  );\n}\n\nexport interface Props {\n  onDismiss?: () => void;\n}\n\nexport default function LighthouseIntro({ onDismiss = () => {} }: Props) {\n  const classes = useStyles();\n  const [dismissed, setDismissed] = useLocalStorage(\n    LIGHTHOUSE_INTRO_LOCAL_STORAGE,\n    false,\n  );\n\n  if (dismissed) return null;\n\n  return (\n    <>\n      <ContentHeader title=\"Welcome to Lighthouse in Backstage!\">\n        <LighthouseSupportButton />\n      </ContentHeader>\n      <Grid className={classes.content} container spacing={3} direction=\"row\">\n        <Grid item xs={12} sm={6} md={4}>\n          <GettingStartedCard />\n        </Grid>\n        {/* TODO add link and image for blog post here */}\n        {/* <Grid item xs={12} sm={6} md={4}>\n          <InfoCard>Blog</InfoCard>\n        </Grid> */}\n        <Grid item xs={12} sm={6} md={8}>\n          <Grid\n            container\n            justifyContent=\"flex-end\"\n            alignItems=\"flex-end\"\n            className={classes.closeButtonContainer}\n          >\n            <Grid item className={classes.closeButtonItem}>\n              <Button\n                variant=\"text\"\n                onClick={() => {\n                  onDismiss();\n                  setDismissed(true);\n                }}\n              >\n                <CloseIcon /> Hide intro\n              </Button>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SupportButton/index.esm.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { SupportButton } from '@backstage/core-components';
 
 function LighthouseSupportButton() {
-  return /* @__PURE__ */ React.createElement(SupportButton, null, "Lighthouse audits run for any web domain, stored over time.");
+  return /* @__PURE__ */ jsx(SupportButton, { children: "Lighthouse audits run for any web domain, stored over time." });
 }
 
 export { LighthouseSupportButton as default };

package/dist/components/SupportButton/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/SupportButton/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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';\nimport { SupportButton } from '@backstage/core-components';\n\nexport default function LighthouseSupportButton() {\n  return (\n    <SupportButton>\n      Lighthouse audits run for any web domain, stored over time.\n    </SupportButton>\n  );\n}\n"],"names":[],"mappings":";;;AAkBA,SAAwB,uBAA0B,GAAA;AAChD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,qBAAc,6DAEf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/SupportButton/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\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 { SupportButton } from '@backstage/core-components';\n\nexport default function LighthouseSupportButton() {\n  return (\n    <SupportButton>\n      Lighthouse audits run for any web domain, stored over time.\n    </SupportButton>\n  );\n}\n"],"names":[],"mappings":";;;AAiBA,SAAwB,uBAA0B,GAAA;AAChD,EACE,uBAAA,GAAA,CAAC,iBAAc,QAEf,EAAA,6DAAA,EAAA,CAAA;AAEJ;;;;"}