feat: improve side label UI (#886)

* feat: adopt github native tag styles

* feat: add opendigger logo to labels

* style: adjust styles of the opendigger logo

* refactor: vertical align logo and text in correct way

* chore: change for smaller opendigger png

* fix: tags are not inserted to repositories without a tag container

* fix: handle repo meta without labels

src/api/common.ts

@@ -15,6 +15,12 @@ export const getMetricByName = async (owner: string, metricNameMap: Map<string,
   }
 };
 
+export interface Label {
+  id: string;
+  name: string;
+  type: string;
+}
+
 /**
  * Common interface for both repo meta and user meta
  * e.g. https://oss.open-digger.cn/github/X-lab2017/open-digger/meta.json (repo meta file)
@@ -24,7 +30,7 @@ export const getMetricByName = async (owner: string, metricNameMap: Map<string,
 export interface CommonMeta {
   type: 'user' | 'repo';
   updatedAt: number; // time stamp
-  labels: unknown[]; // TODO: define the type
+  labels?: Label[];
 }
 
 export interface RepoMeta extends CommonMeta {}

src/pages/ContentScripts/features/repo-sidebar-labels/OpenDiggerLabel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Label } from '../../../../api/common';
+
+interface OpenDiggerLabelProps {
+  label: Label;
+}
+
+const OpenDiggerLabel: React.FC<OpenDiggerLabelProps> = ({ label }) => {
+  return (
+    <a
+      id={`opendigger-label-${label.id}`}
+      className="topic-tag topic-tag-link"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingLeft: '4px',
+      }}
+      href="https://open-digger.cn"
+      target="_blank"
+    >
+      <img
+        style={{
+          marginRight: '4px',
+          borderRadius: '50%',
+        }}
+        src="https://open-digger.cn/img/logo/logo-blue-round-corner-36px.png"
+        width={16}
+        height={16}
+      />
+      <span>{label.name}</span>
+    </a>
+  );
+};
+
+export default OpenDiggerLabel;

src/pages/ContentScripts/features/repo-sidebar-labels/index.tsx

@@ -1,57 +1,54 @@
 import features from '../../../../feature-manager';
-import View from './view';
-import elementReady from 'element-ready';
 import { getRepoName, hasRepoContainerHeader, isPublicRepoWithMeta } from '../../../../helpers/get-repo-info';
-import { RepoMeta, metaStore } from '../../../../api/common';
+import { Label, RepoMeta, metaStore } from '../../../../api/common';
+import { createRoot } from 'react-dom/client';
+import OpenDiggerLabel from './OpenDiggerLabel';
+
 import React from 'react';
 import $ from 'jquery';
-import { createRoot } from 'react-dom/client';
 
 const featureId = features.getFeatureID(import.meta.url);
-type Label = {
-  id: string;
-  name: string;
-  type: string;
-};
-
-let repoName: string;
-let meta: RepoMeta;
-let filteredLabels: Label[];
 
-const getData = async () => {
-  meta = (await metaStore.get(repoName)) as RepoMeta;
+const getLabels = async (repoName: string) => {
+  const meta = (await metaStore.get(repoName)) as RepoMeta;
   // filtered all xxx-n and n is not 0
-  filteredLabels = (meta.labels as Label[]).filter((label: Label) => {
+  return meta.labels?.filter((label) => {
     return !(label.type.includes('-') && parseInt(label.type.split('-')[1]) > 0);
   });
 };
 
-const renderTo = (container: any) => {
-  createRoot(container).render(<View labels={filteredLabels} />);
+const renderTags = (labels: Label[]) => {
+  let githubTagContainer = $('.topic-tag.topic-tag-link').parent();
+  // some repositories don't have tags, create a tag container for our tags
+  if (githubTagContainer.length === 0) {
+    githubTagContainer = $('<div class="f6"></div>');
+    const githubTagContainerWrap = $('<div class="my-3"></div>');
+    githubTagContainerWrap.append(githubTagContainer);
+    const anchor = $('h3.sr-only:contains("Resources")');
+    githubTagContainerWrap.insertBefore(anchor);
+  }
+  for (const label of labels) {
+    const id = `opendigger-label-${label.id}`;
+    // if the tag already exists, skip
+    if (document.getElementById(id)) {
+      continue;
+    }
+    const labelElement = document.createElement('span');
+    createRoot(labelElement).render(<OpenDiggerLabel label={label} />);
+    githubTagContainer.append(labelElement);
+  }
 };
 
 const init = async (): Promise<void> => {
-  repoName = getRepoName();
-  await getData();
-  const container = document.createElement('div');
-  container.id = featureId;
-  createRoot(container).render(<View labels={filteredLabels} />);
-
-  await elementReady('.Layout-sidebar');
-  $('.Layout-sidebar').find('p.f4.my-3').after(container);
-};
-
-const restore = async () => {
-  if (repoName !== getRepoName()) {
-    repoName = getRepoName();
-    await getData();
+  const repoName = getRepoName();
+  const labels = await getLabels(repoName);
+  if (labels && labels.length > 0) {
+    renderTags(labels);
   }
-  renderTo($(`#${featureId}`)[0]);
 };
 
 features.add(featureId, {
   asLongAs: [isPublicRepoWithMeta, hasRepoContainerHeader],
-  awaitDomReady: false,
+  awaitDomReady: true,
   init,
-  restore,
 });