improve project structure for home Table + Grid components

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx

@@ -18,7 +18,7 @@ import { configApiRef } from '@backstage/core-plugin-api';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { rootDocsRouteRef } from '../../routes';
+import { rootDocsRouteRef } from '../../../routes';
 import { DocsCardGrid } from './DocsCardGrid';
 
 // Hacky way to mock a specific boolean config value.

plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx

@@ -14,20 +14,23 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
+import { rootDocsRouteRef } from '../../../routes';
+import { toLowerMaybe } from '../../../helpers';
 import { Entity } from '@backstage/catalog-model';
 import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api';
-import { Card, CardActions, CardContent, CardMedia } from '@material-ui/core';
-import { rootDocsRouteRef } from '../../routes';
-
 import {
   Button,
   ItemCardGrid,
   ItemCardHeader,
 } from '@backstage/core-components';
-import { toLowerMaybe } from '../../helpers';
+import { Card, CardActions, CardContent, CardMedia } from '@material-ui/core';
+import React from 'react';
 
+/**
+ * Component which accepts a list of entities and renders a item card for each entity
+ *
+ * @public
+ */
 export const DocsCardGrid = ({
   entities,
 }: {

plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { DocsCardGrid } from './DocsCardGrid';
 import {
   CodeSnippet,
   Progress,
@@ -20,8 +22,12 @@ import {
 } from '@backstage/core-components';
 import { useEntityList } from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { DocsCardGrid } from './DocsCardGrid';
 
+/**
+ * Component responsible to get entities from entity list context and pass down to DocsCardGrid
+ *
+ * @public
+ */
 export const EntityListDocsGrid = () => {
   const { loading, error, entities } = useEntityList();
 

plugins/techdocs/src/home/components/Grids/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './EntityListDocsGrid';
+export * from './DocsCardGrid';

plugins/techdocs/src/home/components/Tables/DocsTable.test.tsx

@@ -18,7 +18,7 @@ import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { DocsTable } from './DocsTable';
-import { rootDocsRouteRef } from '../../routes';
+import { rootDocsRouteRef } from '../../../routes';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 
 // Hacky way to mock a specific boolean config value.

plugins/techdocs/src/home/components/Tables/DocsTable.tsx

@@ -23,7 +23,7 @@ import {
   formatEntityRefTitle,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
-import { rootDocsRouteRef } from '../../routes';
+import { rootDocsRouteRef } from '../../../routes';
 import {
   Button,
   EmptyState,
@@ -33,22 +33,29 @@ import {
 } from '@backstage/core-components';
 import * as actionFactories from './actions';
 import * as columnFactories from './columns';
+import { toLowerMaybe } from '../../../helpers';
 import { DocsTableRow } from './types';
-import { toLowerMaybe } from '../../helpers';
 
-export const DocsTable = ({
-  entities,
-  title,
-  loading,
-  columns,
-  actions,
-}: {
+/**
+ * Props for {@link DocsTable}.
+ *
+ * @public
+ */
+export type DocsTableProps = {
   entities: Entity[] | undefined;
   title?: string | undefined;
   loading?: boolean | undefined;
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
-}) => {
+};
+
+/**
+ * Component which renders a table documents
+ *
+ * @public
+ */
+export const DocsTable = (props: DocsTableProps) => {
+  const { entities, title, loading, columns, actions } = props;
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
   const config = useApi(configApiRef);

plugins/techdocs/src/home/components/Tables/EntityListDocsTable.tsx

@@ -32,13 +32,23 @@ import * as actionFactories from './actions';
 import * as columnFactories from './columns';
 import { DocsTableRow } from './types';
 
-export const EntityListDocsTable = ({
-  columns,
-  actions,
-}: {
+/**
+ * Props for {@link EntityListDocsTable}.
+ *
+ * @public
+ */
+export type EntityListDocsTableProps = {
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
-}) => {
+};
+
+/**
+ * Component which renders a table with entities from catalog.
+ *
+ * @public
+ */
+export const EntityListDocsTable = (props: EntityListDocsTableProps) => {
+  const { columns, actions } = props;
   const { loading, error, entities, filters } = useEntityList();
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const [, copyToClipboard] = useCopyToClipboard();

plugins/techdocs/src/home/components/Tables/actions.tsx

@@ -22,6 +22,12 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { DocsTableRow } from './types';
 
+/**
+ * Utility function for creating a copy docs url action for {@link DocsTable}.
+ *
+ * @internal
+ */
+
 export function createCopyDocsUrlAction(copyToClipboard: Function) {
   return (row: DocsTableRow) => {
     return {
@@ -33,6 +39,12 @@ export function createCopyDocsUrlAction(copyToClipboard: Function) {
   };
 }
 
+/**
+ * Utility function for creating a star entity action for {@link DocsTable}.
+ *
+ * @internal
+ */
+
 export function createStarEntityAction(
   isStarredEntity: Function,
   toggleStarredEntity: Function,

plugins/techdocs/src/home/components/Tables/columns.tsx

@@ -24,6 +24,11 @@ function customTitle(entity: Entity): string {
   return entity.metadata.title || entity.metadata.name;
 }
 
+/**
+ * Utility function for creating a name column for {@link DocsTable}.
+ *
+ * @internal
+ */
 export function createNameColumn(): TableColumn<DocsTableRow> {
   return {
     title: 'Document',
@@ -38,6 +43,11 @@ export function createNameColumn(): TableColumn<DocsTableRow> {
   };
 }
 
+/**
+ * Utility function for creating an owner column for {@link DocsTable}.
+ *
+ * @internal
+ */
 export function createOwnerColumn(): TableColumn<DocsTableRow> {
   return {
     title: 'Owner',
@@ -51,6 +61,11 @@ export function createOwnerColumn(): TableColumn<DocsTableRow> {
   };
 }
 
+/**
+ * Utility function for creating an spec type column for {@link DocsTable}.
+ *
+ * @internal
+ */
 export function createTypeColumn(): TableColumn<DocsTableRow> {
   return {
     title: 'Type',

plugins/techdocs/src/home/components/Tables/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './EntityListDocsTable';
+export * from './DocsTable';
+export * from './types';

plugins/techdocs/src/home/components/Tables/types.ts

@@ -16,6 +16,11 @@
 
 import { Entity, EntityName } from '@backstage/catalog-model';
 
+/**
+ * Generic representing the metadata structure for a docs table row.
+ *
+ * @public
+ */
 export type DocsTableRow = {
   entity: Entity;
   resolved: {

plugins/techdocs/src/home/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './components';