refactor: extract use search result location hook

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx

@@ -25,12 +25,15 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
-import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
+import { useAnalytics } from '@backstage/core-plugin-api';
 import {
   IndexableDocument,
   ResultHighlight,
 } from '@backstage/plugin-search-common';
-import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
+import {
+  HighlightedSearchResultText,
+  useSearchResultLocation,
+} from '@backstage/plugin-search-react';
 
 const useStyles = makeStyles({
   flexContainer: {
@@ -64,12 +67,7 @@ export function CatalogSearchResultListItem(
   const classes = useStyles();
   const analytics = useAnalytics();
 
-  const configApi = useApi(configApiRef);
-  let to = result.location;
-  // Is relative url
-  if (!to.match(/^([a-z]*:)?\/\//i)) {
-    to = configApi.getString('app.baseUrl').concat(to);
-  }
+  const to = useSearchResultLocation(result);
 
   const handleClick = () => {
     analytics.captureEvent('discover', result.title, {

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx

@@ -15,12 +15,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import {
-  AnalyticsContext,
-  configApiRef,
-  useAnalytics,
-  useApi,
-} from '@backstage/core-plugin-api';
+import { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
 import {
   ResultHighlight,
   SearchDocument,
@@ -34,6 +29,7 @@ import {
   Divider,
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
+import { useSearchResultLocation } from './useSearchResultLocation';
 
 /**
  * Props for {@link DefaultResultListItem}
@@ -63,13 +59,8 @@ export const DefaultResultListItemComponent = ({
   lineClamp = 5,
 }: DefaultResultListItemProps) => {
   const analytics = useAnalytics();
-  const configApi = useApi(configApiRef);
 
-  let to = result.location;
-  // Is relative url
-  if (!to.match(/^([a-z]*:)?\/\//i)) {
-    to = configApi.getString('app.baseUrl').concat(to);
-  }
+  const to = useSearchResultLocation(result);
 
   const handleClick = () => {
     analytics.captureEvent('discover', result.title, {

plugins/search-react/src/components/DefaultResultListItem/index.ts

@@ -16,3 +16,4 @@
 
 export { DefaultResultListItem } from './DefaultResultListItem';
 export type { DefaultResultListItemProps } from './DefaultResultListItem';
+export { useSearchResultLocation } from './useSearchResultLocation';

plugins/search-react/src/components/DefaultResultListItem/useSearchResultLocation.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { SearchDocument } from '@backstage/plugin-search-common';
+
+/**
+ * Builds a search result url.
+ * @param document - A search result item.
+ * @returns Add app base url as location prefix when location is relative.
+ */
+export const useSearchResultLocation = (document: SearchDocument) => {
+  const configApi = useApi(configApiRef);
+
+  let location = document.location;
+
+  const isRelative = !location.match(/^([a-z]*:)?\/\//i);
+  if (isRelative) {
+    location = configApi.getString('app.baseUrl').concat(location);
+  }
+
+  return location;
+};

plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx

@@ -23,9 +23,12 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
-import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
+import { useAnalytics } from '@backstage/core-plugin-api';
 import { ResultHighlight } from '@backstage/plugin-search-common';
-import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
+import {
+  HighlightedSearchResultText,
+  useSearchResultLocation,
+} from '@backstage/plugin-search-react';
 
 const useStyles = makeStyles({
   flexContainer: {
@@ -74,14 +77,10 @@ export const TechDocsSearchResultListItem = (
   const classes = useStyles();
 
   const analytics = useAnalytics();
-  const configApi = useApi(configApiRef);
+
+  const to = useSearchResultLocation(result);
 
   const handleClick = () => {
-    let to = result.location;
-    // Is relative url
-    if (!to.match(/^([a-z]*:)?\/\//i)) {
-      to = configApi.getString('app.baseUrl').concat(to);
-    }
     analytics.captureEvent('discover', result.title, {
       attributes: { to },
       value: rank,
@@ -156,20 +155,14 @@ export const TechDocsSearchResultListItem = (
     );
   };
 
-  const LinkWrapper = ({ children }: PropsWithChildren<{}>) => {
-    let to = result.location;
-    // Is relative url
-    if (!to.match(/^([a-z]*:)?\/\//i)) {
-      to = configApi.getString('app.baseUrl').concat(to);
-    }
-    return asLink ? (
+  const LinkWrapper = ({ children }: PropsWithChildren<{}>) =>
+    asLink ? (
       <Link noTrack to={to} onClick={handleClick}>
         {children}
       </Link>
     ) : (
       <>{children}</>
     );
-  };
 
   const ListItemWrapper = ({ children }: PropsWithChildren<{}>) =>
     asListItem ? (