@replicated/portal-components 0.0.11 → 0.0.13

package/dist/esm/update-layout.js

@@ -18,12 +18,12 @@ var fetchCustomBrandingImpl = async () => {
   if (!appSlug) {
     throw new Error("PORTAL_APP_SLUG is not configured");
   }
-  const url = `${getApiOrigin()}/v3/custom-branding?app_slug=${encodeURIComponent(
+  const url = `${getApiOrigin()}/enterprise-portal/public/branding?app_slug=${encodeURIComponent(
     appSlug
   )}`;
   if (process.env.NODE_ENV !== "production") {
     console.debug(
-      "[portal-components] fetching custom branding via %s",
+      "[portal-components] fetching custom branding via %s (Enterprise Portal API)",
       url
     );
   }
@@ -38,17 +38,21 @@ var fetchCustomBrandingImpl = async () => {
     );
   }
   const payload = await response.json();
-  const brandingData = payload?.branding_data;
-  if (typeof brandingData !== "string") {
-    throw new Error("Custom branding response missing branding_data string");
-  }
+  const brandingObject = {
+    logo: payload.logoUrl,
+    title: payload.appName,
+    customColor1: payload.primaryColor,
+    customColor2: payload.secondaryColor,
+    favicon: payload.faviconUrl
+  };
+  const brandingData = Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {
     brandingData,
-    documentation: payload?.documentation ?? null
+    documentation: null
+    // Documentation not included in new API's public endpoint
   };
 };
 var fetchCustomBranding = cache(fetchCustomBrandingImpl);
-var defaultHiddenLabels = ["Download"];
 var defaultTopNavLinks = [
   {
     label: "Dashboard",
@@ -61,16 +65,21 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("path", { d: "M4 13h6V3H4z" }),
-          /* @__PURE__ */ jsx("path", { d: "M14 21h6V3h-6z" })
+          /* @__PURE__ */ jsx("rect", { width: "7", height: "9", x: "3", y: "3", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { width: "7", height: "5", x: "14", y: "3", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { width: "7", height: "9", x: "14", y: "12", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { width: "7", height: "5", x: "3", y: "16", rx: "1" })
         ]
       }
     )
   },
   {
-    label: "Download",
+    label: "Install",
+    href: "/install",
     icon: /* @__PURE__ */ jsxs(
       "svg",
       {
@@ -79,18 +88,20 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
-          /* @__PURE__ */ jsx("path", { d: "m7 11 5 5 5-5" }),
-          /* @__PURE__ */ jsx("path", { d: "M5 21h14" })
+          /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
         ]
       }
     )
   },
   {
-    label: "Install",
-    href: "/install",
+    label: "Update",
+    href: "/update",
     icon: /* @__PURE__ */ jsxs(
       "svg",
       {
@@ -99,18 +110,20 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
-          /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+          /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+          /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
         ]
       }
     )
   },
   {
-    label: "Update",
-    href: "/update",
-    icon: /* @__PURE__ */ jsxs(
+    label: "Security",
+    href: "/security",
+    icon: /* @__PURE__ */ jsx(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -118,12 +131,10 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-          /* @__PURE__ */ jsx("path", { d: "M4 4v6h6" }),
-          /* @__PURE__ */ jsx("path", { d: "M20 20v-6h-6" }),
-          /* @__PURE__ */ jsx("path", { d: "M4 10c1.5-4 6-6 10-4m6 4c-1.5 4-6 6-10 4" })
-        ]
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" })
       }
     )
   },
@@ -138,10 +149,15 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("path", { d: "M12 8v4l3 2" }),
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" })
+          /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+          /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
+          /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
+          /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
         ]
       }
     )
@@ -157,12 +173,13 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("rect", { width: "14", height: "18", x: "5", y: "3", rx: "2" }),
-          /* @__PURE__ */ jsx("path", { d: "M9 7h6" }),
-          /* @__PURE__ */ jsx("path", { d: "M9 11h6" }),
-          /* @__PURE__ */ jsx("path", { d: "M9 15h6" })
+          /* @__PURE__ */ jsx("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 2-9.6 9.6" }),
+          /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "15.5", r: "5.5" })
         ]
       }
     )
@@ -178,10 +195,16 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx("path", { d: "M18 16a6 6 0 1 0-12 0v2h12Z" }),
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx("path", { d: "m4.93 4.93 4.24 4.24" }),
+          /* @__PURE__ */ jsx("path", { d: "m14.83 9.17 4.24-4.24" }),
+          /* @__PURE__ */ jsx("path", { d: "m14.83 14.83 4.24 4.24" }),
+          /* @__PURE__ */ jsx("path", { d: "m9.17 14.83-4.24 4.24" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" })
         ]
       }
     )
@@ -267,8 +290,7 @@ var TopNav = async ({
     console.debug("[portal-components] branding fetch failed", error);
   }
   const baseLinks = links ?? defaultTopNavLinks;
-  const computedHiddenLabels = hiddenLabels ? hiddenLabels : links ? void 0 : defaultHiddenLabels;
-  const hiddenSet = computedHiddenLabels ? new Set(computedHiddenLabels) : null;
+  const hiddenSet = hiddenLabels ? new Set(hiddenLabels) : null;
   let resolvedLinks = baseLinks.filter(
     (link) => !hiddenSet?.has(link.label)
   );
@@ -281,7 +303,7 @@ var TopNav = async ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative flex h-[165px] w-full items-start justify-center",
+      className: "relative flex h-[280px] w-full items-start justify-center",
       style: {
         backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 33%), linear-gradient(${gradientStart}, ${gradientEnd})`,
         backgroundRepeat: "no-repeat",
@@ -308,7 +330,7 @@ var TopNav = async ({
             brandTitle ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-900", children: brandTitle }) : null
           ] }) : /* @__PURE__ */ jsx("div", {}),
           /* @__PURE__ */ jsxs("details", { className: "group relative", children: [
-            /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 list-none", children: [
+            /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 list-none", children: [
               /* @__PURE__ */ jsxs(
                 "svg",
                 {
@@ -380,12 +402,12 @@ var TopNav = async ({
           const className = `flex items-center gap-2 px-4 py-1 transition text-gray-500 ${isActive ? "underline underline-offset-8 decoration-2" : ""}`;
           if (href) {
             return /* @__PURE__ */ jsxs(Link, { href, className, children: [
-              /* @__PURE__ */ jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: isActive ? "text-gray-900" : "text-gray-500", children: icon }),
               /* @__PURE__ */ jsx("span", { children: label })
             ] }, label);
           }
           return /* @__PURE__ */ jsxs("button", { className, type: "button", children: [
-            /* @__PURE__ */ jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+            /* @__PURE__ */ jsx("span", { className: isActive ? "text-gray-900" : "text-gray-500", children: icon }),
             /* @__PURE__ */ jsx("span", { children: label })
           ] }, label);
         }) })