Merge pull request #6375 from RoadieHQ/gh4568-tech-docs-collator

Implement DefaultTechDocsCollator

plugins/techdocs/src/components/DocsResultListItem/DocsResultListItem.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2021 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.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DocsResultListItem } from './DocsResultListItem';
+
+// Using canvas to render text..
+jest.mock('react-text-truncate', () => {
+  return ({ text }: { text: string }) => <span>{text}</span>;
+});
+
+const validResult = {
+  location: 'https://backstage.io/docs',
+  title: 'Documentation',
+  text:
+    'Backstage is an open-source developer portal that puts the developer experience first.',
+  kind: 'library',
+  namespace: '',
+  name: 'Backstage',
+  lifecycle: 'production',
+};
+
+describe('DocsResultListItem test', () => {
+  it('should render search doc passed in', async () => {
+    const { findByText } = render(<DocsResultListItem result={validResult} />);
+
+    expect(
+      await findByText('Documentation | Backstage docs'),
+    ).toBeInTheDocument();
+    expect(
+      await findByText(
+        'Backstage is an open-source developer portal that puts the developer experience first.',
+      ),
+    ).toBeInTheDocument();
+  });
+});

plugins/techdocs/src/components/DocsResultListItem/DocsResultListItem.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2021 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.
+ */
+
+import React from 'react';
+import { Divider, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import TextTruncate from 'react-text-truncate';
+
+const useStyles = makeStyles({
+  flexContainer: {
+    flexWrap: 'wrap',
+  },
+  itemText: {
+    width: '100%',
+    marginBottom: '1rem',
+  },
+});
+
+export const DocsResultListItem = ({
+  result,
+  lineClamp = 5,
+}: {
+  result: any;
+  lineClamp?: number;
+}) => {
+  const classes = useStyles();
+  return (
+    <Link to={result.location}>
+      <ListItem alignItems="flex-start" className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={`${result.title} | ${result.name} docs `}
+          secondary={
+            <TextTruncate
+              line={lineClamp}
+              truncateText="…"
+              text={result.text}
+              element="span"
+            />
+          }
+        />
+      </ListItem>
+      <Divider component="li" />
+    </Link>
+  );
+};

plugins/techdocs/src/components/DocsResultListItem/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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 { DocsResultListItem } from './DocsResultListItem';

plugins/techdocs/src/index.ts

@@ -19,6 +19,7 @@ export { techdocsApiRef, techdocsStorageApiRef } from './api';
 export type { TechDocsApi, TechDocsStorageApi } from './api';
 export { TechDocsClient, TechDocsStorageClient } from './client';
 export type { PanelType } from './home/components/TechDocsCustomHome';
+export * from './components/DocsResultListItem';
 export {
   DocsCardGrid,
   DocsTable,