From 2d6e90b37ade282c3867ccb947403302d392832b Mon Sep 17 00:00:00 2001 From: Lam Tang Date: Sat, 12 Oct 2024 18:59:49 +0800 Subject: [PATCH] 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 | 8 ++- .../repo-sidebar-labels/OpenDiggerLabel.tsx | 35 ++++++++++ .../features/repo-sidebar-labels/index.tsx | 67 +++++++++---------- .../features/repo-sidebar-labels/view.tsx | 53 --------------- 4 files changed, 74 insertions(+), 89 deletions(-) create mode 100644 src/pages/ContentScripts/features/repo-sidebar-labels/OpenDiggerLabel.tsx delete mode 100644 src/pages/ContentScripts/features/repo-sidebar-labels/view.tsx diff --git a/src/api/common.ts b/src/api/common.ts index 15c3e87a..a4507583 100644 --- a/src/api/common.ts +++ b/src/api/common.ts @@ -15,6 +15,12 @@ export const getMetricByName = async (owner: string, metricNameMap: Map = ({ label }) => { + return ( + + + {label.name} + + ); +}; + +export default OpenDiggerLabel; diff --git a/src/pages/ContentScripts/features/repo-sidebar-labels/index.tsx b/src/pages/ContentScripts/features/repo-sidebar-labels/index.tsx index 0da510ef..dbbba2a3 100644 --- a/src/pages/ContentScripts/features/repo-sidebar-labels/index.tsx +++ b/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(); +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 = $('
'); + const githubTagContainerWrap = $('
'); + 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(); + githubTagContainer.append(labelElement); + } }; const init = async (): Promise => { - repoName = getRepoName(); - await getData(); - const container = document.createElement('div'); - container.id = featureId; - createRoot(container).render(); - - 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, }); diff --git a/src/pages/ContentScripts/features/repo-sidebar-labels/view.tsx b/src/pages/ContentScripts/features/repo-sidebar-labels/view.tsx deleted file mode 100644 index 2ab008ac..00000000 --- a/src/pages/ContentScripts/features/repo-sidebar-labels/view.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import getGithubTheme from '../../../../helpers/get-github-theme'; -import optionsStorage, { HypercrxOptions, defaults } from '../../../../options-storage'; -import '../../../ContentScripts/index.scss'; -import React, { useState, useEffect } from 'react'; - -import { useTranslation } from 'react-i18next'; -import '../../../../helpers/i18n'; -const githubTheme = getGithubTheme(); - -type Label = { - id: string; - name: string; - type: string; -}; - -interface Props { - labels: Label[]; -} - -const View = ({ labels }: Props): JSX.Element | null => { - const [options, setOptions] = useState(defaults); - const { t, i18n } = useTranslation(); - useEffect(() => { - (async function () { - setOptions(await optionsStorage.getAll()); - i18n.changeLanguage(options.locale); - })(); - }, [options.locale]); - - const meta_labels = labels.map((label) => ( - - {label.name} - - )); - return ( -
-
- Icon - - Labels - -
-
- {meta_labels} -
- ); -}; - -export default View;