Merge pull request #1066 from OpenFn/959_refactor_save_and_run

Refactor Manual Run Component

CHANGELOG.md

@@ -12,6 +12,11 @@ and this project adheres to
 
 ### Changed
 
+- Moved Save and Run button to bottom of the Job edit modal
+  [#1026](https://github.com/OpenFn/Lightning/issues/1026)
+- Allow a manual workorder to save the workflow before creating the workorder
+  [#959](https://github.com/OpenFn/Lightning/issues/959)
+
 ### Fixed
 
 ## [v0.8.0]

assets/css/app.css

@@ -44,12 +44,6 @@
   background-color: #1e1e1e;
 }
 
-/* LiveView specific classes for your customization */
-/* https://hexdocs.pm/phoenix_live_view/form-bindings.html#phx-feedback-for */
-.phx-no-feedback {
-  display: none;
-}
-
 .phx-click-loading {
   opacity: 0.5;
   transition: opacity 1s ease-out;

assets/js/app.js

@@ -25,33 +25,18 @@ import { Socket } from 'phoenix';
 import { LiveSocket } from 'phoenix_live_view';
 
 import topbar from '../vendor/topbar';
-import { AssocListChange, Copy, Flash, SubmitViaCtrlS, Tooltip } from './hooks';
+import * as Hooks from './hooks';
 import JobEditor from './job-editor';
 import JobEditorResizer from './job-editor-resizer/mount';
 import TabSelector from './tab-selector';
 import WorkflowEditor from './workflow-editor';
 
-let Hooks = {
+let hooks = {
   TabSelector,
   JobEditor,
   JobEditorResizer,
   WorkflowEditor,
-  Flash,
-  Tooltip,
-  AssocListChange,
-  Copy,
-  SubmitViaCtrlS,
-};
-
-// Sets the checkbox to indeterminate state if the element has the
-// `indeterminate` class
-Hooks.CheckboxIndeterminate = {
-  mounted() {
-    this.el.indeterminate = this.el.classList.contains('indeterminate');
-  },
-  updated() {
-    this.el.indeterminate = this.el.classList.contains('indeterminate');
-  },
+  ...Hooks,
 };
 
 // @ts-ignore
@@ -61,7 +46,7 @@ let csrfToken = document
 
 let liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: Hooks,
+  hooks,
   dom: {
     onBeforeElUpdated(from, to) {
       // If an element has any of the 'lv-keep-*' attributes, copy across

assets/js/editor/Editor.tsx

@@ -168,6 +168,18 @@ export default function Editor({
     (editor: any, monaco: typeof Monaco) => {
       setMonaco(monaco);
 
+      editor.addCommand(
+        // https://microsoft.github.io/monaco-editor/typedoc/classes/KeyMod.html
+        // https://microsoft.github.io/monaco-editor/typedoc/enums/KeyCode.html
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+        function () {
+          const manual_run_form = document.getElementById('manual_run_form')!;
+          manual_run_form.dispatchEvent(
+            new Event('submit', { bubbles: true, cancelable: true })
+          );
+        }
+      );
+
       monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
         // This seems to be needed to track the modules in d.ts files
         allowNonTsExtensions: true,

assets/js/hooks/index.ts

@@ -42,26 +42,38 @@ export const AssocListChange = {
   },
 } as PhoenixHook<{}, {}, HTMLSelectElement>;
 
-export const SubmitViaCtrlS = {
-  mounted() {
-    this.callback = this.handleEvent.bind(this);
-    window.addEventListener('keydown', this.callback);
-  },
-  handleEvent(e: KeyboardEvent) {
-    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-      e.preventDefault();
-      this.el.dispatchEvent(
-        new Event('submit', { bubbles: true, cancelable: true })
-      );
-    }
-  },
-  destroyed() {
-    window.removeEventListener('keydown', this.callback);
-  },
-} as PhoenixHook<{
-  callback: (e: KeyboardEvent) => void;
-  handleEvent: (e: KeyboardEvent) => void;
-}>;
+function createKeyCombinationHook(
+  keyCheck: (e: KeyboardEvent) => boolean
+): PhoenixHook {
+  return {
+    mounted() {
+      this.callback = this.handleEvent.bind(this);
+      window.addEventListener('keydown', this.callback);
+    },
+    handleEvent(e: KeyboardEvent) {
+      if (keyCheck(e)) {
+        e.preventDefault();
+        this.el.dispatchEvent(
+          new Event('submit', { bubbles: true, cancelable: true })
+        );
+      }
+    },
+    destroyed() {
+      window.removeEventListener('keydown', this.callback);
+    },
+  } as PhoenixHook<{
+    callback: (e: KeyboardEvent) => void;
+    handleEvent: (e: KeyboardEvent) => void;
+  }>;
+}
+
+export const SubmitViaCtrlS = createKeyCombinationHook(
+  e => (e.ctrlKey || e.metaKey) && e.key === 's'
+);
+
+export const SubmitViaCtrlEnter = createKeyCombinationHook(
+  e => (e.ctrlKey || e.metaKey) && (e.key === 'Enter')
+);
 
 export const Copy = {
   mounted() {
@@ -79,3 +91,14 @@ export const Copy = {
     });
   },
 } as PhoenixHook<{}, { to: string }>;
+
+// Sets the checkbox to indeterminate state if the element has the
+// `indeterminate` class
+export const CheckboxIndeterminat = {
+  mounted() {
+    this.el.indeterminate = this.el.classList.contains('indeterminate');
+  },
+  updated() {
+    this.el.indeterminate = this.el.classList.contains('indeterminate');
+  },
+} as PhoenixHook;

assets/js/workflow-editor/index.ts

@@ -19,6 +19,7 @@ type WorkflowEditorEntrypoint = PhoenixHook<
   {
     _isMounting: boolean;
     _pendingWorker: Promise<void>;
+    _updateBaseUrl: (e: CustomEvent<{ detail: { href: string } }>) => void;
     abortController: AbortController | null;
     component: ReturnType<typeof mount> | null;
     componentModule: Promise<{ mount: typeof mount }>;
@@ -72,16 +73,14 @@ const createNewWorkflow = () => {
 
 export default {
   mounted(this: WorkflowEditorEntrypoint) {
-    // Workaround for situations where the hook is mounted before the
-    // browser has updated window.location.href - it's rare, but it happens.
-    // Without it, the hook will try to push a history patch to the wrong
-    // URL.
-    const { baseUrl } = this.el.dataset;
-    if (!baseUrl) {
-      throw new Error('WorkflowEditor requires a data-base-url attribute');
-    }
+    // Listen to navigation events, so we can update the base url that is used
+    // to build urls to different nodes in the workflow.
+    this._updateBaseUrl = e => {
+      this.baseUrl = e.detail.href;
+    };
+    window.addEventListener('phx:navigate', this._updateBaseUrl);
 
-    this.baseUrl = baseUrl;
+    this.baseUrl = window.location.href;
 
     console.debug('WorkflowEditor hook mounted');
 
@@ -124,26 +123,6 @@ export default {
     // between the current state and the server state and send those diffs
     // to the server.
   },
-  setupObserver() {
-    this.observer = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
-        const { attributeName, oldValue } = mutation as AttributeMutationRecord;
-
-        if (attributeName == 'data-base-url') {
-          const newValue = this.el.getAttribute(attributeName);
-
-          if (oldValue !== newValue) {
-            this.baseUrl = newValue;
-          }
-        }
-      });
-    });
-
-    this.observer.observe(this.el, {
-      attributeFilter: ['data-base-url'],
-      attributeOldValue: true,
-    });
-  },
   getItem(id?: string) {
     if (id) {
       const { jobs, triggers, edges } = this.workflowStore.getState();
@@ -165,6 +144,8 @@ export default {
       nextUrl.searchParams.delete('m');
       nextUrl.searchParams.set('placeholder', true);
     } else {
+      console.log({ idExists, baseUrl: this.baseUrl, nextUrl });
+
       nextUrl.searchParams.delete('placeholder');
       if (!id) {
         console.debug('Unselecting');
@@ -185,6 +166,7 @@ export default {
     }
   },
   destroyed() {
+    window.removeEventListener('phx:navigate', this._updateBaseUrl);
     this.component?.unmount();
     this.abortController?.abort();
     this.observer?.disconnect();

assets/tailwind.config.js

@@ -1,5 +1,8 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
+const plugin = require('tailwindcss/plugin');
+const fs = require('fs');
+const path = require('path');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
 
@@ -51,6 +54,72 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({ addVariant }) =>
+      addVariant('phx-no-feedback', ['.phx-no-feedback&', '.phx-no-feedback &'])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant('phx-click-loading', [
+        '.phx-click-loading&',
+        '.phx-click-loading &',
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant('phx-submit-loading', [
+        '.phx-submit-loading&',
+        '.phx-submit-loading &',
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant('phx-change-loading', [
+        '.phx-change-loading&',
+        '.phx-change-loading &',
+      ])
+    ),
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function ({ matchComponents, theme }) {
+      let iconsDir = path.join(__dirname, './vendor/heroicons/optimized');
+      let values = {};
+      let icons = [
+        ['', '/24/outline'],
+        ['-solid', '/24/solid'],
+        ['-mini', '/20/solid'],
+      ];
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).map(file => {
+          let name = path.basename(file, '.svg') + suffix;
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
+        });
+      });
+      matchComponents(
+        {
+          hero: ({ name, fullPath }) => {
+            let content = fs
+              .readFileSync(fullPath)
+              .toString()
+              .replace(/\r?\n|\r/g, '');
+            return {
+              [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+              '-webkit-mask': `var(--hero-${name})`,
+              mask: `var(--hero-${name})`,
+              'mask-repeat': 'no-repeat',
+              'background-color': 'currentColor',
+              'vertical-align': 'middle',
+              display: 'inline-block',
+              width: theme('spacing.5'),
+              height: theme('spacing.5'),
+            };
+          },
+        },
+        { values }
+      );
+    }),
     require('@tailwindcss/container-queries'),
   ],
 };

assets/vendor/heroicons/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Refactoring UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

assets/vendor/heroicons/UPGRADE.md

@@ -0,0 +1,6 @@
+You are running heroicons v2.0.18. To upgrade in place, you can run the following command,
+where your `HERO_VSN` export is your desired version:
+
+    export HERO_VSN="2.0.18" ; \
+      curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
+      tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized