Loosen restrictions on Pipeline Naming (#1078)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->

Remove restrictions on special characters in pipeline naming. Special characters will encode correctly in urls. Also trimmed pipeline name values and prevented empty string names.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix
- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/180211ed-3f01-489c-a05c-59cc14a4687f.png)

![image.png](https://app.graphite.dev/user-attachments/assets/96e7212a-421e-405e-bd03-6daafebd90a7.png)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
1. verify special characters can now be used in pipeline names
2. verify that special characters do not break pipeline urls
3. verify that pipeline editing cans till be accessed via the pipeline list, inspetc button & clone button

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/PipelineRun/RunDetails.tsx

@@ -28,7 +28,9 @@ export const RunDetails = () => {
   const { componentSpec } = useComponentSpec();
   const { details, state, runId, isLoading, error } = useRootExecutionContext();
 
-  const editorRoute = `/editor/${componentSpec.name}`;
+  const editorRoute = componentSpec.name
+    ? `/editor/${encodeURIComponent(componentSpec.name)}`
+    : "";
 
   const canAccessEditorSpec = useCheckComponentSpecFromPath(
     editorRoute,
@@ -137,7 +139,7 @@ export const RunDetails = () => {
 
       <div>
         <div className="flex gap-2">
-          {canAccessEditorSpec && (
+          {canAccessEditorSpec && componentSpec.name && (
             <InspectPipelineButton pipelineName={componentSpec.name} />
           )}
           <ClonePipelineButton componentSpec={componentSpec} />

src/components/PipelineRun/components/InspectPipelineButton.tsx

@@ -1,11 +1,11 @@
 import { useNavigate } from "@tanstack/react-router";
-import { Network } from "lucide-react";
 import { useCallback } from "react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { Icon } from "@/components/ui/icon";
 
 type InspectPipelineButtonProps = {
-  pipelineName?: string;
+  pipelineName: string;
 };
 
 export const InspectPipelineButton = ({
@@ -14,7 +14,7 @@ export const InspectPipelineButton = ({
   const navigate = useNavigate();
 
   const handleInspect = useCallback(() => {
-    navigate({ to: `/editor/${pipelineName}` });
+    navigate({ to: `/editor/${encodeURIComponent(pipelineName)}` });
   }, [pipelineName, navigate]);
 
   return (
@@ -24,7 +24,7 @@ export const InspectPipelineButton = ({
       tooltip="Inspect pipeline"
       data-testid="inspect-pipeline-button"
     >
-      <Network className="w-4 h-4 rotate-270" />
+      <Icon name="Network" className="rotate-270" />
     </TooltipButton>
   );
 };

src/components/shared/Dialogs/PipelineNameDialog.tsx

@@ -1,4 +1,10 @@
-import { type ChangeEvent, type ReactNode, useCallback, useState } from "react";
+import {
+  Activity,
+  type ChangeEvent,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -16,7 +22,6 @@ import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { BlockStack } from "@/components/ui/layout";
 import useLoadUserPipelines from "@/hooks/useLoadUserPipelines";
-import { VALID_NAME_MESSAGE, VALID_NAME_REGEX } from "@/utils/constants";
 
 interface PipelineNameDialogProps {
   trigger: ReactNode;
@@ -57,9 +62,11 @@ const PipelineNameDialog = ({
         Array.from(userPipelines.keys()).map((name) => name.toLowerCase()),
       );
 
-      if (!VALID_NAME_REGEX.test(newName)) {
-        setError(VALID_NAME_MESSAGE);
-      } else if (existingPipelineNames.has(newName.trim().toLowerCase())) {
+      const normalizedNewName = newName.trim().toLowerCase();
+
+      if (normalizedNewName === "") {
+        setError("Name cannot be empty");
+      } else if (existingPipelineNames.has(normalizedNewName)) {
         setError("Name already exists");
       } else {
         setError(null);
@@ -84,7 +91,7 @@ const PipelineNameDialog = ({
   );
 
   const handleSubmit = useCallback(() => {
-    onSubmit(name);
+    onSubmit(name.trim());
   }, [name, onSubmit]);
 
   const isDisabled =
@@ -103,19 +110,12 @@ const PipelineNameDialog = ({
         </DialogHeader>
         <BlockStack gap="2">
           <Input value={name} onChange={handleOnChange} />
-          <Alert variant={error ? "destructive" : "default"}>
-            {error ? (
-              <>
-                <Icon name="CircleAlert" />
-                <AlertDescription>{error}</AlertDescription>
-              </>
-            ) : (
-              <>
-                <Icon name="Info" />
-                <AlertDescription>{VALID_NAME_MESSAGE}</AlertDescription>
-              </>
-            )}
-          </Alert>
+          <Activity mode={error ? "visible" : "hidden"}>
+            <Alert variant="destructive">
+              <Icon name="CircleAlert" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          </Activity>
         </BlockStack>
         <DialogFooter className="sm:justify-end">
           <DialogClose asChild>

src/hooks/useCheckComponentSpecFromPath.ts

@@ -3,13 +3,15 @@ import { useMemo } from "react";
 
 import { RUNS_BASE_PATH } from "@/routes/router";
 import { loadPipelineByName } from "@/services/pipelineService";
+import { TWENTY_FOUR_HOURS_IN_MS } from "@/utils/constants";
 import { getIdOrTitleFromPath } from "@/utils/URL";
 
 export const useCheckComponentSpecFromPath = (
   url: string,
   disabled: boolean = false,
 ) => {
   const isRunPath = url.includes(RUNS_BASE_PATH);
+  const isEmptyPath = url.trim() === "" || url.trim() === "/";
 
   const { title } = useMemo(() => getIdOrTitleFromPath(url), [url]);
 
@@ -19,8 +21,8 @@ export const useCheckComponentSpecFromPath = (
       loadPipelineByName(title as string).then(
         (result) => !!result.experiment?.componentRef?.spec,
       ),
-    enabled: !disabled && !isRunPath && !!title,
-    staleTime: 1000 * 60 * 60 * 24,
+    enabled: !disabled && !isRunPath && !!title && !isEmptyPath,
+    staleTime: TWENTY_FOUR_HOURS_IN_MS,
   });
 
   return existsLocal ?? false;

src/utils/constants.ts

@@ -34,10 +34,6 @@ implementation:
     outputValues: {}
 `;
 
-export const VALID_NAME_REGEX = /^[a-zA-Z0-9\s]+$/;
-export const VALID_NAME_MESSAGE =
-  "Name must be unique and contain only alphanumeric characters and spaces";
-
 // IndexedDB constants
 export const DB_NAME = "components";
 export const PIPELINE_RUNS_STORE_NAME = "pipeline_runs";