feat(ui): add layers logs page and components (#220)

* feat(ui): add logs page

* build(ui): upgrade minor dependencies

* feat(ui): add eye icon

* feat(ui): first implementation of NavigationLink component

* fix(ui): fix children on NavigationLink

* feat(ui): add logs button to cards

* refactor(ui): change logs link

* feat(ui): begin logs page

* feat(ui): add missing dark theme color on card

* feat(ui): add basic runcard component

* feat(ui): map runcards on logs page

* feat(ui): add repository dropdown to logs

* feat(ui): add ui date dropdown

* refactor(ui): improve some style block

* refactor(ui): move logs button to a separate component

* refactor(ui): move running to a component

* feat(ui): add logs button on table

* feat(ui): add basic logs terminal

* refactor(ui): change components file structure

* feat(ui): add attempt button component

* refactor(ui): change some info on logs page

* feat(ui): extend logs terminal

* feat(ui): final logs page layout

* feat(ui): add path parameters to logs page

* fix(ui): fix dom issues in logs terminal

* fix(ui): change colors on logs terminal

* feat(ui): add layer run count

* feat(ui): add copy function to logs terminal

* feat(ui): add run client

* feat(ui): add attempts dropdown

* feat(ui): add filled logic on attempts dropdown

* feat(ui): get latest runs from api

* feat(ui): connect terminal to active layer

* feat(ui): connect run to logs terminal

* fix(ui): block line breaking on attempt button

* refactor(ui): update loader height

* feat(ui): add runcard loader

* feat(ui): add status messages from query

* fix(ui): add gap on cards

* refactor(ui): use real id for ressources

* fix(ui): minor improvements on logs terminal

* feat(ui): add logs client

* feat(ui): fetch logs from api on logs terminal

* feat(ui): add refetch logs button

* fix(ui): fix import after rebase

* fix(ui): fix wrong condition on logs terminal

* fix(ui): fix run card clickable zone

* feat(ui): allow change active run on run card

* fix(ui): fix wrong logs query order

* fix(ui): fix switching layer when switching run

* fix(ui): fix terminal layout when attempt buttons overflow

* fix(ui): fix incorrect text

* fix(ui): fix terminal buttons

* fix(ui): fix terminal overflow

* feat(ui): add logs copied tooltip

* refactor(ui): clean terminal code

* fix(ui): stop propagation on run card expand

* build(ui): update npm dependencies

* refactor(ui): move layerid and runid to path parameters

* fix(ui): fix wrong text color in dropdowns

* feat(ui): add sort by date filter

* fix(ui): fix missing search params when navigating

* feat(ui): add modal logs terminal integration

* feat(ui): add openinlogs button

* feat(ui): add open in logs navigation

* build(ui): upgrade dependencies

* build(ui): update node build image

* refactor(ui): make variant prop optional

Dockerfile

@@ -1,6 +1,6 @@
 # Build Burrito UI
 
-FROM docker.io/library/node:20.9.0@sha256:5f21943fe97b24ae1740da6d7b9c56ac43fe3495acb47c1b232b0a352b02a25c AS builder-ui
+FROM docker.io/library/node:20.11.1@sha256:f3299f16246c71ab8b304d6745bb4059fa9283e8d025972e28436a9f9b36ed24 AS builder-ui
 
 WORKDIR /workspace
 # Copy the node modules manifests

ui/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

ui/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.9",
     "@tanstack/react-query": "^5.8.3",
     "@tanstack/react-table": "^8.10.7",
     "axios": "^1.5.1",
@@ -22,16 +23,16 @@
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.45.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
     "vite": "^5.0.11"
   }
 }

ui/src/App.tsx

