add entity labels card

Signed-off-by: Brian Fletcher <brian@roadie.io>

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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 { useEntity } from '@backstage/plugin-catalog-react';
+import React from 'react';
+import {
+  InfoCard,
+  InfoCardVariants,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
+import { EntityLabelsEmptyState } from './EntityLabelsEmptyState';
+import { makeStyles, Typography } from '@material-ui/core';
+
+/** @public */
+export interface EntityLabelsCardProps {
+  variant?: InfoCardVariants;
+}
+
+const useStyles = makeStyles(_ => ({
+  key: {
+    fontWeight: 'bold',
+  },
+}));
+
+export const EntityLabelsCard = (props: EntityLabelsCardProps) => {
+  const { variant } = props;
+  const { entity } = useEntity();
+  const classes = useStyles();
+
+  const columns: TableColumn<{ key: string; value: string }>[] = [
+    {
+      render: row => {
+        return (
+          <Typography className={classes.key} variant="body2">
+            {row.key}
+          </Typography>
+        );
+      },
+    },
+    {
+      field: 'value',
+    },
+  ];
+
+  const labels = entity?.metadata?.labels;
+
+  return (
+    <InfoCard title="Entity Labels" variant={variant}>
+      {!labels || Object.keys(labels).length === 0 ? (
+        <EntityLabelsEmptyState />
+      ) : (
+        <Table
+          columns={columns}
+          data={Object.keys(labels).map(labelKey => ({
+            key: labelKey,
+            value: labels[labelKey],
+          }))}
+          options={{
+            search: false,
+            showTitle: true,
+            loadingType: 'linear',
+            header: false,
+            padding: 'dense',
+            pageSize: 5,
+            toolbar: false,
+            paging: Object.keys(labels).length > 5,
+          }}
+        />
+      )}
+    </InfoCard>
+  );
+};

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 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 { BackstageTheme } from '@backstage/theme';
+import { Button, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import { CodeSnippet } from '@backstage/core-components';
+
+const ENTITY_YAML = `metadata:
+  name: example
+  labels:
+    javaVersion: 1.2.3`;
+/** @public */
+export type EntityLabelsEmptyStateClassKey = 'code';
+
+const useStyles = makeStyles<BackstageTheme>(
+  theme => ({
+    code: {
+      borderRadius: 6,
+      margin: `${theme.spacing(2)}px 0px`,
+      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+    },
+  }),
+  { name: 'PluginCatalogEntityLabelsEmptyState' },
+);
+
+export function EntityLabelsEmptyState() {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Typography variant="body1">
+        No labels defined for this entity. You can add links to your entity YAML
+        as shown in the highlighted example below:
+      </Typography>
+      <div className={classes.code}>
+        <CodeSnippet
+          text={ENTITY_YAML}
+          language="yaml"
+          showLineNumbers
+          highlightedNumbers={[3, 4, 5, 6]}
+          customStyle={{ background: 'inherit', fontSize: '115%' }}
+        />
+      </div>
+      <Button
+        variant="contained"
+        color="primary"
+        target="_blank"
+        href="https://backstage.io/docs/features/software-catalog/descriptor-format#labels-optional"
+      >
+        Read more
+      </Button>
+    </>
+  );
+}

plugins/catalog/src/components/EntityLabelsCard/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 { EntityLabelsCard } from './EntityLabelsCard';

plugins/catalog/src/index.ts

@@ -50,6 +50,7 @@ export {
   EntityHasSubcomponentsCard,
   EntityHasSystemsCard,
   EntityLinksCard,
+  EntityLabelsCard,
   RelatedEntitiesCard,
 } from './plugin';
 

plugins/catalog/src/plugin.ts

@@ -126,6 +126,17 @@ export const EntityLinksCard = catalogPlugin.provide(
   }),
 );
 
+/** @public */
+export const EntityLabelsCard = catalogPlugin.provide(
+  createComponentExtension({
+    name: 'EntityLabelsCard',
+    component: {
+      lazy: () =>
+        import('./components/EntityLabelsCard').then(m => m.EntityLabelsCard),
+    },
+  }),
+);
+
 /** @public */
 export const EntityHasSystemsCard: (props: HasSystemsCardProps) => JSX.Element =
   catalogPlugin.provide(