@replicated/portal-components 0.0.19 → 0.0.21

package/dist/update-layout.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var buffer = require('buffer');
 var Link = require('next/link');
+var buffer = require('buffer');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -13,7 +13,97 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
  * Enterprise Portal Components
  * This file is generated by tsup. Do not edit manually.
  */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// datadog/tracer.ts
+var tracer_exports = {};
+__export(tracer_exports, {
+  default: () => tracer_default
+});
+var tracer_default;
 
+// src/utils/constants.ts
+var DEFAULT_PRIMARY_COLOR = "#4f46e5";
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
+
+// src/utils/branding.ts
+var normalizeColor = (color) => {
+  if (!color || typeof color !== "string") {
+    return void 0;
+  }
+  const trimmed = color.trim();
+  if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed)) {
+    return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  }
+  console.debug("[portal-components] Invalid color format rejected (only hex supported):", trimmed);
+  return void 0;
+};
+var sanitizeUrlForCss = (url) => {
+  if (!url || typeof url !== "string") {
+    return void 0;
+  }
+  const trimmed = url.trim();
+  try {
+    const urlObj = new URL(trimmed);
+    if (!["http:", "https:", "data:"].includes(urlObj.protocol)) {
+      console.debug("[portal-components] Invalid URL protocol for background image:", urlObj.protocol);
+      return void 0;
+    }
+  } catch {
+    console.debug("[portal-components] Invalid URL format for background image:", trimmed);
+    return void 0;
+  }
+  const escaped = trimmed.replace(/\\/g, "\\\\").replace(/\)/g, "\\)").replace(/"/g, '\\"').replace(/'/g, "\\'").replace(/[\x00-\x1F\x7F]/g, "");
+  return escaped;
+};
+var decodeBranding = ({ brandingData }) => {
+  if (!brandingData || typeof brandingData !== "string") {
+    return {
+      primaryColor: DEFAULT_PRIMARY_COLOR,
+      secondaryColor: DEFAULT_SECONDARY_COLOR
+    };
+  }
+  try {
+    const decoded = buffer.Buffer.from(brandingData, "base64").toString("utf-8");
+    const parsed = JSON.parse(decoded);
+    const logo = typeof parsed.logo === "string" ? parsed.logo : void 0;
+    const titleRaw = typeof parsed.title === "string" ? parsed.title.trim() : "";
+    const title = titleRaw ? titleRaw : void 0;
+    const favicon = typeof parsed.favicon === "string" ? parsed.favicon : void 0;
+    const primaryColorRaw = parsed.primaryColor ?? parsed.primary_color;
+    const secondaryColorRaw = parsed.secondaryColor ?? parsed.secondary_color;
+    const primaryColor = normalizeColor(primaryColorRaw);
+    const secondaryColor = normalizeColor(secondaryColorRaw);
+    const supportPortalLink = typeof parsed.supportPortalLink === "string" ? parsed.supportPortalLink : void 0;
+    const backgroundRaw = parsed.background;
+    const background = backgroundRaw === "minimal" || backgroundRaw === "custom" || backgroundRaw === "image" ? backgroundRaw : void 0;
+    const backgroundImage = sanitizeUrlForCss(parsed.backgroundImage);
+    const backgroundGradientStart = normalizeColor(parsed.customColor1);
+    const backgroundGradientEnd = normalizeColor(parsed.customColor2);
+    return {
+      logo,
+      title,
+      favicon,
+      primaryColor: primaryColor || DEFAULT_PRIMARY_COLOR,
+      secondaryColor: secondaryColor || DEFAULT_SECONDARY_COLOR,
+      supportPortalLink,
+      background,
+      backgroundImage,
+      backgroundGradientStart,
+      backgroundGradientEnd
+    };
+  } catch (error) {
+    console.debug("[portal-components] unable to parse branding JSON", error);
+    return {
+      primaryColor: DEFAULT_PRIMARY_COLOR,
+      secondaryColor: DEFAULT_SECONDARY_COLOR
+    };
+  }
+};
 
 // src/actions/index.ts
 var getApiOrigin = () => {
@@ -46,11 +136,15 @@ var fetchCustomBrandingImpl = async () => {
   const payload = await response.json();
   const brandingObject = {
     logo: payload.logoUrl,
-    title: payload.appName,
-    customColor1: payload.primaryColor,
-    customColor2: payload.secondaryColor,
+    title: payload.title,
+    primaryColor: payload.primaryColor,
+    secondaryColor: payload.secondaryColor,
     favicon: payload.faviconUrl,
-    supportPortalLink: payload.supportPortalLink || ""
+    supportPortalLink: payload.supportPortalLink || "",
+    background: payload.background,
+    backgroundImage: payload.backgroundImage,
+    customColor1: payload.customColor1,
+    customColor2: payload.customColor2
   };
   const brandingData = buffer.Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {
@@ -245,57 +339,49 @@ var TopNav = async ({
   currentCustomerId,
   onChangeTeam,
   userMenuChildren,
-  logoutButton
+  logoutButton,
+  branding: brandingProp
 }) => {
   const displayLabel = userMenuLabel || (customerName ? `Team: ${customerName}` : "Team: Example");
   let logo;
   let brandTitle;
-  let customColor1;
-  let customColor2;
-  const normalizeColor = (color) => {
-    if (!color || typeof color !== "string") {
-      return void 0;
-    }
-    const trimmed = color.trim();
-    if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed)) {
-      return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  let primaryColor;
+  let secondaryColor;
+  let background;
+  let backgroundImageUrl;
+  let backgroundGradientStart;
+  let backgroundGradientEnd;
+  if (brandingProp) {
+    if (brandingProp.logo && typeof brandingProp.logo === "string") {
+      logo = brandingProp.logo;
     }
-    return trimmed;
-  };
-  try {
-    const branding = await fetchCustomBranding();
-    if (branding.brandingData) {
-      const decoded = buffer.Buffer.from(branding.brandingData, "base64").toString(
-        "utf-8"
-      );
-      try {
-        const parsed = JSON.parse(decoded);
-        if (parsed?.logo && typeof parsed.logo === "string") {
-          logo = parsed.logo;
-        }
-        if (parsed?.title && typeof parsed.title === "string") {
-          const normalizedTitle = parsed.title.trim();
-          if (normalizedTitle) {
-            brandTitle = normalizedTitle;
-          }
-        }
-        if (parsed?.customColor1 && typeof parsed.customColor1 === "string") {
-          customColor1 = normalizeColor(parsed.customColor1);
-        }
-        if (parsed?.customColor2 && typeof parsed.customColor2 === "string") {
-          customColor2 = normalizeColor(parsed.customColor2);
-        }
-      } catch (error) {
-        console.debug(
-          "[portal-components] unable to parse branding JSON",
-          error
-        );
+    if (brandingProp.title && typeof brandingProp.title === "string") {
+      const normalizedTitle = brandingProp.title.trim();
+      if (normalizedTitle) {
+        brandTitle = normalizedTitle;
       }
-    } else {
-      console.debug("[portal-components] branding", branding);
     }
-  } catch (error) {
-    console.debug("[portal-components] branding fetch failed", error);
+    primaryColor = normalizeColor(brandingProp.primaryColor);
+    secondaryColor = normalizeColor(brandingProp.secondaryColor);
+    background = brandingProp.background;
+    backgroundImageUrl = brandingProp.backgroundImage;
+    backgroundGradientStart = normalizeColor(brandingProp.backgroundGradientStart);
+    backgroundGradientEnd = normalizeColor(brandingProp.backgroundGradientEnd);
+  } else {
+    try {
+      const brandingResponse = await fetchCustomBranding();
+      const branding = decodeBranding({ brandingData: brandingResponse.brandingData });
+      logo = branding.logo;
+      brandTitle = branding.title;
+      primaryColor = branding.primaryColor;
+      secondaryColor = branding.secondaryColor;
+      background = branding.background;
+      backgroundImageUrl = branding.backgroundImage;
+      backgroundGradientStart = branding.backgroundGradientStart;
+      backgroundGradientEnd = branding.backgroundGradientEnd;
+    } catch (error) {
+      console.debug("[portal-components] branding fetch failed", error);
+    }
   }
   const baseLinks = links ?? defaultTopNavLinks;
   const hiddenSet = hiddenLabels ? new Set(hiddenLabels) : null;
@@ -306,20 +392,32 @@ var TopNav = async ({
     resolvedLinks = [...resolvedLinks, ...additionalLinks];
   }
   resolvedLinks = orderLinks(resolvedLinks, order);
-  const gradientStart = customColor1 ?? "rgb(235, 102, 88)";
-  const gradientEnd = customColor2 ?? customColor1 ?? "rgb(184, 83, 71)";
+  const getHeaderBackgroundStyle = () => {
+    if (background === "image" && backgroundImageUrl) {
+      return {
+        background: `url(${backgroundImageUrl})`,
+        backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0)), url(${backgroundImageUrl})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat"
+      };
+    }
+    const gradientStart = background === "custom" && backgroundGradientStart ? backgroundGradientStart : primaryColor;
+    const gradientEnd = background === "custom" && backgroundGradientEnd ? backgroundGradientEnd : secondaryColor;
+    return {
+      backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 33%), linear-gradient(${gradientStart}, ${gradientEnd})`,
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "100% 100%"
+    };
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       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",
-        backgroundSize: "100% 100%"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-[30px] w-full max-w-[1248px] px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[135px] flex-col justify-between space-y-4 rounded bg-[#ffffffe6] px-6 pt-6 pb-4 shadow-[0_10px_60px_rgba(16,16,16,0.35)]", children: [
+      style: getHeaderBackgroundStyle(),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-[30px] w-full max-w-[1248px] px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[142px] flex-col justify-between space-y-4 rounded bg-[#ffffffe6] px-6 pt-6 pb-4 shadow-[0_10px_60px_rgba(16,16,16,0.35)]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          logo || brandTitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
             logo ? (
               // eslint-disable-next-line @next/next/no-img-element
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -334,9 +432,24 @@ var TopNav = async ({
                   }
                 }
               )
-            ) : null,
-            brandTitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900", children: brandTitle }) : null
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                className: "h-8 w-8 text-gray-400",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "4", ry: "10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900", children: brandTitle || "Enterprise Portal" })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
@@ -398,7 +511,7 @@ var TopNav = async ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-3 border-b border-gray-200 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-3 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {
           const isActive = activeLabel === label;
           const className = `flex items-center gap-2 px-4 py-1 transition text-gray-500 ${isActive ? "underline underline-offset-8 decoration-2" : ""}`;
           if (href) {