@@ -8,9 +8,10 @@ import {
 import ThemeProvider from "@/contexts/ThemeContext";
 
 import Layout from "@/layout/Layout";
-import Layers from "@/pages/layers/Layers";
-import Pulls from "@/pages/pulls/Pulls";
-import Login from "@/pages/login/Login";
+import Layers from "@/pages/Layers";
+import Pulls from "@/pages/Pulls";
+import Logs from "@/pages/Logs";
+import Login from "@/pages/Login";
 
 const queryClient = new QueryClient();
 const router = createBrowserRouter([
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
         path: "pulls",
         element: <Pulls />,
       },
+      {
+        path: "logs/:layerId?/:runId?",
+        element: <Logs />,
+      },
     ],
   },
   {

ui/src/assets/icons/ArrowResizeDiagonalIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const ArrowResizeDiagonalIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M21.92 2.62C21.8185 2.37565 21.6243 2.18147 21.38 2.08C21.2598 2.02876 21.1307 2.00158 21 2H15C14.7348 2 14.4804 2.10536 14.2929 2.29289C14.1054 2.48043 14 2.73478 14 3C14 3.26522 14.1054 3.51957 14.2929 3.70711C14.4804 3.89464 14.7348 4 15 4H18.59L4 18.59V15C4 14.7348 3.89464 14.4804 3.70711 14.2929C3.51957 14.1054 3.26522 14 3 14C2.73478 14 2.48043 14.1054 2.29289 14.2929C2.10536 14.4804 2 14.7348 2 15V21C2.00158 21.1307 2.02876 21.2598 2.08 21.38C2.18147 21.6243 2.37565 21.8185 2.62 21.92C2.74022 21.9712 2.86932 21.9984 3 22H9C9.26522 22 9.51957 21.8946 9.70711 21.7071C9.89464 21.5196 10 21.2652 10 21C10 20.7348 9.89464 20.4804 9.70711 20.2929C9.51957 20.1054 9.26522 20 9 20H5.41L20 5.41V9C20 9.26522 20.1054 9.51957 20.2929 9.70711C20.4804 9.89464 20.7348 10 21 10C21.2652 10 21.5196 9.89464 21.7071 9.70711C21.8946 9.51957 22 9.26522 22 9V3C21.9984 2.86932 21.9712 2.74022 21.92 2.62Z" />
+  </svg>
+);
+
+export default ArrowResizeDiagonalIcon;

ui/src/assets/icons/CopyIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M21 8.94C20.9896 8.84813 20.9695 8.75763 20.94 8.67V8.58C20.8919 8.47718 20.8278 8.38267 20.75 8.3L14.75 2.3C14.6673 2.22222 14.5728 2.15808 14.47 2.11C14.4402 2.10576 14.4099 2.10576 14.38 2.11C14.2784 2.05174 14.1662 2.01434 14.05 2H10C9.20435 2 8.44129 2.31607 7.87868 2.87868C7.31607 3.44129 7 4.20435 7 5V6H6C5.20435 6 4.44129 6.31607 3.87868 6.87868C3.31607 7.44129 3 8.20435 3 9V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H14C14.7956 22 15.5587 21.6839 16.1213 21.1213C16.6839 20.5587 17 19.7956 17 19V18H18C18.7956 18 19.5587 17.6839 20.1213 17.1213C20.6839 16.5587 21 15.7956 21 15V9C21 9 21 9 21 8.94ZM15 5.41L17.59 8H16C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V5.41ZM15 19C15 19.2652 14.8946 19.5196 14.7071 19.7071C14.5196 19.8946 14.2652 20 14 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8H7V15C7 15.7956 7.31607 16.5587 7.87868 17.1213C8.44129 17.6839 9.20435 18 10 18H15V19ZM19 15C19 15.2652 18.8946 15.5196 18.7071 15.7071C18.5196 15.8946 18.2652 16 18 16H10C9.73478 16 9.48043 15.8946 9.29289 15.7071C9.10536 15.5196 9 15.2652 9 15V5C9 4.73478 9.10536 4.48043 9.29289 4.29289C9.48043 4.10536 9.73478 4 10 4H13V7C13 7.79565 13.3161 8.55871 13.8787 9.12132C14.4413 9.68393 15.2044 10 16 10H19V15Z" />
+  </svg>
+);
+
+export default CopyIcon;

ui/src/assets/icons/DownloadAltIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const DownloadAltIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M8.29 13.29C8.19627 13.383 8.12188 13.4936 8.07111 13.6154C8.02034 13.7373 7.9942 13.868 7.9942 14C7.9942 14.132 8.02034 14.2627 8.07111 14.3846C8.12188 14.5064 8.19627 14.617 8.29 14.71L11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L15.71 14.71C15.8983 14.5217 16.0041 14.2663 16.0041 14C16.0041 13.7337 15.8983 13.4783 15.71 13.29C15.5217 13.1017 15.2663 12.9959 15 12.9959C14.7337 12.9959 14.4783 13.1017 14.29 13.29L13 14.59V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V14.59L9.71 13.29C9.61704 13.1963 9.50644 13.1219 9.38458 13.0711C9.26272 13.0203 9.13201 12.9942 9 12.9942C8.86799 12.9942 8.73728 13.0203 8.61542 13.0711C8.49356 13.1219 8.38296 13.1963 8.29 13.29ZM18 9H16C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10C15 10.2652 15.1054 10.5196 15.2929 10.7071C15.4804 10.8946 15.7348 11 16 11H18C18.2652 11 18.5196 11.1054 18.7071 11.2929C18.8946 11.4804 19 11.7348 19 12V19C19 19.2652 18.8946 19.5196 18.7071 19.7071C18.5196 19.8946 18.2652 20 18 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V12C5 11.7348 5.10536 11.4804 5.29289 11.2929C5.48043 11.1054 5.73478 11 6 11H8C8.26522 11 8.51957 10.8946 8.70711 10.7071C8.89464 10.5196 9 10.2652 9 10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9H6C5.20435 9 4.44129 9.31607 3.87868 9.87868C3.31607 10.4413 3 11.2044 3 12V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H18C18.7956 22 19.5587 21.6839 20.1213 21.1213C20.6839 20.5587 21 19.7956 21 19V12C21 11.2044 20.6839 10.4413 20.1213 9.87868C19.5587 9.31607 18.7956 9 18 9Z" />
+  </svg>
+);
+
+export default DownloadAltIcon;

