Merge branch 'master' into systems-tab

plugins/explore/CHANGELOG.md

@@ -1,5 +1,138 @@
 # @backstage/plugin-explore
 
+## 0.4.1
+
+### Patch Changes
+
+- 65454876fb2: Minor API report tweaks
+- cb8ec97cdeb: Change black & white colors to be theme aware
+- c10384a9235: Switch to using `LinkButton` instead of the deprecated `Button`
+- 52b0022dab7: Updated dependency `msw` to `^1.0.0`.
+- 3f75b7607ca: Add ability to pass icon as function to have ability to customize it by search item
+- Updated dependencies
+  - @backstage/core-components@0.12.5
+  - @backstage/plugin-catalog-react@1.4.0
+  - @backstage/plugin-search-react@1.5.1
+  - @backstage/errors@1.1.5
+  - @backstage/core-plugin-api@1.5.0
+  - @backstage/catalog-model@1.2.1
+  - @backstage/plugin-explore-react@0.0.27
+  - @backstage/theme@0.2.18
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-search-common@1.2.2
+
+## 0.4.1-next.2
+
+### Patch Changes
+
+- 65454876fb2: Minor API report tweaks
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.2
+  - @backstage/plugin-catalog-react@1.4.0-next.2
+  - @backstage/plugin-search-react@1.5.1-next.2
+  - @backstage/core-plugin-api@1.5.0-next.2
+  - @backstage/plugin-explore-react@0.0.27-next.2
+
+## 0.4.1-next.1
+
+### Patch Changes
+
+- cb8ec97cdeb: Change black & white colors to be theme aware
+- c10384a9235: Switch to using `LinkButton` instead of the deprecated `Button`
+- 52b0022dab7: Updated dependency `msw` to `^1.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.1
+  - @backstage/errors@1.1.5-next.0
+  - @backstage/core-plugin-api@1.4.1-next.1
+  - @backstage/plugin-explore-react@0.0.27-next.1
+  - @backstage/theme@0.2.18-next.0
+  - @backstage/plugin-catalog-react@1.4.0-next.1
+  - @backstage/catalog-model@1.2.1-next.1
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-search-common@1.2.2-next.0
+  - @backstage/plugin-search-react@1.5.1-next.1
+
+## 0.4.1-next.0
+
+### Patch Changes
+
+- 3f75b7607c: Add ability to pass icon as function to have ability to customize it by search item
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.4.0-next.0
+  - @backstage/core-plugin-api@1.4.1-next.0
+  - @backstage/catalog-model@1.2.1-next.0
+  - @backstage/core-components@0.12.5-next.0
+  - @backstage/errors@1.1.4
+  - @backstage/theme@0.2.17
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-explore-react@0.0.27-next.0
+  - @backstage/plugin-search-common@1.2.1
+  - @backstage/plugin-search-react@1.5.1-next.0
+
+## 0.4.0
+
+### Minor Changes
+
+- 0eaa579f89: The `ToolSearchResultListItem` component is now a search result extension. This means that when rendered as a child of components that render search extensions, the `result`, `rank`, and `highlight` properties are optional. See the [documentation](https://backstage.io/docs/features/search/how-to-guides#how-to-render-search-results-using-extensions) for more details.
+
+### Patch Changes
+
+- 66e2aab4c4: `ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems` that are exported as extensions. This is to make sure the list only contains list elements.
+
+  Note: If you have implemented a custom result list item, we recommend you to remove the list item wrapper to avoid nested `<li>` elements.
+
+- Updated dependencies
+  - @backstage/core-components@0.12.4
+  - @backstage/catalog-model@1.2.0
+  - @backstage/theme@0.2.17
+  - @backstage/core-plugin-api@1.4.0
+  - @backstage/plugin-catalog-react@1.3.0
+  - @backstage/plugin-search-react@1.5.0
+  - @backstage/errors@1.1.4
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-explore-react@0.0.26
+  - @backstage/plugin-search-common@1.2.1
+
+## 0.4.0-next.2
+
+### Patch Changes
+
+- 66e2aab4c4: `ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems` that are exported as extensions. This is to make sure the list only contains list elements.
+
+  Note: If you have implemented a custom result list item, we recommend you to remove the list item wrapper to avoid nested `<li>` elements.
+
+- Updated dependencies
+  - @backstage/catalog-model@1.2.0-next.1
+  - @backstage/plugin-search-react@1.5.0-next.1
+  - @backstage/core-components@0.12.4-next.1
+  - @backstage/core-plugin-api@1.3.0
+  - @backstage/errors@1.1.4
+  - @backstage/theme@0.2.16
+  - @backstage/plugin-catalog-react@1.3.0-next.2
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-explore-react@0.0.25
+  - @backstage/plugin-search-common@1.2.1
+
+## 0.4.0-next.1
+
+### Minor Changes
+
+- 0eaa579f89: The `ToolSearchResultListItem` component is now a search result extension. This means that when rendered as a child of components that render search extensions, the `result`, `rank`, and `highlight` properties are optional. See the [documentation](https://backstage.io/docs/features/search/how-to-guides#how-to-render-search-results-using-extensions) for more details.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.12.4-next.0
+  - @backstage/plugin-search-react@1.5.0-next.0
+  - @backstage/plugin-catalog-react@1.3.0-next.1
+  - @backstage/catalog-model@1.1.6-next.0
+  - @backstage/core-plugin-api@1.3.0
+  - @backstage/errors@1.1.4
+  - @backstage/theme@0.2.16
+  - @backstage/plugin-explore-common@0.0.1
+  - @backstage/plugin-explore-react@0.0.25
+  - @backstage/plugin-search-common@1.2.1
+
 ## 0.3.46-next.0
 
 ### Patch Changes

plugins/explore/README.md

@@ -30,7 +30,7 @@ any path for the route, but we recommend the following:
 
 ```diff
 // packages/app/src/App.tsx
