Merge branch 'main' into stefankracht/dir-1045-gateway-improvements

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,7 +1236,7 @@
     "namespaceSelector": {
       "placeholder": "Select Namespace",
       "loading": "loading...",
-      "optionDoesNotExists": "{{namespace}} (does not exist)"
+      "optionDoesNotExist": "{{namespace}} (does not exist)"
     },
     "filepicker": {
       "buttonText": "Browse Files",
@@ -1456,7 +1456,7 @@
         "rebuildService": {
           "success": {
             "title": "Service rebuild",
-            "description": "Service was rebuild."
+            "description": "Service was rebuilt."
           },
           "error": {
             "description": "Could not rebuild service 😢"

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/NamespaceSelector/index.tsx

@@ -49,7 +49,7 @@ const NamespaceSelector: FC<ButtonProps> = ({
         {defaultDoesNotExist && (
           <SelectItem value={defaultValue}>
             <span>
-              {t("components.namespaceSelector.optionDoesNotExists", {
+              {t("components.namespaceSelector.optionDoesNotExist", {
                 namespace: defaultValue,
               })}
             </span>

src/pages/namespace/Events/History/components/Filters/RefineTime.tsx

@@ -31,7 +31,7 @@ const RefineTime = ({
 
     date.setHours(hr, min, sec);
     setFilter({
-      [field]: { type: "MATCH", value: date },
+      [field]: { type: field, value: date },
     });
   };
 

src/pages/namespace/Explorer/Endpoint/EndpointEditor/index.tsx

@@ -6,7 +6,7 @@ import { EndpointFormSchemaType } from "./schema";
 import { FC } from "react";
 import { Form } from "./Form";
 import FormErrors from "~/componentsNext/FormErrors";
-import { RouteSchemeType } from "~/api/gateway/schema";
+import { RouteSchemaType } from "~/api/gateway/schema";
 import { Save } from "lucide-react";
 import { ScrollArea } from "~/design/ScrollArea";
 import { jsonToYaml } from "../../utils";
@@ -21,7 +21,7 @@ type NodeContentType = ReturnType<typeof useNodeContent>["data"];
 type EndpointEditorProps = {
   path: string;
   data: NonNullable<NodeContentType>;
-  route?: RouteSchemeType;
+  route?: RouteSchemaType;
 };
 
 const EndpointEditor: FC<EndpointEditorProps> = ({ data, path }) => {

src/pages/namespace/Explorer/Workflow/Active/WorkflowEditor.tsx

@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "~/design/Dropdown";
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { GitBranchPlus, Play, Save, Tag, Undo } from "lucide-react";
 
 import Button from "~/design/Button";
@@ -57,6 +57,15 @@ const WorkflowEditor: FC<{
 
   const [editorContent, setEditorContent] = useState(workflowDataFromServer);
 
+  /**
+   * When the server state of the content changes, the internal state needs to be updated,
+   * to have the editor and diagram up to date. This is important, when the user is reverting
+   * to an old revision.
+   */
+  useEffect(() => {
+    setEditorContent(workflowDataFromServer);
+  }, [workflowDataFromServer]);
+
   const { mutate: createRevision } = useCreateRevision();
   const { mutate: revertRevision } = useRevertRevision({
     onSuccess: () => {
@@ -90,14 +99,11 @@ const WorkflowEditor: FC<{
       <WorkspaceLayout
         layout={currentLayout}
         diagramComponent={
-          <Diagram
-            workflowData={workflowDataFromServer}
-            layout={currentLayout}
-          />
+          <Diagram workflowData={editorContent} layout={currentLayout} />
         }
         editorComponent={
           <CodeEditor
-            value={workflowDataFromServer}
+            value={editorContent}
             onValueChange={onEditorContentUpdate}
             createdAt={data.revision?.createdAt}
             error={error}

src/pages/namespace/Gateway/Routes/Table/Row/Methods.tsx

@@ -1,9 +1,9 @@
 import Badge from "~/design/Badge";
 import { FC } from "react";
-import { RouteSchemeType } from "~/api/gateway/schema";
+import { RouteSchemaType } from "~/api/gateway/schema";
 
 type AllowAnonymousProps = {
-  methods: RouteSchemeType["methods"];
+  methods: RouteSchemaType["methods"];
 };
 
 export const Methods: FC<AllowAnonymousProps> = ({ methods }) => (

src/pages/namespace/Gateway/Routes/Table/Row/Plugins.tsx

@@ -7,12 +7,12 @@ import { Table, TableBody, TableCell, TableRow } from "~/design/Table";
 
 import { ConditionalWrapper } from "~/util/helpers";
 import { FC } from "react";
-import { RouteSchemeType } from "~/api/gateway/schema";
+import { RouteSchemaType } from "~/api/gateway/schema";
 import { useTranslation } from "react-i18next";
 
 type PluginCountProps = {
   number: number;
-  type: keyof RouteSchemeType["plugins"];
+  type: keyof RouteSchemaType["plugins"];
 };
 
 const PluginCount: FC<PluginCountProps> = ({ type, number }) => {
@@ -30,7 +30,7 @@ const PluginCount: FC<PluginCountProps> = ({ type, number }) => {
 };
 
 type PluginsProps = {
-  plugins: RouteSchemeType["plugins"];
+  plugins: RouteSchemaType["plugins"];
 };
 
 const Plugins: FC<PluginsProps> = ({ plugins }) => {

src/pages/namespace/Gateway/Routes/Table/Row/index.tsx

@@ -8,13 +8,13 @@ import MessagesOverlay from "./MessagesOverlay";
 import { Methods } from "./Methods";
 import Plugins from "./Plugins";
 import PublicPathInput from "./PublicPath";
-import { RouteSchemeType } from "~/api/gateway/schema";
+import { RouteSchemaType } from "~/api/gateway/schema";
 import { pages } from "~/util/router/pages";
 import { useNamespace } from "~/util/store/namespace";
 import { useTranslation } from "react-i18next";
 
 type RowProps = {
-  gateway: RouteSchemeType;
+  gateway: RouteSchemaType;
 };
 
 export const Row: FC<RowProps> = ({ gateway }) => {

src/pages/namespace/Instances/components/Filters/RefineTime.tsx

@@ -31,7 +31,7 @@ const RefineTime = ({
 
     date.setHours(hr, min, sec);
     setFilter({
-      [field]: { type: "MATCH", value: date },
+      [field]: { type: field, value: date },
     });
   };
 

src/pages/namespace/Services/List/Row/index.tsx

@@ -102,7 +102,6 @@ const ServicesTableRow: FC<{
           {service.cmd ? service.cmd : "-"}
         </TableCell>
         <TableCell>
-          {/* when the server  */}
           {!service.error ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>

src/pages/namespace/Settings/Registries/index.tsx

@@ -102,10 +102,10 @@ const RegistriesList: FC = () => {
                             item={{
                               ...item,
                               /**
-                               * ItemRow is used by registies, secrets and variables
+                               * ItemRow is used by registries, secrets and variables
                                * when all migrate to api V2 and have a unique id the
                                * type signature of item can be updated from name to id
-                               * (all Playwright tests need to be updated as then)
+                               * (all Playwright tests need to be updated as well then)
                                */
                               name: item.url,
                             }}