Merge branch 'main' into stefankracht/dir-1027-make-403-redirect-to-l…

…ogout-path

e2e/explorer/workflow/diagramEditor.spec.ts

@@ -301,3 +301,33 @@ test("it is possible to use the diagram view on the revisions detail page as wel
   await expect(editor).toBeVisible();
   await expect(diagram).toBeVisible();
 });
+
+test("it is possible to switch from Code View to Diagram View without loosing the recent changes", async ({
+  page,
+}) => {
+  await page.goto(`/${namespace}/explorer/workflow/active/${workflow}`);
+
+  const { codeBtn, diagramBtn } = await getCommonPageElements(page);
+
+  const firstLine = page.getByText("direktiv_api: workflow/v1");
+  await firstLine.click();
+
+  const workflowChanges = "some changes to the workflows code";
+  await page.type("textarea", workflowChanges);
+  const recentlyChanges = page.getByText(workflowChanges);
+  await expect(
+    recentlyChanges,
+    "after the user typed new workflow code, it will be visible in the editor"
+  ).toBeVisible();
+
+  await diagramBtn.click();
+  await expect(
+    recentlyChanges,
+    "when the user switches to the Diagram View, the most recent code changes are not visible anymore"
+  ).not.toBeVisible();
+  await codeBtn.click();
+  await expect(
+    recentlyChanges,
+    "after the user switched back to the Editor View, the most recent chages are still in the Editor"
+  ).toBeVisible();
+});

public/locales/en/translation.json

@@ -1141,7 +1141,7 @@
       "settings": "Settings",
       "gateway": "Gateway",
       "gatewayRoutes": "Routes",
-      "gatewayConsumers": "Consumer",
+      "gatewayConsumers": "Consumers",
       "jqPlayground": "jq Playground"
     },
     "namespaceEdit": {
@@ -1236,11 +1236,14 @@
     "namespaceSelector": {
       "placeholder": "Select Namespace",
       "loading": "loading...",
-      "optionDoesNotExists": "{{namespace}} (does not exist)"
+      "optionDoesNotExist": "{{namespace}} (does not exist)"
     },
     "filepicker": {
       "buttonText": "Browse Files",
       "placeholder": "No File selected",
+      "emptyDirectory": {
+        "title": "The directory \"{{path}}\" is empty."
+      },
       "error": {
         "title": "The path \"{{path}}\" was not found.",
         "linkText": "Go back to root directory"
@@ -1456,7 +1459,7 @@
         "rebuildService": {
           "success": {
             "title": "Service rebuild",
-            "description": "Service was rebuild."
+            "description": "Service was rebuilt."
           },
           "error": {
             "description": "Could not rebuild service 😢"
@@ -1585,4 +1588,4 @@
       }
     }
   }
-}
+}

src/api/gateway/schema.ts

@@ -79,7 +79,7 @@ const RouteSchema = z.object({
   }),
 });
 
-export type RouteSchemeType = z.infer<typeof RouteSchema>;
+export type RouteSchemaType = z.infer<typeof RouteSchema>;
 
 /**
  * example

src/componentsNext/Breadcrumb/ExplorerBreadcrumb/BreadcrumbSegment.tsx

@@ -18,15 +18,14 @@ const BreadcrumbSegment: FC<{
    * we need to request file information to figure out which
    * icon to use
    */
-  const requestIconInformation = isLast;
 
   const { data } = useNodeContent({
     path: absolute,
-    enabled: requestIconInformation,
+    enabled: isLast,
   });
 
   if (!namespace) return null;
-  if (requestIconInformation && !data) return null;
+  if (isLast && !data) return null;
 
   const Icon = fileTypeToIcon(data?.node.type ?? "directory");
 

src/componentsNext/FilePicker/FileList.tsx

@@ -0,0 +1,67 @@
+import { FC, Fragment } from "react";
+import {
+  FilepickerClose,
+  FilepickerListItem,
+  FilepickerSeparator,
+} from "~/design/Filepicker";
+
+import { NodeSchemaType } from "~/api/tree/schema/node";
+import { fileTypeToIcon } from "~/api/tree/utils";
+import { twMergeClsx } from "~/util/helpers";
+
+export type FileListProps = {
+  results: NodeSchemaType[];
+  selectable: ((node: NodeSchemaType) => boolean) | undefined;
+  setPath: (path: string) => void;
+  setInputValue: (value: string) => void;
+  onChange: (path: string) => void;
+};
+
+export const FileList: FC<FileListProps> = ({
+  results,
+  selectable,
+  setPath,
+  setInputValue,
+  onChange,
+}) => (
+  <>
+    {results.map((file, index) => {
+      const isSelectable = selectable?.(file) ?? true;
+      const isLastListItem = index === results.length - 1;
+      return (
+        <Fragment key={file.name}>
+          {file.type === "directory" ? (
+            <div
+              onClick={() => {
+                setPath(file.path);
+              }}
+              className="h-auto w-full cursor-pointer text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
+            >
+              <FilepickerListItem icon={fileTypeToIcon(file.type)}>
+                {file.name}
+              </FilepickerListItem>
+            </div>
+          ) : (
+            <FilepickerClose
+              className={twMergeClsx(
+                "h-auto w-full text-gray-11 hover:underline dark:text-gray-dark-11",
+                !isSelectable && "cursor-not-allowed opacity-70"
+              )}
+              disabled={!isSelectable}
+              onClick={() => {
+                setPath(file.parent);
+                setInputValue(file.path);
+                onChange?.(file.path);
+              }}
+            >
+              <FilepickerListItem icon={fileTypeToIcon(file.type)}>
+                {file.name}
+              </FilepickerListItem>
+            </FilepickerClose>
+          )}
+          {!isLastListItem && <FilepickerSeparator />}
+        </Fragment>
+      );
+    })}
+  </>
+);

src/componentsNext/FilePicker/FilepathSegments.tsx

@@ -0,0 +1,45 @@
+import { Breadcrumb, BreadcrumbRoot } from "~/design/Breadcrumbs";
+
+import { FC } from "react";
+import { Home } from "lucide-react";
+
+export type FilePathSegmentsProps = {
+  segments: {
+    relative: string;
+    absolute: string;
+  }[];
+  setPath: (path: string) => void;
+};
+
+export const FilePathSegments: FC<FilePathSegmentsProps> = ({
+  segments,
+  setPath,
+}) => (
+  <BreadcrumbRoot className="py-3">
+    <Breadcrumb
+      noArrow
+      onClick={() => {
+        setPath("/");
+      }}
+      className="h-5 hover:underline"
+    >
+      <Home />
+    </Breadcrumb>
+    {segments.map((file) => {
+      const isEmpty = file.absolute === "";
+
+      if (isEmpty) return null;
+      return (
+        <Breadcrumb
+          key={file.relative}
+          onClick={() => {
+            setPath(file.absolute);
+          }}
+          className="h-5 hover:underline"
+        >
+          {file.relative}
+        </Breadcrumb>
+      );
+    })}
+  </BreadcrumbRoot>
+);