-+ import { ExplorePage, explorePlugin } from '@backstage/plugin-explore';
++ import { ExplorePage } from '@backstage/plugin-explore';
 
 ...
 

plugins/explore/api-report.md

@@ -18,6 +18,7 @@ import { IndexableDocument } from '@backstage/plugin-search-common';
 import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
 import { TabProps } from '@material-ui/core';
 
 // @public @deprecated (undocumented)
@@ -51,11 +52,7 @@ export const exploreApiRef: ApiRef<ExploreApi>;
 
 // @public
 export class ExploreClient implements ExploreApi {
-  constructor({
-    discoveryApi,
-    fetchApi,
-    exploreToolsConfig,
-  }: {
+  constructor(options: {
     discoveryApi: DiscoveryApi;
     fetchApi: FetchApi;
     exploreToolsConfig?: ExploreToolsConfig;
@@ -128,7 +125,7 @@ export const ToolExplorerContent: (props: {
 
 // @public (undocumented)
 export const ToolSearchResultListItem: (
-  props: ToolSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<ToolSearchResultListItemProps>,
 ) => JSX.Element | null;
 
 // @public
@@ -136,7 +133,7 @@ export interface ToolSearchResultListItemProps {
   // (undocumented)
   highlight?: ResultHighlight;
   // (undocumented)
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
   // (undocumented)
   rank?: number;
   // (undocumented)

plugins/explore/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-explore",
   "description": "A Backstage plugin for building an exploration page of your software ecosystem",
-  "version": "0.3.46-next.0",
+  "version": "0.4.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -64,7 +64,7 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/node": "^16.11.26",
     "cross-fetch": "^3.1.5",
-    "msw": "^0.49.0"
+    "msw": "^1.0.0"
   },
   "files": [
     "dist"

plugins/explore/src/api/ExploreClient.ts

@@ -24,7 +24,7 @@ import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
 import { ExploreApi } from './ExploreApi';
 
 /**
- * Default implementation of the ExploreApi.
+ * Default implementation of the {@link ExploreApi}.
  *
  * @public
  */
@@ -35,21 +35,19 @@ export class ExploreClient implements ExploreApi {
   private readonly exploreToolsConfig: ExploreToolsConfig | undefined;
 
   /**
-   * @remarks The exploreToolsConfig is for backwards compatibility with the exporeToolsConfigRef
+   * @remarks
+   *
+   * The `exploreToolsConfig` is for backwards compatibility with the `exploreToolsConfigRef`•
    * and will be removed in the future.
    */
-  constructor({
-    discoveryApi,
-    fetchApi,
-    exploreToolsConfig = undefined,
-  }: {
+  constructor(options: {
     discoveryApi: DiscoveryApi;
     fetchApi: FetchApi;
     exploreToolsConfig?: ExploreToolsConfig;
   }) {
-    this.discoveryApi = discoveryApi;
-    this.fetchApi = fetchApi;
-    this.exploreToolsConfig = exploreToolsConfig;
+    this.discoveryApi = options.discoveryApi;
+    this.fetchApi = options.fetchApi;
+    this.exploreToolsConfig = options.exploreToolsConfig;
   }
 
   async getTools(

plugins/explore/src/components/EntityCard/EntityCard.tsx

@@ -31,7 +31,7 @@ import {
 } from '@material-ui/core';
 import React from 'react';
 
-import { Button, ItemCardHeader } from '@backstage/core-components';
+import { LinkButton, ItemCardHeader } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 /** @public */
@@ -66,9 +66,9 @@ export const EntityCard = (props: { entity: Entity }) => {
         {entity.metadata.description}
       </CardContent>
       <CardActions>
-        <Button to={url} color="primary">
+        <LinkButton to={url} color="primary">
           Explore
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: 'black',
+    color: theme.palette.common.black,
   },
   legend: {
     position: 'absolute',

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -26,7 +26,7 @@ import {
   makeStyles,
   Typography,
 } from '@material-ui/core';
-import { Button } from '@backstage/core-components';
+import { LinkButton } from '@backstage/core-components';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -41,7 +41,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   lifecycle: {
     lineHeight: '0.8em',
-    color: 'white',
+    color: theme.palette.common.white,
   },
   ga: {
     backgroundColor: theme.palette.status.ok,
@@ -97,9 +97,9 @@ export const ToolCard = ({ card, objectFit }: Props) => {
         )}
       </CardContent>
       <CardActions>
-        <Button color="primary" to={url} disabled={!url}>
+        <LinkButton color="primary" to={url} disabled={!url}>
           Explore
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx

@@ -18,8 +18,6 @@ import React, { ReactNode } from 'react';
 import {
   Box,
   Chip,
-  Divider,
-  ListItem,
   ListItemIcon,
   ListItemText,
   makeStyles,
@@ -48,7 +46,7 @@ const useStyles = makeStyles({
  * @public
  */
 export interface ToolSearchResultListItemProps {
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
   result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
@@ -64,46 +62,46 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
 
   return (
     <>
-      <ListItem alignItems="flex-start">
-        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-        <div className={classes.flexContainer}>
-          <ListItemText
-            className={classes.itemText}
-            primaryTypographyProps={{ variant: 'h6' }}
-            primary={
-              <Link noTrack to={result.location}>
-                {props.highlight?.fields.title ? (
-                  <HighlightedSearchResultText
-                    text={props.highlight.fields.title}
-                    preTag={props.highlight.preTag}
-                    postTag={props.highlight.postTag}
-                  />
-                ) : (
-                  result.title
-                )}
-              </Link>
-            }
-            secondary={
-              props.highlight?.fields.text ? (
+      {props.icon && (
+        <ListItemIcon>
+          {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+        </ListItemIcon>
+      )}
+      <div className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            <Link noTrack to={result.location}>
+              {props.highlight?.fields.title ? (
                 <HighlightedSearchResultText
-                  text={props.highlight.fields.text}
+                  text={props.highlight.fields.title}
                   preTag={props.highlight.preTag}
                   postTag={props.highlight.postTag}
                 />
               ) : (
-                result.text
-              )
-            }
-          />
-          <Box>
-            {result.tags &&
-              result.tags.map((tag: string) => (
-                <Chip label={tag} size="small" />
-              ))}
-          </Box>
-        </div>
-      </ListItem>
-      <Divider component="li" />
+                result.title
+              )}
+            </Link>
+          }
+          secondary={
+            props.highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={props.highlight.fields.text}
+                preTag={props.highlight.preTag}
+                postTag={props.highlight.postTag}
+              />
+            ) : (
+              result.text
+            )
+          }
+        />
+        <Box>
+          {result.tags?.map((tag: string) => (
+            <Chip label={tag} size="small" />
+          ))}
+        </Box>
+      </div>
     </>
   );
 }

plugins/explore/src/plugin.ts

@@ -22,7 +22,10 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
+import {
+  createSearchResultListItemExtension,
+  SearchResultListItemExtensionProps,
+} from '@backstage/plugin-search-react';
 import { ExploreClient, exploreApiRef } from './api';
 import { ToolSearchResultListItemProps } from './components/ToolSearchResultListItem';
 // import { exampleTools } from './util/examples';
@@ -70,7 +73,7 @@ export const explorePlugin = createPlugin({
 
 /** @public */
 export const ToolSearchResultListItem: (
-  props: ToolSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<ToolSearchResultListItemProps>,
 ) => JSX.Element | null = explorePlugin.provide(
   createSearchResultListItemExtension({
     name: 'ToolSearchResultListItem',