refactor: adjust label of pingap config web page

vicanso · Oct 14, 2024 · 2b917cf · 2b917cf
1 parent 34c99e1
commit 2b917cf
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/web/src/helpers/util.ts b/web/src/helpers/util.ts
@@ -62,3 +62,10 @@ export function random(length = 8) {
 
   return str;
 }
+
+export function formatLabel(label: string) {
+  if (label === "*") {
+    return "NEW";
+  }
+  return label;
+}
diff --git a/web/src/pages/Certificates.tsx b/web/src/pages/Certificates.tsx
@@ -14,6 +14,7 @@ import {
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
 import { ScrollRestoration } from "react-router-dom";
+import { formatLabel } from "@/helpers/util";
 
 function getCertificateConfig(
   name: string,
@@ -150,6 +151,11 @@ export default function Certificates() {
       <div className="flex">
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
+          <h2 className="h-8 mb-1">
+            <span className="border-b-2 border-solid p-1 border-[rgb(var(--foreground-rgb))]">
+              {formatLabel(currentCertificate).toUpperCase()}
+            </span>
+          </h2>
           <ExForm
             category="certificate"
             key={currentCertificate}

diff --git a/web/src/pages/Locations.tsx b/web/src/pages/Locations.tsx
@@ -8,7 +8,7 @@ import { ExForm, ExFormItem } from "@/components/ex-form";
 import { pascal } from "radash";
 import { z } from "zod";
 import { ExFormItemCategory, newStringOptions } from "@/constants";
-import { newZodBytes } from "@/helpers/util";
+import { formatLabel, newZodBytes } from "@/helpers/util";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
 import { ScrollRestoration } from "react-router-dom";
@@ -190,6 +190,11 @@ export default function Locations() {
       <div className="flex">
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
+          <h2 className="h-8 mb-1">
+            <span className="border-b-2 border-solid p-1 border-[rgb(var(--foreground-rgb))]">
+              {formatLabel(currentLocation).toUpperCase()}
+            </span>
+          </h2>
           <ExForm
             category="location"
             key={currentLocation}

diff --git a/web/src/pages/Servers.tsx b/web/src/pages/Servers.tsx
@@ -11,7 +11,7 @@ import {
   newStringOptions,
   newBooleanOptions,
 } from "@/constants";
-import { newZodDuration } from "@/helpers/util";
+import { formatLabel, newZodDuration } from "@/helpers/util";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
 import { ScrollRestoration } from "react-router-dom";
@@ -244,6 +244,11 @@ export default function Servers() {
       <div className="flex">
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
+          <h2 className="h-8 mb-1">
+            <span className="border-b-2 border-solid p-1 border-[rgb(var(--foreground-rgb))]">
+              {formatLabel(currentServer).toUpperCase()}
+            </span>
+          </h2>
           <ExForm
             category="server"
             key={currentServer}

diff --git a/web/src/pages/Upstreams.tsx b/web/src/pages/Upstreams.tsx
@@ -11,7 +11,7 @@ import {
   newStringOptions,
   newBooleanOptions,
 } from "@/constants";
-import { newZodBytes, newZodDuration } from "@/helpers/util";
+import { formatLabel, newZodBytes, newZodDuration } from "@/helpers/util";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
 import { ScrollRestoration } from "react-router-dom";
@@ -296,6 +296,11 @@ export default function Upstreams() {
       <div className="flex">
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
+          <h2 className="h-8 mb-1">
+            <span className="border-b-2 border-solid p-1 border-[rgb(var(--foreground-rgb))]">
+              {formatLabel(currentUpstream).toUpperCase()}
+            </span>
+          </h2>
           <ExForm
             category="upstream"
             key={currentUpstream}