ui/src/assets/icons/EyeIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const EyeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M21.9201 11.6C19.9001 6.91 16.1001 4 12.0001 4C7.90007 4 4.10007 6.91 2.08007 11.6C2.025 11.7262 1.99658 11.8623 1.99658 12C1.99658 12.1377 2.025 12.2738 2.08007 12.4C4.10007 17.09 7.90007 20 12.0001 20C16.1001 20 19.9001 17.09 21.9201 12.4C21.9751 12.2738 22.0036 12.1377 22.0036 12C22.0036 11.8623 21.9751 11.7262 21.9201 11.6ZM12.0001 18C8.83007 18 5.83007 15.71 4.10007 12C5.83007 8.29 8.83007 6 12.0001 6C15.1701 6 18.1701 8.29 19.9001 12C18.1701 15.71 15.1701 18 12.0001 18ZM12.0001 8C11.2089 8 10.4356 8.2346 9.77779 8.67412C9.11999 9.11365 8.6073 9.73836 8.30455 10.4693C8.0018 11.2002 7.92258 12.0044 8.07693 12.7804C8.23127 13.5563 8.61223 14.269 9.17164 14.8284C9.73105 15.3878 10.4438 15.7688 11.2197 15.9231C11.9956 16.0775 12.7999 15.9983 13.5308 15.6955C14.2617 15.3928 14.8864 14.8801 15.3259 14.2223C15.7655 13.5645 16.0001 12.7911 16.0001 12C16.0001 10.9391 15.5786 9.92172 14.8285 9.17157C14.0783 8.42143 13.0609 8 12.0001 8ZM12.0001 14C11.6045 14 11.2178 13.8827 10.8889 13.6629C10.56 13.4432 10.3037 13.1308 10.1523 12.7654C10.0009 12.3999 9.96133 11.9978 10.0385 11.6098C10.1157 11.2219 10.3061 10.8655 10.5859 10.5858C10.8656 10.3061 11.2219 10.1156 11.6099 10.0384C11.9978 9.96126 12.4 10.0009 12.7654 10.1522C13.1309 10.3036 13.4432 10.56 13.663 10.8889C13.8828 11.2178 14.0001 11.6044 14.0001 12C14.0001 12.5304 13.7894 13.0391 13.4143 13.4142C13.0392 13.7893 12.5305 14 12.0001 14Z" />
+  </svg>
+);
+
+export default EyeIcon;

ui/src/assets/icons/TimesIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const TimesIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" />
+  </svg>
+);
+
+export default TimesIcon;

ui/src/assets/icons/WindowIcon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+const WindowIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg height={24} width={24} viewBox="0 0 24 24" {...props}>
+    <path d="M10 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm8 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm6-4H4a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3Zm1 19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9h18v9Zm0-11H3V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5Z" />
+  </svg>
+);
+
+export default WindowIcon;

ui/src/clients/layers/types.ts

@@ -3,15 +3,26 @@ export type Layers = {
 };
 
 export type Layer = {
+  id: string;
   namespace: string;
   name: string;
   state: LayerState;
   repository: string;
   branch: string;
   path: string;
+  runCount: number;
+  lastRunAt: string;
+  latestRuns: Run[];
   lastResult: string;
   isRunning: boolean;
   isPR: boolean;
 };
 
 export type LayerState = "success" | "warning" | "error" | "disabled";
+
+export type Run = {
+  id: string;
+  commit: string;
+  date: string;
+  action: string;
+};

ui/src/clients/logs/client.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+import { Logs } from "@/clients/logs/types.ts";
+
+export const fetchLogs = async (runId: string, attemptId: number | null) => {
+  const response = await axios.get<Logs>(
+    `${import.meta.env.VITE_API_BASE_URL}/logs/${runId}/${attemptId}`
+  );
+  return response.data;
+};

