frontend: Add cron variables UI

pschlan · Aug 3, 2024 · 73b990d · 73b990d
1 parent 161b87c
commit 73b990d
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 3 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "clsx": "^1.1.1",
     "i18next": "^19.4.5",
     "i18next-browser-languagedetector": "^6.0.1",
+    "insert-text-at-cursor": "^0.3.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.35",
     "notistack": "^0.9.17",

diff --git a/frontend/src/components/jobs/JobEditor.jsx b/frontend/src/components/jobs/JobEditor.jsx
@@ -48,6 +48,7 @@ import useUserProfile from '../../hooks/useUserProfile';
 import JobTestRun from './JobTestRun';
 import JobExport from './JobExport';
 import useFolder from '../../hooks/useFolder';
+import VariableMenu from '../misc/VariableMenu';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -346,6 +347,10 @@ export default function JobEditor({ match }) {
         size='small'
         defaultValue={item.value}
         onBlur={({target}) => updateHeaderValue(rowNo, target.value)}
+        InputProps={{ endAdornment: <InputAdornment position='end'>
+            <VariableMenu />
+          </InputAdornment>
+        }}
         fullWidth />
     },
     {
@@ -435,6 +440,10 @@ export default function JobEditor({ match }) {
             onBlur={({target}) => setJobURL(target.value.trim())}
             inputRef={jobURLRef}
             InputLabelProps={{shrink: true}}
+            InputProps={{ endAdornment: <InputAdornment position='end'>
+                <VariableMenu />
+              </InputAdornment>
+            }}
             fullWidth
             required
             />

diff --git a/frontend/src/components/misc/VariableMenu.jsx b/frontend/src/components/misc/VariableMenu.jsx
@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+
+import ActionMenu from './ActionMenu';
+import { IconButton } from '@material-ui/core';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { useTranslation } from 'react-i18next';
+
+import { Config } from '../../utils/Config';
+
+import VariableIcon from '@material-ui/icons/Code';
+import HelpIcon from '@material-ui/icons/HelpOutline';
+
+function getTextField(elem) {
+  while (elem) {
+    elem = elem.parentNode;
+    if (!elem) {
+      break;
+    }
+    const textField = elem.querySelector('input[type=text]');
+    if (textField) {
+      return textField;
+    }
+  }
+  return undefined;
+}
+
+export default function VariableMenu() {
+  const { t } = useTranslation();
+  const buttonRef = useRef();
+
+  const insertVariable = text => {
+    const textField = getTextField(buttonRef.current);
+    if (textField != null) {
+      insertTextAtCursor(textField, text);
+      window.setTimeout(() => textField.focus(), 100);
+    }
+  };
+
+  return <ActionMenu
+    variant='contained'
+    size='small'
+    component={<IconButton />}
+    buttonRef={buttonRef}
+    items={[
+      {
+        icon: <VariableIcon />,
+        text: '%cjo:unixtime%'
+      },
+      {
+        icon: <VariableIcon />,
+        text: '%cjo:uuid4%'
+      },
+      {
+        divider: true
+      },
+      {
+        icon: <HelpIcon />,
+        text: t('common.help'),
+        onClick: () => window.open(Config.variablesDocsURL)
+      }
+    ]}
+    onClickItem={item => item.onClick ? item.onClick() : insertVariable(item.text)}
+    text={<VariableIcon />}
+  />;
+}
diff --git a/frontend/src/locales/de/translation.json b/frontend/src/locales/de/translation.json
@@ -2,6 +2,7 @@
   "paddleLocale": "de",
   "landingLocale": "de",
   "common": {
+    "help": "Hilfe",
     "menu": "Menü",
     "contact": "Kontakt",
     "followontwitter": "Twitter",

diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -2,6 +2,7 @@
   "paddleLocale": "en",
   "landingLocale": "en",
   "common": {
+    "help": "Help",
     "menu": "Menu",
     "contact": "Contact",
     "followontwitter": "Twitter",

diff --git a/frontend/src/locales/fr/translation.json b/frontend/src/locales/fr/translation.json
@@ -1,6 +1,7 @@
 {
   "paddleLocale": "fr",
   "common": {
+    "help": "Aide",
     "menu": "Menu",
     "followontwitter": "Twitter",
     "forkongithub": "GitHub",

diff --git a/frontend/src/locales/it/translation.json b/frontend/src/locales/it/translation.json
@@ -1,6 +1,7 @@
 {
   "paddleLocale": "it",
   "common": {
+    "help": "Aiuto",
     "menu": "Menu",
     "contact": "Contatti",
     "followontwitter": "Twitter",

diff --git a/frontend/src/locales/pl/translation.json b/frontend/src/locales/pl/translation.json
@@ -1,7 +1,8 @@
 {
   "paddleLocale": "pl",
-  "landingLocale": "pl",
+  "landingLocale": "en",
   "common": {
+    "help": "Pomoc",
     "menu": "Menu",
     "contact": "Kontakt",
     "followontwitter": "Twitter",

diff --git a/frontend/src/locales/ro/translation.json b/frontend/src/locales/ro/translation.json
@@ -1,6 +1,7 @@
 {
-  "paddleLocale": "ro",
+  "paddleLocale": "en",
   "common": {
+    "help": "Ajutor",
     "menu": "Meniu",
     "contact": "Contact",
     "followontwitter": "Twitter",

diff --git a/frontend/src/locales/ru/translation.json b/frontend/src/locales/ru/translation.json
@@ -1,6 +1,7 @@
 {
-  "paddleLocale": "de",
+  "paddleLocale": "ru",
   "common": {
+    "help": "Помощь",
     "menu": "Меню",
     "followontwitter": "Twitter",
     "forkongithub": "GitHub",

diff --git a/frontend/src/locales/zh_TW/translation.json b/frontend/src/locales/zh_TW/translation.json
@@ -1,5 +1,6 @@
 {
   "common": {
+    "help": "幫助",
     "menu": "選單",
     "contact": "聯繫",
     "followontwitter": "Twitter",

diff --git a/frontend/src/utils/Config.default.js b/frontend/src/utils/Config.default.js
@@ -8,6 +8,7 @@ export const Config = {
   'termsOfServiceURL': 'https://example.com/tos/',
   'returnPolicyURL': 'https://example.com/returnpolicy/',
   'apiDocsURL': 'https://example.com/docs/rest-api.html',
+  'variablesDocsURL': 'https://example.com/creating-cron-jobs.html#cron-job-variables',
 
   //! @note The URL of the API webserver (/api/ folder in this repo)
   'apiURL': 'https://api.example.com/',