@backstage/plugin-techdocs 0.15.1 → 1.0.1-next.1

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @backstage/plugin-techdocs
 
+## 1.0.1-next.1
+
+### Patch Changes
+
+- 0152c0de22: Some documentation layout tweaks:
+
+  - drawer toggle margins
+  - code block margins
+  - sidebar drawer width
+  - inner content width
+  - footer link width
+  - sidebar table of contents scroll
+
+- Updated dependencies
+  - @backstage/integration@1.1.0-next.1
+  - @backstage/plugin-catalog-react@1.0.1-next.1
+  - @backstage/integration-react@1.0.1-next.1
+
+## 1.0.1-next.0
+
+### Patch Changes
+
+- fe53fe97d7: Fix permalink scrolling for anchors where the id starts with a number.
+- Updated dependencies
+  - @backstage/catalog-model@1.0.1-next.0
+  - @backstage/plugin-search@0.7.5-next.0
+  - @backstage/integration@1.0.1-next.0
+  - @backstage/plugin-catalog-react@1.0.1-next.0
+  - @backstage/core-components@0.9.3-next.0
+  - @backstage/integration-react@1.0.1-next.0
+
+## 1.0.0
+
+### Major Changes
+
+- b58c70c223: This package has been promoted to v1.0! To understand how this change affects the package, please check out our [versioning policy](https://backstage.io/docs/overview/versioning-policy).
+
+### Minor Changes
+
+- 700d93ff41: Removed deprecated exports, including:
+
+  - deprecated `DocsResultListItem` is now deleted and fully replaced with `TechDocsSearchResultListItem`
+  - deprecated `TechDocsPage` is now deleted and fully replaced with `TechDocsReaderPage`
+  - deprecated `TechDocsPageHeader` is now deleted and fully replaced with `TechDocsReaderPageHeader`
+  - deprecated `TechDocsPageHeaderProps` is now deleted and fully replaced with `TechDocsReaderPageHeaderProps`
+  - deprecated `TechDocsPageRenderFunction` is now deleted and fully replaced with `TechDocsReaderPageRenderFunction`
+  - deprecated config `techdocs.requestUrl` is now deleted and fully replaced with the discoveryApi
+
+### Patch Changes
+
+- a422d7ce5e: chore(deps): bump `@testing-library/react` from 11.2.6 to 12.1.3
+- c689d7a94c: Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`.
+- f24ef7864e: Minor typo fixes
+- 06af9e8d17: Long sidebars will no longer overflow the footer and will properly show a scrollbar when needed.
+- Updated dependencies
+  - @backstage/core-components@0.9.2
+  - @backstage/core-plugin-api@1.0.0
+  - @backstage/integration-react@1.0.0
+  - @backstage/plugin-catalog-react@1.0.0
+  - @backstage/plugin-search@0.7.4
+  - @backstage/catalog-model@1.0.0
+  - @backstage/integration@1.0.0
+  - @backstage/config@1.0.0
+  - @backstage/errors@1.0.0
+
 ## 0.15.1
 
 ### Patch Changes

package/config.d.ts

@@ -33,13 +33,6 @@ export interface Config {
      */
     legacyUseCaseSensitiveTripletPaths?: boolean;
 
-    /**
-     * @example http://localhost:7007/api/techdocs
-     * @visibility frontend
-     * @deprecated
-     */
-    requestUrl?: string;
-
     sanitizer?: {
       /**
        * Allows iframe tag only for listed hosts

package/dist/esm/{TechDocsCustomHome-a4f542cd.esm.js → TechDocsCustomHome-a2958b1a.esm.js}

@@ -32,7 +32,6 @@ import '@material-ui/icons/Share';
 import '@material-ui/styles';
 import '@material-ui/icons/Star';
 import '@material-ui/icons/StarBorder';
-import '@backstage/plugin-catalog';
 
 const panels = {
   DocsTable,
@@ -129,4 +128,4 @@ const TechDocsCustomHome = (props) => {
 };
 
 export { TechDocsCustomHome };
-//# sourceMappingURL=TechDocsCustomHome-a4f542cd.esm.js.map
+//# sourceMappingURL=TechDocsCustomHome-a2958b1a.esm.js.map

package/dist/esm/{TechDocsCustomHome-a4f542cd.esm.js.map → TechDocsCustomHome-a2958b1a.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TechDocsCustomHome-a4f542cd.esm.js","sources":["../../src/home/components/TechDocsCustomHome.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 React, { useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport { makeStyles } from '@material-ui/core';\nimport { CSSProperties } from '@material-ui/styles';\nimport {\n  CATALOG_FILTER_EXISTS,\n  catalogApiRef,\n  CatalogApi,\n  useEntityOwnership,\n} from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { DocsTable } from './Tables';\nimport { DocsCardGrid } from './Grids';\nimport { TechDocsPageWrapper } from './TechDocsPageWrapper';\n\nimport {\n  CodeSnippet,\n  Content,\n  HeaderTabs,\n  Progress,\n  WarningPanel,\n  SupportButton,\n  ContentHeader,\n} from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nconst panels = {\n  DocsTable: DocsTable,\n  DocsCardGrid: DocsCardGrid,\n};\n\n/**\n * Available panel types\n *\n * @public\n */\nexport type PanelType = 'DocsCardGrid' | 'DocsTable';\n\n/**\n * Type representing a TechDocsCustomHome panel.\n *\n * @public\n */\nexport interface PanelConfig {\n  title: string;\n  description: string;\n  panelType: PanelType;\n  panelCSS?: CSSProperties;\n  filterPredicate: ((entity: Entity) => boolean) | string;\n}\n\n/**\n * Type representing a TechDocsCustomHome tab.\n *\n * @public\n */\nexport interface TabConfig {\n  label: string;\n  panels: PanelConfig[];\n}\n\n/**\n * Type representing a list of TechDocsCustomHome tabs.\n *\n * @public\n */\nexport type TabsConfig = TabConfig[];\n\nconst CustomPanel = ({\n  config,\n  entities,\n  index,\n}: {\n  config: PanelConfig;\n  entities: Entity[];\n  index: number;\n}) => {\n  const useStyles = makeStyles({\n    panelContainer: {\n      marginBottom: '2rem',\n      ...(config.panelCSS ? config.panelCSS : {}),\n    },\n  });\n  const classes = useStyles();\n  const { loading: loadingOwnership, isOwnedEntity } = useEntityOwnership();\n\n  const Panel = panels[config.panelType];\n\n  const shownEntities = entities.filter(entity => {\n    if (config.filterPredicate === 'ownedByUser') {\n      if (loadingOwnership) {\n        return false;\n      }\n      return isOwnedEntity(entity);\n    }\n\n    return (\n      typeof config.filterPredicate === 'function' &&\n      config.filterPredicate(entity)\n    );\n  });\n\n  return (\n    <>\n      <ContentHeader title={config.title} description={config.description}>\n        {index === 0 ? (\n          <SupportButton>\n            Discover documentation in your ecosystem.\n          </SupportButton>\n        ) : null}\n      </ContentHeader>\n      <div className={classes.panelContainer}>\n        <Panel data-testid=\"techdocs-custom-panel\" entities={shownEntities} />\n      </div>\n    </>\n  );\n};\n\n/**\n * Props for {@link TechDocsCustomHome}\n *\n * @public\n */\nexport type TechDocsCustomHomeProps = {\n  tabsConfig: TabsConfig;\n};\n\nexport const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {\n  const { tabsConfig } = props;\n  const [selectedTab, setSelectedTab] = useState<number>(0);\n  const catalogApi: CatalogApi = useApi(catalogApiRef);\n\n  const {\n    value: entities,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const response = await catalogApi.getEntities({\n      filter: {\n        'metadata.annotations.backstage.io/techdocs-ref': CATALOG_FILTER_EXISTS,\n      },\n      fields: [\n        'apiVersion',\n        'kind',\n        'metadata',\n        'relations',\n        'spec.owner',\n        'spec.type',\n      ],\n    });\n    return response.items.filter((entity: Entity) => {\n      return !!entity.metadata.annotations?.['backstage.io/techdocs-ref'];\n    });\n  });\n\n  const currentTabConfig = tabsConfig[selectedTab];\n\n  if (loading) {\n    return (\n      <TechDocsPageWrapper>\n        <Content>\n          <Progress />\n        </Content>\n      </TechDocsPageWrapper>\n    );\n  }\n\n  if (error) {\n    return (\n      <TechDocsPageWrapper>\n        <Content>\n          <WarningPanel\n            severity=\"error\"\n            title=\"Could not load available documentation.\"\n          >\n            <CodeSnippet language=\"text\" text={error.toString()} />\n          </WarningPanel>\n        </Content>\n      </TechDocsPageWrapper>\n    );\n  }\n\n  return (\n    <TechDocsPageWrapper>\n      <HeaderTabs\n        selectedIndex={selectedTab}\n        onChange={index => setSelectedTab(index)}\n        tabs={tabsConfig.map(({ label }, index) => ({\n          id: index.toString(),\n          label,\n        }))}\n      />\n      <Content data-testid=\"techdocs-content\">\n        {currentTabConfig.panels.map((config, index) => (\n          <CustomPanel\n            key={index}\n            config={config}\n            entities={!!entities ? entities : []}\n            index={index}\n          />\n        ))}\n      </Content>\n    </TechDocsPageWrapper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA;AAwCF,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,MAKI;AACJ,QAAM,YAAY,WAAW;AAAA,IAC3B,gBAAgB;AAAA,MACd,cAAc;AAAA,SACV,OAAO,WAAW,OAAO,WAAW;AAAA;AAAA;AAG5C,QAAM,UAAU;AAChB,QAAM,EAAE,SAAS,kBAAkB,kBAAkB;AAErD,QAAM,QAAQ,OAAO,OAAO;AAE5B,QAAM,gBAAgB,SAAS,OAAO,YAAU;AAC9C,QAAI,OAAO,oBAAoB,eAAe;AAC5C,UAAI,kBAAkB;AACpB,eAAO;AAAA;AAET,aAAO,cAAc;AAAA;AAGvB,WACE,OAAO,OAAO,oBAAoB,cAClC,OAAO,gBAAgB;AAAA;AAI3B,uGAEK,eAAD;AAAA,IAAe,OAAO,OAAO;AAAA,IAAO,aAAa,OAAO;AAAA,KACrD,UAAU,wCACR,eAAD,MAAe,+CAGb,2CAEL,OAAD;AAAA,IAAK,WAAW,QAAQ;AAAA,yCACrB,OAAD;AAAA,IAAO,eAAY;AAAA,IAAwB,UAAU;AAAA;AAAA;MAehD,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,eAAe;AACvB,QAAM,CAAC,aAAa,kBAAkB,SAAiB;AACvD,QAAM,aAAyB,OAAO;AAEtC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,MACE,SAAS,YAAY;AACvB,UAAM,WAAW,MAAM,WAAW,YAAY;AAAA,MAC5C,QAAQ;AAAA,QACN,kDAAkD;AAAA;AAAA,MAEpD,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAGJ,WAAO,SAAS,MAAM,OAAO,CAAC,WAAmB;AAtKrD;AAuKM,aAAO,CAAC,eAAQ,SAAS,gBAAhB,mBAA8B;AAAA;AAAA;AAI3C,QAAM,mBAAmB,WAAW;AAEpC,MAAI,SAAS;AACX,+CACG,qBAAD,0CACG,SAAD,0CACG,UAAD;AAAA;AAMR,MAAI,OAAO;AACT,+CACG,qBAAD,0CACG,SAAD,0CACG,cAAD;AAAA,MACE,UAAS;AAAA,MACT,OAAM;AAAA,2CAEL,aAAD;AAAA,MAAa,UAAS;AAAA,MAAO,MAAM,MAAM;AAAA;AAAA;AAOnD,6CACG,qBAAD,0CACG,YAAD;AAAA,IACE,eAAe;AAAA,IACf,UAAU,WAAS,eAAe;AAAA,IAClC,MAAM,WAAW,IAAI,CAAC,EAAE,SAAS;AAAW,MAC1C,IAAI,MAAM;AAAA,MACV;AAAA;AAAA,0CAGH,SAAD;AAAA,IAAS,eAAY;AAAA,KAClB,iBAAiB,OAAO,IAAI,CAAC,QAAQ,8CACnC,aAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,UAAU,CAAC,CAAC,WAAW,WAAW;AAAA,IAClC;AAAA;AAAA;;;;"}
+{"version":3,"file":"TechDocsCustomHome-a2958b1a.esm.js","sources":["../../src/home/components/TechDocsCustomHome.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 React, { useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport { makeStyles } from '@material-ui/core';\nimport { CSSProperties } from '@material-ui/styles';\nimport {\n  CATALOG_FILTER_EXISTS,\n  catalogApiRef,\n  CatalogApi,\n  useEntityOwnership,\n} from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { DocsTable } from './Tables';\nimport { DocsCardGrid } from './Grids';\nimport { TechDocsPageWrapper } from './TechDocsPageWrapper';\n\nimport {\n  CodeSnippet,\n  Content,\n  HeaderTabs,\n  Progress,\n  WarningPanel,\n  SupportButton,\n  ContentHeader,\n} from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nconst panels = {\n  DocsTable: DocsTable,\n  DocsCardGrid: DocsCardGrid,\n};\n\n/**\n * Available panel types\n *\n * @public\n */\nexport type PanelType = 'DocsCardGrid' | 'DocsTable';\n\n/**\n * Type representing a TechDocsCustomHome panel.\n *\n * @public\n */\nexport interface PanelConfig {\n  title: string;\n  description: string;\n  panelType: PanelType;\n  panelCSS?: CSSProperties;\n  filterPredicate: ((entity: Entity) => boolean) | string;\n}\n\n/**\n * Type representing a TechDocsCustomHome tab.\n *\n * @public\n */\nexport interface TabConfig {\n  label: string;\n  panels: PanelConfig[];\n}\n\n/**\n * Type representing a list of TechDocsCustomHome tabs.\n *\n * @public\n */\nexport type TabsConfig = TabConfig[];\n\nconst CustomPanel = ({\n  config,\n  entities,\n  index,\n}: {\n  config: PanelConfig;\n  entities: Entity[];\n  index: number;\n}) => {\n  const useStyles = makeStyles({\n    panelContainer: {\n      marginBottom: '2rem',\n      ...(config.panelCSS ? config.panelCSS : {}),\n    },\n  });\n  const classes = useStyles();\n  const { loading: loadingOwnership, isOwnedEntity } = useEntityOwnership();\n\n  const Panel = panels[config.panelType];\n\n  const shownEntities = entities.filter(entity => {\n    if (config.filterPredicate === 'ownedByUser') {\n      if (loadingOwnership) {\n        return false;\n      }\n      return isOwnedEntity(entity);\n    }\n\n    return (\n      typeof config.filterPredicate === 'function' &&\n      config.filterPredicate(entity)\n    );\n  });\n\n  return (\n    <>\n      <ContentHeader title={config.title} description={config.description}>\n        {index === 0 ? (\n          <SupportButton>\n            Discover documentation in your ecosystem.\n          </SupportButton>\n        ) : null}\n      </ContentHeader>\n      <div className={classes.panelContainer}>\n        <Panel data-testid=\"techdocs-custom-panel\" entities={shownEntities} />\n      </div>\n    </>\n  );\n};\n\n/**\n * Props for {@link TechDocsCustomHome}\n *\n * @public\n */\nexport type TechDocsCustomHomeProps = {\n  tabsConfig: TabsConfig;\n};\n\nexport const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {\n  const { tabsConfig } = props;\n  const [selectedTab, setSelectedTab] = useState<number>(0);\n  const catalogApi: CatalogApi = useApi(catalogApiRef);\n\n  const {\n    value: entities,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const response = await catalogApi.getEntities({\n      filter: {\n        'metadata.annotations.backstage.io/techdocs-ref': CATALOG_FILTER_EXISTS,\n      },\n      fields: [\n        'apiVersion',\n        'kind',\n        'metadata',\n        'relations',\n        'spec.owner',\n        'spec.type',\n      ],\n    });\n    return response.items.filter((entity: Entity) => {\n      return !!entity.metadata.annotations?.['backstage.io/techdocs-ref'];\n    });\n  });\n\n  const currentTabConfig = tabsConfig[selectedTab];\n\n  if (loading) {\n    return (\n      <TechDocsPageWrapper>\n        <Content>\n          <Progress />\n        </Content>\n      </TechDocsPageWrapper>\n    );\n  }\n\n  if (error) {\n    return (\n      <TechDocsPageWrapper>\n        <Content>\n          <WarningPanel\n            severity=\"error\"\n            title=\"Could not load available documentation.\"\n          >\n            <CodeSnippet language=\"text\" text={error.toString()} />\n          </WarningPanel>\n        </Content>\n      </TechDocsPageWrapper>\n    );\n  }\n\n  return (\n    <TechDocsPageWrapper>\n      <HeaderTabs\n        selectedIndex={selectedTab}\n        onChange={index => setSelectedTab(index)}\n        tabs={tabsConfig.map(({ label }, index) => ({\n          id: index.toString(),\n          label,\n        }))}\n      />\n      <Content data-testid=\"techdocs-content\">\n        {currentTabConfig.panels.map((config, index) => (\n          <CustomPanel\n            key={index}\n            config={config}\n            entities={!!entities ? entities : []}\n            index={index}\n          />\n        ))}\n      </Content>\n    </TechDocsPageWrapper>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -53,9 +53,6 @@ declare type SyncResult = 'cached' | 'updated';
  * @public
  */
 interface TechDocsStorageApi {
-    /**
-     * Set to techdocs.requestUrl as the URL for techdocs-backend API.
-     */
     getApiOrigin(): Promise<string>;
     getStorageUrl(): Promise<string>;
     getBuilder(): Promise<string>;
@@ -69,9 +66,6 @@ interface TechDocsStorageApi {
  * @public
  */
 interface TechDocsApi {
-    /**
-     * Set to techdocs.requestUrl as the URL for techdocs-backend API.
-     */
     getApiOrigin(): Promise<string>;
     getTechDocsMetadata(entityId: CompoundEntityRef): Promise<TechDocsMetadata>;
     getEntityMetadata(entityId: CompoundEntityRef): Promise<TechDocsEntityMetadata>;
@@ -188,16 +182,6 @@ declare type TechDocsReaderPageRenderFunction = ({ techdocsMetadataValue, entity
 declare type TechDocsReaderPageProps = {
     children?: TechDocsReaderPageRenderFunction | React.ReactNode;
 };
-/**
- * @public
- * @deprecated use {@link TechDocsReaderPage} instead
- */
-declare const TechDocsPage: (props: TechDocsReaderPageProps) => JSX.Element;
-/**
- * @public
- * @deprecated use {@link TechDocsReaderPageRenderFunction} instead
- */
-declare type TechDocsPageRenderFunction = TechDocsReaderPageRenderFunction;
 
 /**
  * Props for {@link TechDocsReaderPageHeader}
@@ -215,16 +199,6 @@ declare type TechDocsReaderPageHeaderProps = PropsWithChildren<{
  * @public
  */
 declare const TechDocsReaderPageHeader: (props: TechDocsReaderPageHeaderProps) => JSX.Element;
-/**
- * @public
- * @deprecated use {@link TechDocsReaderPageHeader} instead
- */
-declare const TechDocsPageHeader: (props: TechDocsReaderPageHeaderProps) => JSX.Element;
-/**
- * @public
- * @deprecated use {@link TechDocsReaderPageHeader} instead
- */
-declare type TechDocsPageHeaderProps = TechDocsReaderPageHeaderProps;
 
 /**
  * Props for {@link TechDocsSearchResultListItem}.
@@ -244,11 +218,6 @@ declare type TechDocsSearchResultListItemProps = {
  * @public
  */
 declare const TechDocsSearchResultListItem: (props: TechDocsSearchResultListItemProps) => JSX.Element;
-/**
- * @public
- * @deprecated use {@link TechDocsSearchResultListItem} instead
- */
-declare const DocsResultListItem: (props: TechDocsSearchResultListItemProps) => JSX.Element;
 
 /**
  * Props for {@link TechDocsSearch}
@@ -526,4 +495,4 @@ declare const Router: () => JSX.Element;
  */
 declare const EmbeddedDocsRouter: () => JSX.Element;
 
-export { DefaultTechDocsHome, DefaultTechDocsHomeProps, DocsCardGrid, DocsCardGridProps, DocsResultListItem, DocsTable, DocsTableProps, DocsTableRow, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityListDocsTableProps, EntityTechdocsContent, PanelConfig, PanelType, Reader, ReaderProps, Router, SyncResult, TabConfig, TabsConfig, TechDocsApi, TechDocsClient, TechDocsCustomHome, TechDocsCustomHomeProps, TechDocsEntityMetadata, TechDocsIndexPage, TechDocsMetadata, TechDocsPage, TechDocsPageHeader, TechDocsPageHeaderProps, TechDocsPageRenderFunction, TechDocsPageWrapper, TechDocsPageWrapperProps, TechDocsPicker, TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsReaderPageHeaderProps, TechDocsReaderPageProps, TechDocsReaderPageRenderFunction, TechDocsSearch, TechDocsSearchProps, TechDocsSearchResultListItem, TechDocsSearchResultListItemProps, TechDocsStorageApi, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef };
+export { DefaultTechDocsHome, DefaultTechDocsHomeProps, DocsCardGrid, DocsCardGridProps, DocsTable, DocsTableProps, DocsTableRow, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityListDocsTableProps, EntityTechdocsContent, PanelConfig, PanelType, Reader, ReaderProps, Router, SyncResult, TabConfig, TabsConfig, TechDocsApi, TechDocsClient, TechDocsCustomHome, TechDocsCustomHomeProps, TechDocsEntityMetadata, TechDocsIndexPage, TechDocsMetadata, TechDocsPageWrapper, TechDocsPageWrapperProps, TechDocsPicker, TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsReaderPageHeaderProps, TechDocsReaderPageProps, TechDocsReaderPageRenderFunction, TechDocsSearch, TechDocsSearchProps, TechDocsSearchResultListItem, TechDocsSearchResultListItemProps, TechDocsStorageApi, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef };

package/dist/index.esm.js

@@ -1,11 +1,11 @@
-import { createApiRef, useApi, configApiRef, createRouteRef, useRouteRef, useApp, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, configApiRef, createRouteRef, useRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension, useApp } from '@backstage/core-plugin-api';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
 import React, { useState, useCallback, useEffect, useReducer, useRef, useMemo, createContext, useContext } from 'react';
 import { useNavigate as useNavigate$1, useParams, Routes, Route } from 'react-router-dom';
 import { withStyles, Tooltip, ThemeProvider, SvgIcon, makeStyles, ListItemText, ListItem, Divider, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button, Drawer, Grid, Typography, useTheme, lighten, alpha, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
-import { Link, LogViewer, ErrorPage, Progress, SidebarPinStateContext, HeaderLabel, Header, Page, Content, ItemCardGrid, ItemCardHeader, Button as Button$1, WarningPanel, CodeSnippet, SubvalueCell, Table, EmptyState, PageWithHeader, ContentHeader, SupportButton, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { Link, LogViewer, ErrorPage, Progress, SidebarPinStateContext, sidebarConfig, HeaderLabel, Header, ItemCardGrid, ItemCardHeader, Button as Button$1, WarningPanel, CodeSnippet, SubvalueCell, Table, EmptyState, PageWithHeader, Content, ContentHeader, SupportButton, Page, MissingAnnotationEmptyState } from '@backstage/core-components';
 import { replaceGitHubUrlType } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
 import ReactDOM from 'react-dom';
@@ -24,14 +24,13 @@ import useAsync from 'react-use/lib/useAsync';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import CodeIcon from '@material-ui/icons/Code';
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
-import { getEntityRelations, EntityRefLink, EntityRefLinks, useEntityList, humanizeEntityRef, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, useEntity } from '@backstage/plugin-catalog-react';
+import { getEntityRelations, EntityRefLink, EntityRefLinks, useEntityList, humanizeEntityRef, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, CatalogFilterLayout, UserListPicker, EntityOwnerPicker, EntityTagPicker, useEntity } from '@backstage/plugin-catalog-react';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 import { capitalize } from 'lodash';
 import ShareIcon from '@material-ui/icons/Share';
 import { withStyles as withStyles$1 } from '@material-ui/styles';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
-import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
 
 const techdocsStorageApiRef = createApiRef({
   id: "plugin.techdocs.storageservice"
@@ -47,8 +46,7 @@ class TechDocsClient {
     this.fetchApi = options.fetchApi;
   }
   async getApiOrigin() {
-    var _a;
-    return (_a = this.configApi.getOptionalString("techdocs.requestUrl")) != null ? _a : await this.discoveryApi.getBaseUrl("techdocs");
+    return await this.discoveryApi.getBaseUrl("techdocs");
   }
   async getTechDocsMetadata(entityId) {
     const { kind, namespace, name } = entityId;
@@ -79,8 +77,7 @@ class TechDocsStorageClient {
     this.fetchApi = options.fetchApi;
   }
   async getApiOrigin() {
-    var _a;
-    return (_a = this.configApi.getOptionalString("techdocs.requestUrl")) != null ? _a : await this.discoveryApi.getBaseUrl("techdocs");
+    return await this.discoveryApi.getBaseUrl("techdocs");
   }
   async getStorageUrl() {
     var _a;
@@ -246,10 +243,11 @@ const addSidebarToggle = () => {
     }
     const toggleSidebar = mkdocsToggleSidebar.cloneNode();
     ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
-    toggleSidebar.style.paddingLeft = "5px";
-    toggleSidebar.classList.add("md-content__button");
-    toggleSidebar.title = "Toggle Sidebar";
     toggleSidebar.id = "toggle-sidebar";
+    toggleSidebar.title = "Toggle Sidebar";
+    toggleSidebar.classList.add("md-content__button");
+    toggleSidebar.style.setProperty("padding", "0 0 0 5px");
+    toggleSidebar.style.setProperty("margin", "0.4rem 0 0.4rem 0.4rem");
     article == null ? void 0 : article.prepend(toggleSidebar);
     return dom;
   };
@@ -467,7 +465,7 @@ const scrollIntoAnchor = () => {
       var _a;
       if (window.location.hash) {
         const hash = window.location.hash.slice(1);
-        (_a = dom == null ? void 0 : dom.querySelector(`#${hash}`)) == null ? void 0 : _a.scrollIntoView();
+        (_a = dom == null ? void 0 : dom.querySelector(`[id="${hash}"]`)) == null ? void 0 : _a.scrollIntoView();
       }
     }, 200);
     return dom;
