Moved edit button in catalog to actions menu

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -26,9 +26,11 @@ import {
   SupportButton,
   useApi,
 } from '@backstage/core';
+import { LocationSpec } from '@backstage/catalog-model';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
 import { Button, makeStyles, Typography, Link } from '@material-ui/core';
 import GitHub from '@material-ui/icons/GitHub';
+import Edit from '@material-ui/icons/Edit';
 import React, { FC, useCallback, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -89,6 +91,29 @@ const CatalogPage: FC<{}> = () => {
         hidden: location ? location?.type !== 'github' : true,
       };
     },
+    (rowData: Component) => {
+      const createEditLink = (location: LocationSpec): string => {
+        switch (location.type) {
+          case 'github':
+            return location.target.replace('/blob/', '/edit/');
+          default:
+            return location.target;
+        }
+      };
+
+      const location = findLocationForEntityMeta(rowData.metadata);
+
+      return {
+        icon: Edit,
+        tooltip: 'Edit',
+        iconProps: { size: 'small' },
+        onClick: () => {
+          if (!location) return;
+          window.open(createEditLink(location), '_blank');
+        },
+        hidden: location ? location?.type !== 'github' : true,
+      };
+    },
   ];
 
   // TODO: replace me with the proper tabs implemntation

plugins/catalog/src/data/utils.ts

@@ -19,44 +19,14 @@ import {
   LOCATION_ANNOTATION,
   EntityMeta,
 } from '@backstage/catalog-model';
-import IconButton from '@material-ui/core/IconButton';
-import { styled } from '@material-ui/core/styles';
-import Edit from '@material-ui/icons/Edit';
-import React from 'react';
 import { Component } from './component';
 
-const DescriptionWrapper = styled('span')({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const createEditLink = (location: LocationSpec): string => {
-  switch (location.type) {
-    case 'github':
-      return location.target.replace('/blob/', '/edit/');
-    default:
-      return location.target;
-  }
-};
-
 export function entityToComponent(envelope: Entity): Component {
-  const location = findLocationForEntityMeta(envelope.metadata);
   return {
-    name: envelope.metadata?.name ?? '',
-    kind: envelope.kind ?? 'unknown',
+    name: envelope.metadata.name,
+    kind: envelope.kind,
     metadata: envelope.metadata,
-    description: (
-      <DescriptionWrapper>
-        {envelope.metadata?.annotations?.description ?? 'placeholder'}
-        {location?.target ? (
-          <a href={createEditLink(location)}>
-            <IconButton size="small">
-              <Edit fontSize="small" />
-            </IconButton>
-          </a>
-        ) : null}
-      </DescriptionWrapper>
-    ),
+    description: envelope.metadata.annotations?.description ?? 'placeholder',
   };
 }