Added namespace ids and label (#2670)

Allowed editing names after adding to experiments. Fixed url encoding problem when editing and deleting. Fixed missing curly braces

packages/back-end/src/routers/organizations/organizations.controller.ts

@@ -16,6 +16,7 @@ import {
   isRoleValid,
   getDefaultRole,
 } from "shared/permissions";
+import uniqid from "uniqid";
 import {
   UpdateSdkWebhookProps,
   deleteLegacySdkWebhookById,
@@ -843,13 +844,13 @@ export async function getNamespaces(req: AuthRequest, res: Response) {
 
 export async function postNamespaces(
   req: AuthRequest<{
-    name: string;
+    label: string;
     description: string;
     status: "active" | "inactive";
   }>,
   res: Response
 ) {
-  const { name, description, status } = req.body;
+  const { label, description, status } = req.body;
   const context = getContextFromReq(req);
 
   if (!context.permissions.canCreateNamespace()) {
@@ -861,14 +862,18 @@ export async function postNamespaces(
   const namespaces = org.settings?.namespaces || [];
 
   // Namespace with the same name already exists
-  if (namespaces.filter((n) => n.name === name).length > 0) {
-    throw new Error("Namespace names must be unique.");
+  if (namespaces.filter((n) => n.label === label).length > 0) {
+    throw new Error("A namespace with this name already exists.");
   }
 
+  // Create a unique id for this new namespace - We might want to clean this
+  // up later, but for now, 'name' is the unique identifier, and 'label' is
+  // the display name.
+  const name = uniqid("ns-");
   await updateOrganization(org.id, {
     settings: {
       ...org.settings,
-      namespaces: [...namespaces, { name, description, status }],
+      namespaces: [...namespaces, { name, label, description, status }],
     },
   });
 
@@ -896,16 +901,17 @@ export async function postNamespaces(
 export async function putNamespaces(
   req: AuthRequest<
     {
-      name: string;
+      label: string;
       description: string;
       status: "active" | "inactive";
     },
     { name: string }
   >,
   res: Response
 ) {
-  const { name, description, status } = req.body;
-  const originalName = req.params.name;
+  const { label, description, status } = req.body;
+  const { name } = req.params;
+
   const context = getContextFromReq(req);
 
   if (!context.permissions.canUpdateNamespace()) {
@@ -916,13 +922,15 @@ export async function putNamespaces(
 
   const namespaces = org.settings?.namespaces || [];
 
-  // Namespace with the same name already exists
-  if (namespaces.filter((n) => n.name === originalName).length === 0) {
+  // Make sure this namespace exists
+  if (namespaces.filter((n) => n.name === name).length === 0) {
     throw new Error("Namespace not found.");
   }
+
   const updatedNamespaces = namespaces.map((n) => {
-    if (n.name === originalName) {
-      return { name, description, status };
+    if (n.name === name) {
+      // cannot update the 'name' (id) of a namespace
+      return { label, name: n.name, description, status };
     }
     return n;
   });

packages/back-end/src/util/migrations.ts

@@ -478,6 +478,14 @@ export function upgradeOrganizationDoc(
     }
   });
 
+  // Make sure namespaces have labels- if it's missing, use the name
+  if (org?.settings?.namespaces?.length) {
+    org.settings.namespaces = org.settings.namespaces.map((ns) => ({
+      ...ns,
+      label: ns.label || ns.name,
+    }));
+  }
+
   return org;
 }
 

packages/back-end/types/organization.d.ts

@@ -122,6 +122,7 @@ export interface MetricDefaults {
 
 export interface Namespaces {
   name: string;
+  label: string;
   description: string;
   status: "active" | "inactive";
 }

packages/front-end/components/Experiment/NamespaceModal.tsx

@@ -19,7 +19,7 @@ export default function NamespaceModal({
   const existingNamespace = existing?.namespace;
   const form = useForm<Partial<Namespaces>>({
     defaultValues: {
-      name: existingNamespace?.name || "",
+      label: existingNamespace?.label || existingNamespace?.name || "",
       description: existingNamespace?.description || "",
       status: existingNamespace?.status || "active",
     },
@@ -34,10 +34,17 @@ export default function NamespaceModal({
       header={existing ? "Edit Namespace" : "Create Namespace"}
       submit={form.handleSubmit(async (value) => {
         if (existing) {
-          await apiCall(`/organization/namespaces/${existingNamespace?.name}`, {
-            method: "PUT",
-            body: JSON.stringify(value),
-          });
+          await apiCall(
+            `/organization/namespaces/${
+              existingNamespace?.name
+                ? encodeURIComponent(existingNamespace.name)
+                : ""
+            }`,
+            {
+              method: "PUT",
+              body: JSON.stringify(value),
+            }
+          );
         } else {
           await apiCall(`/organization/namespaces`, {
             method: "POST",
@@ -47,13 +54,7 @@ export default function NamespaceModal({
         await onSuccess();
       })}
     >
-      <Field
-        label="Name"
-        maxLength={60}
-        disabled={!!existing?.experiments}
-        required
-        {...form.register("name")}
-      />
+      <Field label="Name" maxLength={60} required {...form.register("label")} />
       <Field label="Description" textarea {...form.register("description")} />
     </Modal>
   );

packages/front-end/components/Features/ExperimentRefSummary.tsx

@@ -3,8 +3,10 @@ import Link from "next/link";
 import { ExperimentInterfaceStringDates } from "back-end/types/experiment";
 import React, { ReactElement } from "react";
 import { includeExperimentInPayload } from "shared/util";
+import { FaExclamationTriangle } from "react-icons/fa";
 import { getVariationColor } from "@/services/features";
 import ValidateValue from "@/components/Features/ValidateValue";
+import useOrgSettings from "@/hooks/useOrgSettings";
 import ValueDisplay from "./ValueDisplay";
 import ExperimentSplitVisual from "./ExperimentSplitVisual";
 import ConditionDisplay from "./ConditionDisplay";
@@ -66,6 +68,8 @@ export default function ExperimentRefSummary({
   const { variations } = rule;
   const type = feature.valueType;
 
+  const { namespaces } = useOrgSettings();
+
   if (!experiment) {
     return (
       <ExperimentSkipped
@@ -183,9 +187,19 @@ export default function ExperimentRefSummary({
             <>
               {" "}
               <span>in the namespace </span>
-              <span className="mr-1 border px-2 py-1 bg-light rounded">
-                {phase.namespace.name}
-              </span>
+              <Link href={`/namespaces`}>
+                <span className="mr-1 border px-2 py-1 bg-light rounded">
+                  {namespaces?.find((n) => n.name === phase.namespace.name)
+                    ?.label || (
+                    <span
+                      className="italic text-danger"
+                      title="this namespace is not found"
+                    >
+                      <FaExclamationTriangle /> {phase.namespace.name}
+                    </span>
+                  )}
+                </span>
+              </Link>
             </>
           )}
         </div>

packages/front-end/components/Features/ExperimentSummary.tsx

@@ -10,6 +10,7 @@ import {
 import ValidateValue from "@/components/Features/ValidateValue";
 import NewExperimentForm from "@/components/Experiment/NewExperimentForm";
 import Modal from "@/components/Modal";
+import useOrgSettings from "@/hooks/useOrgSettings";
 import ValueDisplay from "./ValueDisplay";
 import ExperimentSplitVisual from "./ExperimentSplitVisual";
 
@@ -29,6 +30,7 @@ export default function ExperimentSummary({
 }) {
   const { namespace, coverage, values, hashAttribute, trackingKey } = rule;
   const type = feature.valueType;
+  const { namespaces: allNamespaces } = useOrgSettings();
 
   const { datasources, metrics } = useDefinitions();
   const [newExpModal, setNewExpModal] = useState(false);
@@ -105,7 +107,8 @@ export default function ExperimentSummary({
               {" "}
               <span>in the namespace </span>
               <span className="mr-1 border px-2 py-1 bg-light rounded">
-                {namespace.name}
+                {allNamespaces?.find((n) => n.name === namespace.name)?.label ||
+                  namespace.name}
               </span>
             </>
           )}

packages/front-end/components/Features/NamespaceSelector.tsx

@@ -89,7 +89,7 @@ export default function NamespaceSelector({
                 .filter((n) => {
                   return n?.status !== "inactive";
                 })
-                .map((n) => ({ value: n.name, label: n.name }))}
+                .map((n) => ({ value: n.name, label: n.label }))}
             />
             {namespace &&
               namespaces.filter((n) => n.name === namespace).length > 0 && (

packages/front-end/components/Features/Rule.tsx

@@ -132,8 +132,11 @@ export const Rule = forwardRef<HTMLDivElement, RuleProps>(
                 Experiment:{" "}
                 <strong className="mr-3">{linkedExperiment.name}</strong>{" "}
                 <Link href={`/experiment/${linkedExperiment.id}`}>
-                  View Experiment
-                  <FaExternalLinkAlt />
+                  View Experiment{" "}
+                  <FaExternalLinkAlt
+                    className="small ml-1 position-relative"
+                    style={{ top: "-1px" }}
+                  />
                 </Link>
               </div>
             ) : (

packages/front-end/components/Settings/NamespaceTableRow.tsx

@@ -50,7 +50,7 @@ export default function NamespaceTableRow({
         style={{ cursor: "pointer" }}
       >
         <td onClick={expandRow}>
-          {namespace.name}
+          {namespace.label}
           {status === "inactive" && (
             <div
               className={`badge badge-secondary ml-2`}
@@ -61,6 +61,9 @@ export default function NamespaceTableRow({
             </div>
           )}
         </td>
+        <td onClick={expandRow} className="text-muted small">
+          {namespace.name}
+        </td>
         <td onClick={expandRow}>{namespace.description}</td>
         <td onClick={expandRow}>{experiments.length}</td>
         <td onClick={expandRow}>
@@ -117,7 +120,7 @@ export default function NamespaceTableRow({
         }}
       >
         <td
-          colSpan={5}
+          colSpan={6}
           className="px-4 bg-light"
           style={{
             boxShadow: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",

packages/front-end/pages/namespaces.tsx

@@ -9,6 +9,7 @@ import { useUser } from "@/services/UserContext";
 import NamespaceTableRow from "@/components/Settings/NamespaceTableRow";
 import { useAuth } from "@/services/auth";
 import usePermissionsUtil from "@/hooks/usePermissionsUtils";
+import Tooltip from "@/components/Tooltip/Tooltip";
 
 export type NamespaceApiResponse = {
   namespaces: NamespaceUsage;
@@ -85,6 +86,10 @@ const NamespacesPage: FC = () => {
           <thead>
             <tr>
               <th>Namespace</th>
+              <th>
+                Namespace ID{" "}
+                <Tooltip body="This id is used as the namespace hash key and cannot be changed" />
+              </th>
               <th>Description</th>
               <th>Active experiments</th>
               <th>Percent available</th>
@@ -108,9 +113,12 @@ const NamespacesPage: FC = () => {
                     setModalOpen(true);
                   }}
                   onDelete={async () => {
-                    await apiCall(`/organization/namespaces/${ns.name}`, {
-                      method: "DELETE",
-                    });
+                    await apiCall(
+                      `/organization/namespaces/${encodeURIComponent(ns.name)}`,
+                      {
+                        method: "DELETE",
+                      }
+                    );
                     await refreshOrganization();
                   }}
                   onArchive={async () => {
@@ -119,10 +127,13 @@ const NamespacesPage: FC = () => {
                       description: ns.description,
                       status: ns?.status === "inactive" ? "active" : "inactive",
                     };
-                    await apiCall(`/organization/namespaces/${ns.name}`, {
-                      method: "PUT",
-                      body: JSON.stringify(newNamespace),
-                    });
+                    await apiCall(
+                      `/organization/namespaces/${encodeURIComponent(ns.name)}`,
+                      {
+                        method: "PUT",
+                        body: JSON.stringify(newNamespace),
+                      }
+                    );
                     await refreshOrganization();
                   }}
                 />