@@ -532,7 +530,6 @@ const TechDocsSearchResultListItem = (props) => {
   })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
 };
-const DocsResultListItem = TechDocsSearchResultListItem;
 
 const useStyles$2 = makeStyles({
   root: {
@@ -1214,16 +1211,42 @@ const useTechDocsReaderDom = (entityRef) => {
             }
 
             .md-sidebar {
-              height: calc(100% - 100px);
+              bottom: 75px;
               position: fixed;
               width: 16rem;
+              overflow-y: auto;
+              overflow-x: hidden;
+              scrollbar-color: rgb(193, 193, 193) #eee;
+              scrollbar-width: thin;
+            }
+            .md-sidebar::-webkit-scrollbar {
+              width: 5px;
+            }
+            .md-sidebar::-webkit-scrollbar-button {
+              width: 5px;
+              height: 5px;
             }
-            .md-sidebar .md-sidebar__scrollwrap {
-              max-height: calc(100% - 100px);
+            .md-sidebar::-webkit-scrollbar-track {
+              background: #eee;
+              border: 1 px solid rgb(250, 250, 250);
+              box-shadow: 0px 0px 3px #dfdfdf inset;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb {
+              width: 5px;
+              background: rgb(193, 193, 193);
+              border: transparent;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb:hover {
+              background: rgb(125, 125, 125);
             }
             .md-sidebar--secondary {
               right: ${theme.spacing(3)}px;
             }
+            .md-sidebar__scrollwrap {
+              overflow: unset !important;
+            }
 
             .md-content {
               max-width: calc(100% - 16rem * 2);
@@ -1238,7 +1261,7 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-footer__title {
               background-color: unset;
             }
-            .md-footer-nav__link {
+            .md-footer__link, .md-footer-nav__link {
               width: 16rem;
             }
 
@@ -1246,6 +1269,12 @@ const useTechDocsReaderDom = (entityRef) => {
               background-color: unset;
             }
 
+            @media screen and (min-width: 76.25em) {
+              .md-sidebar {
+                height: auto;
+              }
+            }
+            
             @media screen and (max-width: 76.1875em) {
               .md-nav {
                 transition: none !important;
@@ -1296,18 +1325,28 @@ const useTechDocsReaderDom = (entityRef) => {
                 height: 100%;
               }
               .md-sidebar--primary {
-                width: 12.1rem !important;
+                width: 16rem !important;
                 z-index: 200;
-                left: ${isPinned ? "calc(-12.1rem + 242px)" : "calc(-12.1rem + 72px)"} !important;
+                left: ${isPinned ? `calc(-16rem + ${sidebarConfig.drawerWidthOpen}px)` : `calc(-16rem + ${sidebarConfig.drawerWidthClosed}px)`} !important;
               }
               .md-sidebar--secondary:not([hidden]) {
                 display: none;
               }
+              [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
+                transform: translateX(16rem);
+              }
 
               .md-content {
                 max-width: 100%;
                 margin-left: 0;
               }
+              .md-content__inner {
+                margin: 0;
+              }
+              .md-content__inner .highlighttable {
+                max-width: 100%;
+                margin: 1em 0;
+              }
 
               .md-header__button {
                 margin: 0.4rem 0;
@@ -1323,7 +1362,7 @@ const useTechDocsReaderDom = (entityRef) => {
                 position: static;
                 padding-left: 0;
               }
-              .md-footer-nav__link {
+              .md-footer__link, .md-footer-nav__link {
                 /* footer links begin to overlap at small sizes without setting width */
                 width: 50%;
               }
@@ -1331,8 +1370,11 @@ const useTechDocsReaderDom = (entityRef) => {
 
             @media screen and (max-width: 600px) {
               .md-sidebar--primary {
-                left: -12.1rem !important;
-                width: 12.1rem;
+                left: -16rem !important;
+                width: 16rem;
+              }
+              .md-sidebar--primary .md-sidebar__scrollwrap {
+                bottom: ${sidebarConfig.mobileSidebarHeight}px;
               }
             }
           `
@@ -1435,7 +1477,7 @@ const useTechDocsReaderDom = (entityRef) => {
             .highlight .md-clipboard:after {
               content: unset;
             }
-
+            
             .highlight .nx {
               color: ${isDarkTheme ? "#ff53a3" : "#ec407a"};
             }
@@ -1669,90 +1711,6 @@ const TechDocsReaderPageHeader = (props) => {
     typeLink: docsRootLink
   }, labels, children);
 };
-const TechDocsPageHeader = TechDocsReaderPageHeader;
-
-const LegacyTechDocsPage = () => {
-  const [documentReady, setDocumentReady] = useState(false);
-  const { namespace, kind, name } = useParams();
-  const techdocsApi = useApi(techdocsApiRef);
-  const { value: techdocsMetadataValue } = useAsync(() => {
-    if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
-    }
-    return Promise.resolve(void 0);
-  }, [kind, namespace, name, techdocsApi, documentReady]);
-  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
-    return techdocsApi.getEntityMetadata({ kind, namespace, name });
-  }, [kind, namespace, name, techdocsApi]);
-  const onReady = useCallback(() => {
-    setDocumentReady(true);
-  }, [setDocumentReady]);
-  if (entityMetadataError) {
-    return /* @__PURE__ */ React.createElement(TechDocsNotFound, {
-      errorMessage: entityMetadataError.message
-    });
-  }
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "documentation"
-  }, /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, {
-    techDocsMetadata: techdocsMetadataValue,
-    entityMetadata: entityMetadataValue,
-    entityRef: {
-      kind,
-      namespace,
-      name
-    }
-  }), /* @__PURE__ */ React.createElement(Content, {
-    "data-testid": "techdocs-content"
-  }, /* @__PURE__ */ React.createElement(Reader, {
-    onReady,
-    entityRef: {
-      kind,
-      namespace,
-      name
-    }
-  })));
-};
-
-const TechDocsReaderPage$1 = (props) => {
-  const { children } = props;
-  const { NotFoundErrorPage } = useApp().getComponents();
-  const outlet = useOutlet();
-  const [documentReady, setDocumentReady] = useState(false);
-  const { namespace, kind, name } = useParams();
-  const techdocsApi = useApi(techdocsApiRef);
-  const { value: techdocsMetadataValue } = useAsync(() => {
-    if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
-    }
-    return Promise.resolve(void 0);
-  }, [kind, namespace, name, techdocsApi, documentReady]);
-  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
-    return techdocsApi.getEntityMetadata({ kind, namespace, name });
-  }, [kind, namespace, name, techdocsApi]);
-  const onReady = useCallback(() => {
-    setDocumentReady(true);
-  }, [setDocumentReady]);
-  if (entityMetadataError)
-    return /* @__PURE__ */ React.createElement(NotFoundErrorPage, null);
-  if (!children)
-    return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsPage, null);
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "documentation"
-  }, children instanceof Function ? children({
-    techdocsMetadataValue,
-    entityMetadataValue,
-    entityRef: { kind, namespace, name },
-    onReady
-  }) : children);
-};
-const TechDocsPage = TechDocsReaderPage$1;
-
-var TechDocsReaderPage$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsReaderPage: TechDocsReaderPage$1,
-  TechDocsPage: TechDocsPage
-});
 
 function toLowerMaybe(str, config) {
   return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
@@ -1993,9 +1951,9 @@ const DefaultTechDocsHome = (props) => {
   const { initialFilter = "all", columns, actions } = props;
   return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: ""
-  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React.createElement(FilterContainer, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
+  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
     initialFilter
-  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
+  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
     actions,
     columns
   }))))));
@@ -2051,7 +2009,7 @@ const EntityTechdocsContent = techdocsPlugin.provide(createRoutableExtension({
 }));
 const TechDocsCustomHome = techdocsPlugin.provide(createRoutableExtension({
   name: "TechDocsCustomHome",
-  component: () => import('./esm/TechDocsCustomHome-a4f542cd.esm.js').then((m) => m.TechDocsCustomHome),
+  component: () => import('./esm/TechDocsCustomHome-a2958b1a.esm.js').then((m) => m.TechDocsCustomHome),
   mountPoint: rootRouteRef
 }));
 const TechDocsIndexPage$2 = techdocsPlugin.provide(createRoutableExtension({
@@ -2059,9 +2017,9 @@ const TechDocsIndexPage$2 = techdocsPlugin.provide(createRoutableExtension({
   component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then((m) => m.TechDocsIndexPage),
   mountPoint: rootRouteRef
 }));
-const TechDocsReaderPage = techdocsPlugin.provide(createRoutableExtension({
+const TechDocsReaderPage$2 = techdocsPlugin.provide(createRoutableExtension({
   name: "TechDocsReaderPage",
-  component: () => Promise.resolve().then(function () { return TechDocsReaderPage$2; }).then((m) => m.TechDocsReaderPage),
+  component: () => Promise.resolve().then(function () { return TechDocsReaderPage$1; }).then((m) => m.TechDocsReaderPage),
   mountPoint: rootDocsRouteRef
 }));
 
@@ -2075,6 +2033,63 @@ var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
   TechDocsIndexPage: TechDocsIndexPage
 });
 
+const TechDocsReaderPage = (props) => {
+  const { children } = props;
+  const { NotFoundErrorPage } = useApp().getComponents();
+  const outlet = useOutlet();
+  const [documentReady, setDocumentReady] = useState(false);
+  const { namespace, kind, name } = useParams();
+  const techdocsApi = useApi(techdocsApiRef);
+  const { value: techdocsMetadataValue } = useAsync(() => {
+    if (documentReady) {
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
+    }
+    return Promise.resolve(void 0);
+  }, [kind, namespace, name, techdocsApi, documentReady]);
+  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
+    return techdocsApi.getEntityMetadata({ kind, namespace, name });
+  }, [kind, namespace, name, techdocsApi]);
+  const onReady = useCallback(() => {
+    setDocumentReady(true);
+  }, [setDocumentReady]);
+  if (entityMetadataError)
+    return /* @__PURE__ */ React.createElement(NotFoundErrorPage, null);
+  if (!children)
+    return outlet || /* @__PURE__ */ React.createElement(Page, {
+      themeId: "documentation"
+    }, /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, {
+      techDocsMetadata: techdocsMetadataValue,
+      entityMetadata: entityMetadataValue,
+      entityRef: {
+        kind,
+        namespace,
+        name
+      }
+    }), /* @__PURE__ */ React.createElement(Content, {
+      "data-testid": "techdocs-content"
+    }, /* @__PURE__ */ React.createElement(Reader, {
+      onReady,
+      entityRef: {
+        kind,
+        namespace,
+        name
+      }
+    })));
+  return /* @__PURE__ */ React.createElement(Page, {
+    themeId: "documentation"
+  }, children instanceof Function ? children({
+    techdocsMetadataValue,
+    entityMetadataValue,
+    entityRef: { kind, namespace, name },
+    onReady
+  }) : children);
+};
+
+var TechDocsReaderPage$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  TechDocsReaderPage: TechDocsReaderPage
+});
+
 const EntityPageDocs = ({ entity }) => {
   var _a;
   const config = useApi(configApiRef);
@@ -2099,7 +2114,7 @@ const Router = () => {
     element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null)
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/:namespace/:kind/:name/*",
-    element: /* @__PURE__ */ React.createElement(TechDocsReaderPage$1, null)
+    element: /* @__PURE__ */ React.createElement(TechDocsReaderPage, null)
   }));
 };
 const EmbeddedDocsRouter = () => {
@@ -2126,5 +2141,5 @@ var Router$1 = /*#__PURE__*/Object.freeze({
   EmbeddedDocsRouter: EmbeddedDocsRouter
 });
 
-export { DefaultTechDocsHome, DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPage, TechDocsPageHeader, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsSearch, TechDocsSearchResultListItem, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
+export { DefaultTechDocsHome, DocsCardGrid, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage$2 as TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsSearch, TechDocsSearchResultListItem, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
 //# sourceMappingURL=index.esm.js.map