Cleanup

src/components/git-tags/git-tag-links.tsx

@@ -1,29 +1,97 @@
-import { Typography } from '@equinor/eds-core-react';
-import type { FunctionComponent } from 'react';
-
+import { List, Tooltip, Typography } from '@equinor/eds-core-react';
+import { type FunctionComponent, useState } from 'react';
 import { linkToGitHubTag } from '../../utils/string';
+import { ScrimPopup } from '../scrim-popup';
+
+import './style.css';
+
+const Tag: FunctionComponent<{
+  repository: string;
+  tag: string;
+  tagTitle: string;
+}> = ({ repository, tag, tagTitle }) => (
+  <Typography
+    token={{ textDecoration: 'none' }}
+    {...(repository && {
+      link: true,
+      href: linkToGitHubTag(repository, tag),
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    })}
+  >
+    <div className="tags">{tagTitle}</div>
+  </Typography>
+);
+
+const ShortenedTag: FunctionComponent<{ repository: string; tag: string }> = ({
+  repository,
+  tag,
+}) => {
+  const tagTitle =
+    tag?.length > 25 ? `${tag.substring(0, 8)}...${tag.slice(-12)}` : tag;
+  return tag && tagTitle != tag ? (
+    <Tooltip placement="top" title={tag}>
+      <div>
+        <Tag tag={tag} tagTitle={tagTitle} repository={repository} />
+      </div>
+    </Tooltip>
+  ) : (
+    <Tag tag={tag} tagTitle={tagTitle} repository={repository} />
+  );
+};
+
+const TagList: FunctionComponent<{ repository: string; tags: string[] }> = ({
+  repository,
+  tags,
+}) => (
+  <List>
+    {tags.map((tag) => (
+      <List.Item key={tag}>
+        <ShortenedTag tag={tag} repository={repository} />
+      </List.Item>
+    ))}
+  </List>
+);
 
 export const GitTagLinks: FunctionComponent<{
   gitTags: string;
   repository?: string;
-}> = ({ gitTags, repository }) => (
-  <>
-    {gitTags
-      .split(/[ ,]+/)
-      .map((tag) => tag.trim())
-      .map((tag, i, arr) => (
-        <Typography
-          key={i}
-          token={{ textDecoration: 'none' }}
-          {...(repository && {
-            link: true,
-            href: linkToGitHubTag(repository, tag),
-            rel: 'noopener noreferrer',
-            target: '_blank',
-          })}
-        >
-          {`${tag}${arr.length - 1 !== i ? ', ' : ''}`}
-        </Typography>
-      ))}
-  </>
-);
+}> = ({ gitTags, repository }) => {
+  const [visibleScrim, setVisibleScrim] = useState(false);
+  const gitTagList = gitTags?.split(/[ ,]+/) || [];
+  return (
+    <>
+      {!gitTagList.length ? (
+        <></>
+      ) : gitTagList.length == 1 ? (
+        <ShortenedTag tag={gitTagList[0]} repository={repository} />
+      ) : gitTags.length < 20 ? (
+        gitTagList
+          .map((tag) => tag.trim())
+          .map((tag) => (
+            <ShortenedTag key={tag} tag={tag} repository={repository} />
+          ))
+      ) : (
+        <>
+          <Typography
+            link
+            onClick={() => setVisibleScrim(!visibleScrim)}
+            token={{ textDecoration: 'none' }}
+          >
+            Multiple tags
+          </Typography>
+          <ScrimPopup
+            title={'Tags'}
+            open={!!visibleScrim}
+            onClose={() => setVisibleScrim(false)}
+            isDismissable
+          >
+            <div className="multiple-tags-content">
+              <TagList tags={gitTagList} repository={repository} />
+            </div>
+          </ScrimPopup>
+        </>
+      )}
+    </>
+  );
+};

src/components/git-tags/style.css

@@ -0,0 +1,11 @@
+.multiple-tags-content {
+  padding: var(--eds_spacing_medium);
+  padding-top: 0;
+  overflow: auto;
+}
+
+.tags {
+  font-size: 0.850rem;
+  line-height: 1.333em;
+  font-weight: 500;
+}