ui/src/clients/logs/types.ts

@@ -0,0 +1,3 @@
+export type Logs = {
+  results: string[];
+};

ui/src/clients/reactQueryConfig.ts

@@ -1,4 +1,6 @@
 export const reactQueryKeys = {
   layers: ["layers"],
   repositories: ["repositories"],
+  attempts: (runId: string) => ["run", runId, "attempts"],
+  logs: (runId: string, attemptId: number | null) => ["logs", runId, attemptId],
 };

ui/src/clients/runs/client.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+import { Attempts } from "@/clients/runs/types.ts";
+
+export const fetchAttempts = async (runId: string) => {
+  const response = await axios.get<Attempts>(
+    `${import.meta.env.VITE_API_BASE_URL}/run/${runId}/attempts`
+  );
+  return response.data;
+};

ui/src/clients/runs/types.ts

@@ -0,0 +1,3 @@
+export type Attempts = {
+  count: number;
+};

ui/src/components/buttons/AttemptButton.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+import TimesIcon from "@/assets/icons/TimesIcon";
+
+export interface AttemptButtonProps {
+  className?: string;
+  variant?: "light" | "dark";
+  attempt: number;
+  isActive?: boolean;
+  onClick?: () => void;
+  onClose?: () => void;
+}
+
+const AttemptButton: React.FC<AttemptButtonProps> = ({
+  className,
+  variant = "light",
+  attempt,
+  isActive,
+  onClick,
+  onClose,
+}) => {
+  const styles = {
+    base: {
+      light: `bg-primary-300
+        text-nuances-black
+        fill-primary-600`,
+
+      dark: `bg-nuances-300
+        text-nuances-400
+        fill-nuances-400`,
+    },
+
+    isActive: {
+      light: `bg-primary-500
+        text-nuances-black
+        fill-primary-600`,
+
+      dark: `bg-nuances-black
+        text-nuances-white
+        fill-nuances-50`,
+    },
+  };
+
+  const handleClose = (e: React.MouseEvent<SVGSVGElement>) => {
+    e.stopPropagation();
+    onClose && onClose();
+  };
+
+  return (
+    <button
+      className={twMerge(
+        `flex
+        flex-row
+        items-center
+        gap-2
+        p-4
+        rounded
+        cursor-pointer
+        ${styles.base[variant]}`,
+        isActive && styles.isActive[variant],
+        className
+      )}
+      onClick={onClick}
+    >
+      <span className="whitespace-nowrap">Attempt {attempt}</span>
+      <TimesIcon className="cursor-pointer" onClick={handleClose} />
+    </button>
+  );
+};
+
+export default AttemptButton;

ui/src/components/buttons/LogsButton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+import WindowIcon from "@/assets/icons/WindowIcon";
+
+export interface LogsButtonProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  variant?: "light" | "dark";
+}
+
+const LogsButton = React.forwardRef<HTMLButtonElement, LogsButtonProps>(
+  ({ className, variant = "light", ...props }, ref) => {
+    return (
+      <button
+        className={twMerge(
+          `${
+            variant === "light"
+              ? "hover:bg-primary-300 "
+              : "hover:bg-nuances-black"
+          }
+          rounded-full
+          cursor-pointer
+          transition-colors
+          duration-300`,
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <WindowIcon className="p-2 fill-blue-500" width={40} height={40} />
+      </button>
+    );
+  }
+);
+
+export default LogsButton;

ui/src/components/buttons/OpenInLogsButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import Button from "@/components/core/Button";
+import ArrowResizeDiagonalIcon from "@/assets/icons/ArrowResizeDiagonalIcon";
+
+export interface OpenInLogsButtonProps {
+  className?: string;
+  variant?: "primary" | "secondary" | "tertiary";
+  onClick?: () => void;
+}
+
+const OpenInLogsButton: React.FC<OpenInLogsButtonProps> = ({
+  className,
+  variant = "primary",
+  onClick,
+}) => {
+  return (
+    <Button
+      rightIcon={<ArrowResizeDiagonalIcon />}
+      className={className}
+      variant={variant}
+      onClick={onClick}
+    >
+      Open in logs
+    </Button>
+  );
+};
+
+export default OpenInLogsButton;

ui/src/components/buttons/SocialButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Button from "@/components/buttons/Button";
+import Button from "@/components/core/Button";
 import GithubIcon from "@/assets/icons/GithubIcon";
 import GitlabIcon from "@/assets/icons/GitlabIcon";