NXT-4224: WIP: Adding hacky first iteration UI

NXT-4224 (Automatically / Manually sync when editing workflows in the browser)

Author: kaifranze

org.knime.ui.js/src/components/toolbar/WorkflowToolbar.vue

@@ -4,11 +4,12 @@ import { API } from "@api";
 import { storeToRefs } from "pinia";
 
 import { type MenuItem, SubMenu, useHint } from "@knime/components";
+import { Button } from "@knime/kds-components";
 import ArrowMoveIcon from "@knime/styles/img/icons/arrow-move.svg";
 import CloudUploadIcon from "@knime/styles/img/icons/cloud-upload.svg";
 import DeploymentIcon from "@knime/styles/img/icons/deployment.svg";
 
-import { WorkflowInfo } from "@/api/gateway-api/generated-api";
+import { AppState, WorkflowInfo } from "@/api/gateway-api/generated-api";
 import AnnotationModeIcon from "@/assets/annotation-mode.svg";
 import SelectionModeIcon from "@/assets/selection-mode.svg";
 import ToolbarButton from "@/components/common/ToolbarButton.vue";
@@ -24,6 +25,7 @@ import {
   useCanvasModesStore,
 } from "@/store/application/canvasModes";
 import { useDirtyProjectsTrackingStore } from "@/store/application/dirtyProjectsTracking";
+import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useSelectionStore } from "@/store/selection";
 import { useSpaceProvidersStore } from "@/store/spaces/providers";
 import { useUIControlsStore } from "@/store/uiControls/uiControls";
@@ -44,9 +46,8 @@ import ZoomMenu from "./ZoomMenu.vue";
 const $shortcuts = useShortcuts();
 const uiControls = useUIControlsStore();
 const workflowVersionsStore = useWorkflowVersionsStore();
-const { activeProjectId, activeProjectOrigin, isUnknownProject } = storeToRefs(
-  useApplicationStore(),
-);
+const { activeProjectId, activeProjectOrigin, isUnknownProject, syncState } =
+  storeToRefs(useApplicationStore());
 const { activeWorkflow, isWorkflowEmpty, isActiveWorkflowFixedVersion } =
   storeToRefs(useWorkflowStore());
 const { getSelectedNodes: selectedNodes } = storeToRefs(useSelectionStore());
@@ -265,10 +266,44 @@ const ToolbarButtonWithHint = defineComponent(
 );
 
 const { isSVGRenderer } = useCanvasRendererUtils();
+
+// Hacky sync button logic
+const isSyncButtonVisible = computed(() => {
+  return isBrowser();
+});
+
+// Hacky sync button logic
+const onSyncClick = async () => {
+  const projectId = activeProjectId.value!;
+  const { toastPresets } = getToastPresets();
+
+  try {
+    useLifecycleStore().setIsLoadingWorkflow(true);
+    await API.workflow.saveProject({ projectId });
+    useLifecycleStore().setIsLoadingWorkflow(false);
+  } catch (error) {
+    toastPresets.app.syncProjectFailed({ error });
+    useLifecycleStore().setIsLoadingWorkflow(false);
+  }
+};
+
+// Hacky sync button logic
+const isSyncButtonDisabled = computed(() => {
+  return syncState.value !== AppState.SyncStateEnum.OUTOFSYNC;
+});
 </script>
 
 <template>
   <div class="toolbar">
+    <!-- Hacky sync button directly displayed here -->
+    <Button
+      v-if="isSyncButtonVisible"
+      :label="syncState"
+      :disabled="isSyncButtonDisabled"
+      class="sync-button"
+      @click="onSyncClick"
+    />
+
     <transition-group tag="div" name="button-list">
       <!--
         setting :key="the list of all visible buttons",
@@ -368,6 +403,10 @@ const { isSVGRenderer } = useCanvasRendererUtils();
   background-color: var(--knime-gray-ultra-light);
   border-bottom: 1px solid var(--knime-silver-sand);
 
+  & .sync-button {
+    margin-right: 12px;
+  }
+
   & .button-list {
     transition: opacity 150ms ease-out;
     flex-shrink: 0;

org.knime.ui.js/src/store/application/application.ts

@@ -85,6 +85,10 @@ export interface ApplicationState {
   dismissedUpdateBanner: boolean; // Property to track banner dismissal
   dismissedHomePageTile: boolean;
   dismissedHubLoginBanner: boolean;
+  /**
+   * Current synchronization state for automatic sync
+   */
+  syncState: AppState.SyncStateEnum;
 }
 
 /*
@@ -113,6 +117,7 @@ export const useApplicationStore = defineStore("application", {
     dismissedUpdateBanner: false,
     dismissedHomePageTile: false,
     dismissedHubLoginBanner: false,
+    syncState: AppState.SyncStateEnum.SYNCED,
   }),
   actions: {
     setActiveProjectId(projectId: string | null) {
@@ -214,6 +219,10 @@ export const useApplicationStore = defineStore("application", {
       this.dismissedUpdateBanner = dismissed;
     },
 
+    setSyncState(syncState: AppState.SyncStateEnum) {
+      this.syncState = syncState;
+    },
+
     // eslint-disable-next-line complexity
     replaceApplicationState(applicationState: AppState) {
       const applicationSettingsStore = useApplicationSettingsStore();
@@ -342,6 +351,10 @@ export const useApplicationStore = defineStore("application", {
       if (applicationState.hasOwnProperty("nodeRepositoryLoaded")) {
         this.setNodeRepositoryLoaded(applicationState.nodeRepositoryLoaded!);
       }
+
+      if (applicationState.hasOwnProperty("syncState")) {
+        this.setSyncState(applicationState.syncState!);
+      }
     },
   },
   getters: {

org.knime.ui.js/src/toastPresets/application.ts

@@ -6,6 +6,7 @@ import type { ToastPresetErrorHandler } from "./types";
 export type ApplicationToastPresets = {
   openProjectFailed: ToastPresetErrorHandler;
   saveProjectFailed: ToastPresetErrorHandler;
+  syncProjectFailed: ToastPresetErrorHandler;
 };
 
 export const getPresets = (
@@ -24,5 +25,12 @@ export const getPresets = (
         type: "error",
         headline: "Could not save workflow",
       }),
+
+    // Hacky sync error handling logic
+    syncProjectFailed: ({ error }) =>
+      defaultAPIErrorHandler($toast, error, {
+        type: "error",
+        headline: "Could not sync workflow",
+      }),
   };
 };