From f59f7c2fe77bade185540273a3a687451ee5e659 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 11 Dec 2020 17:29:52 +0100
Subject: [PATCH] refactor code: add AboutContent and AboutField to catalog

---
 .../src/components/AboutCard/AboutContent.tsx | 83 +++++++++++++++++++
 .../src/components/AboutCard/AboutField.tsx   | 64 ++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 plugins/catalog/src/components/AboutCard/AboutContent.tsx
 create mode 100644 plugins/catalog/src/components/AboutCard/AboutField.tsx

diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
new file mode 100644
index 0000000000..b8d5d84316
--- /dev/null
+++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 { Grid, Typography, Chip, makeStyles } from '@material-ui/core';
+import { AboutField } from './AboutField';
+import {
+  Entity,
+  ENTITY_DEFAULT_NAMESPACE,
+  RELATION_OWNED_BY,
+  serializeEntityRef,
+} from '@backstage/catalog-model';
+
+const useStyles = makeStyles({
+  description: {
+    wordBreak: 'break-word',
+  },
+});
+
+type Props = {
+  entity: Entity;
+};
+
+export const AboutContent = ({ entity }: Props) => {
+  const classes = useStyles();
+  return (
+    <Grid container>
+      <AboutField label="Description" gridSizes={{ xs: 12 }}>
+        <Typography variant="body2" paragraph className={classes.description}>
+          {entity?.metadata?.description || 'No description'}
+        </Typography>
+      </AboutField>
+      <AboutField
+        label="Owner"
+        value={entity?.relations
+          ?.filter(r => r.type === RELATION_OWNED_BY)
+          .map(({ target: { kind, name, namespace } }) =>
+            // TODO(Rugvip): we want to provide some utils for this
+            serializeEntityRef({
+              kind,
+              name,
+              namespace:
+                namespace === ENTITY_DEFAULT_NAMESPACE ? undefined : namespace,
+            }),
+          )
+          .join(', ')}
+        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+      />
+      <AboutField
+        label="Type"
+        value={entity?.spec?.type as string}
+        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+      />
+      <AboutField
+        label="Lifecycle"
+        value={entity?.spec?.lifecycle as string}
+        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+      />
+      <AboutField
+        label="Tags"
+        value="No Tags"
+        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
+      >
+        {(entity?.metadata?.tags || []).map(t => (
+          <Chip key={t} size="small" label={t} />
+        ))}
+      </AboutField>
+    </Grid>
+  );
+};
diff --git a/plugins/catalog/src/components/AboutCard/AboutField.tsx b/plugins/catalog/src/components/AboutCard/AboutField.tsx
new file mode 100644
index 0000000000..fdcb3ace1b
--- /dev/null
+++ b/plugins/catalog/src/components/AboutCard/AboutField.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 { makeStyles, Typography, Grid } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  value: {
+    fontWeight: 'bold',
+    overflow: 'hidden',
+    lineHeight: '24px',
+    wordBreak: 'break-word',
+  },
+  label: {
+    color: theme.palette.text.secondary,
+    textTransform: 'uppercase',
+    fontSize: '10px',
+    fontWeight: 'bold',
+    letterSpacing: 0.5,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+}));
+
+type Props = {
+  label: string;
+  value?: string;
+  gridSizes?: Record<string, number>;
+  children?: React.ReactNode;
+};
+
+export const AboutField = ({ label, value, gridSizes, children }: Props) => {
+  const classes = useStyles();
+
+  // Content is either children or a string prop `value`
+  const content = React.Children.count(children) ? (
+    children
+  ) : (
+    <Typography variant="body2" className={classes.value}>
+      {value || `unknown`}
+    </Typography>
+  );
+  return (
+    <Grid item {...gridSizes}>
+      <Typography variant="subtitle2" className={classes.label}>
+        {label}
+      </Typography>
+      {content}
+    </Grid>
+  );
+};