feat: display OpenDigger labels in the right of the repository header (…

…#847)

* [OSS101] Task 3: Display OpenDigger labels in the right of the repository header #807

package.json

@@ -71,7 +71,7 @@
     "husky": "^8.0.1",
     "mini-css-extract-plugin": "^2.7.2",
     "mkdirp": "^1.0.4",
-    "prettier": "^2.7.1",
+    "prettier": "^3.3.3",
     "pretty-quick": "^3.1.3",
     "querystring": "^0.2.1",
     "sass": "^1.52.1",

src/pages/ContentScripts/features/developer-networks/react-modal.scss

@@ -16,7 +16,9 @@
   transform: translate(-50%, -50%);
   padding: 24px;
   box-sizing: border-box;
-  box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
+  box-shadow:
+    rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px,
+    rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
   outline: transparent solid 3px;
   border-radius: 2px;
   background: var(--bgColor-default, var(--color-canvas-default));

src/pages/ContentScripts/features/oss-gpt/rcw.scss

@@ -339,7 +339,11 @@ img.rcw-picker-icon {
   line-height: 1.15;
 }
 .emoji-mart {
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Helvetica Neue,
+    sans-serif;
   font-size: 16px;
   display: inline-block;
   color: #222427;
@@ -505,7 +509,13 @@ img.rcw-picker-icon {
   box-shadow: none;
 }
 .emoji-mart-emoji-native {
-  font-family: Segoe UI Emoji, Segoe UI Symbol, Segoe UI, Apple Color Emoji, Twemoji Mozilla, Noto Color Emoji,
+  font-family:
+    Segoe UI Emoji,
+    Segoe UI Symbol,
+    Segoe UI,
+    Apple Color Emoji,
+    Twemoji Mozilla,
+    Noto Color Emoji,
     Android Emoji;
 }
 .emoji-mart-no-results {
@@ -771,14 +781,18 @@ img.rcw-picker-icon {
 .rcw-conversation-container.active {
   opacity: 1;
   transform: translateY(0);
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 .rcw-conversation-container.hidden {
   z-index: -1;
   pointer-events: none;
   opacity: 0;
   transform: translateY(10px);
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 .rcw-conversation-resizer {
   cursor: col-resize;

src/pages/ContentScripts/features/repo-header-labels/view.tsx

@@ -37,6 +37,28 @@ const View = ({ activity, openrank, participant, contributor, meta }: Props): JS
   const participantData = generateDataByMonth(participant, meta.updatedAt);
   const contributorData = generateDataByMonth(contributor, meta.updatedAt);
 
+  // define a type to describe the structure of Label
+  type Label = {
+    id: string;
+    name: string;
+    type: string;
+  };
+
+  const labels: Label[] = (meta.labels ?? []) as Label[];
+
+  const meta_labels = labels.map((label) => (
+    <span
+      key={label.id} // use label.id as the key
+      id={label.id}
+      className="Label Label--secondary v-align-middle mr-1 unselectable"
+      style={{
+        color: githubTheme === 'light' ? '#24292f' : '#c9d1d9',
+      }}
+    >
+      {label.name}
+    </span>
+  ));
+
   return (
     <div className="d-flex">
       <span
@@ -125,6 +147,8 @@ const View = ({ activity, openrank, participant, contributor, meta }: Props): JS
         {numberWithCommas(contributorData[contributorData.length - 1][1])}/
         {numberWithCommas(participantData[participantData.length - 1][1])}
       </span>
+
+      {meta_labels}
     </div>
   );
 };

src/pages/Options/Options.css

@@ -4,7 +4,9 @@
   margin-top: 10px;
   opacity: 1;
   background: white;
-  box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
+  box-shadow:
+    rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
     rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
   transition: all 0.2s ease 0s;
   border-radius: 3px;

yarn.lock

@@ -4621,10 +4621,10 @@ postcss@^8.4.33:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-prettier@^2.7.1:
-  version "2.8.8"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
 pretty-error@^4.0.0:
   version "4.0.0"