feat(libretranslate): add detect language action

fix(AdminApplicationSettings): handle undefined appConfig object

packages/backend/src/apps/libretranslate/actions/detect-language/index.js

@@ -0,0 +1,29 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Detect language',
+  key: 'detectLanguage',
+  description: 'Detects language of a text.',
+  arguments: [
+    {
+      label: 'Text',
+      key: 'text',
+      type: 'string',
+      required: true,
+      description: 'The text to detect.',
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const { text } = $.step.parameters;
+
+    const body = {
+      q: text,
+    };
+
+    const response = await $.http.post('/detect', body);
+
+    $.setActionItem({ raw: response.data[0] });
+  },
+});

packages/backend/src/apps/libretranslate/actions/index.js

@@ -0,0 +1,4 @@
+import detectLanguage from './detect-language/index.js';
+import translateText from './translate-text/index.js';
+
+export default [detectLanguage, translateText];

packages/backend/src/apps/libretranslate/actions/translate-text/index.js

@@ -0,0 +1,86 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Translate text',
+  key: 'translateText',
+  description: 'Translate a text.',
+  arguments: [
+    {
+      label: 'Text',
+      key: 'text',
+      type: 'string',
+      required: true,
+      description: 'The text to translate.',
+      variables: true,
+    },
+    {
+      label: 'Source Language',
+      key: 'sourceLanguage',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listLanguages',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Target Language',
+      key: 'targetLanguage',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listLanguages',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Format',
+      key: 'format',
+      type: 'dropdown',
+      description: '',
+      required: false,
+      variables: true,
+      options: [
+        {
+          label: 'Text',
+          value: 'text',
+        },
+        {
+          label: 'HTML',
+          value: 'html',
+        },
+      ],
+    },
+  ],
+
+  async run($) {
+    const { text, sourceLanguage, targetLanguage, format } = $.step.parameters;
+
+    const body = {
+      q: text,
+      source: sourceLanguage,
+      target: targetLanguage,
+      format,
+    };
+
+    const response = await $.http.post('/translate', body);
+
+    $.setActionItem({ raw: response.data });
+  },
+});

packages/backend/src/apps/libretranslate/assets/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="187.04305" height="188.81523" viewBox="0 0 49.488472 49.957363" version="1.1" id="svg8">
+  <defs id="defs2">
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect835"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect835-7"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect874"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect923"/>
+  </defs>
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g id="layer1" transform="translate(-23.040803,-26.932047)">
+    <g id="g861" transform="translate(-42.114518,-17.993737)" style="fill:#000000">
+      <g aria-label="众" transform="matrix(4.3205134,0,0,4.3205134,-37.271798,-327.6536)" id="text833" style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect835);fill:#000000;fill-opacity:1;stroke:none">
+        <path d="m 34.996103,90.121035 -0.614947,0.759641 q -2.754346,-1.41593 -3.948067,-2.950715 -1.167884,1.617467 -3.7672,2.888703 L 26.0096,90.084861 q 3.457142,-1.601964 4.283963,-3.849882 l 0.878496,0.273884 q -0.175699,0.516763 -0.232543,0.604613 1.116207,1.596797 4.056587,3.007559 z m 0.165364,4.91958 -0.676959,0.645954 q -1.514115,-1.157549 -2.346102,-2.826692 -0.547769,1.550288 -2.268589,2.806021 l -0.676959,-0.625283 q 1.19889,-0.795814 1.798334,-1.875848 0.599445,-1.080034 0.682127,-3.079906 l 0.909502,0.07751 q 0,0.268716 -0.04134,0.671791 l -0.03617,0.361734 q 0,0.273884 0.30489,1.033525 0.310058,0.754474 0.899167,1.467606 0.594277,0.707965 1.452103,1.343583 z m -4.800725,-1.374588 -0.702797,0.63045 q -0.594277,-0.780312 -1.162716,-1.276404 -0.651121,1.421098 -2.020542,2.676831 l -0.687295,-0.614948 q 1.229895,-1.095537 1.767329,-2.201409 0.5426,-1.105872 0.697629,-2.795686 l 0.919838,0.09819 q -0.103353,0.940508 -0.366902,1.91719 1.00252,0.862993 1.555456,1.565791 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';fill:#00000" id="path961"/>
+      </g>
+      <g aria-label="L" id="text841" style="font-style:normal;font-weight:normal;font-size:43.3964px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.08492">
+        <path d="M 84.81389,94.883148 V 91.324643 H 69.191186 V 63.247172 h -4.035865 v 31.635976 z" style="fill:#000000;stroke-width:1.08492" id="path964"/>
+      </g>
+    </g>
+    <g id="g921" transform="translate(29.198135,-14.725175)"/>
+  </g>
+</svg>

packages/backend/src/apps/libretranslate/auth/index.js

@@ -0,0 +1,44 @@
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'screenName',
+      label: 'Screen Name',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description:
+        'Screen name of your connection to be used on Automatisch UI.',
+      clickToCopy: false,
+    },
+    {
+      key: 'instanceUrl',
+      label: 'Instance URL',
+      type: 'string',
+      required: false,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'For the self hosted version.',
+      clickToCopy: false,
+    },
+    {
+      key: 'apiKey',
+      label: 'API Key',
+      type: 'string',
+      required: false,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'LibreTranslate API key of your account.',
+      clickToCopy: false,
+    },
+  ],
+
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/libretranslate/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import verifyCredentials from './verify-credentials.js';
+
+const isStillVerified = async ($) => {
+  await verifyCredentials($);
+  return true;
+};
+
+export default isStillVerified;

packages/backend/src/apps/libretranslate/auth/verify-credentials.js

@@ -0,0 +1,14 @@
+const verifyCredentials = async ($) => {
+  const body = {
+    q: 'Hi!',
+  };
+
+  await $.http.post('/detect', body);
+
+  await $.auth.set({
+    screenName: $.auth.data.screenName,
+    apiKey: $.auth.data.apiKey,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/libretranslate/common/add-api-key.js

@@ -0,0 +1,9 @@
+const addApiKey = ($, requestConfig) => {
+  const apiKey = $.auth.data.apiKey;
+
+  requestConfig.data = { api_key: apiKey, ...(requestConfig.data || {}) };
+
+  return requestConfig;
+};
+
+export default addApiKey;

packages/backend/src/apps/libretranslate/common/set-base-url.js

@@ -0,0 +1,16 @@
+const setBaseUrl = ($, requestConfig) => {
+  const instanceUrl = $.auth.data.instanceUrl;
+  const apiKey = $.auth.data.apiKey;
+
+  if (instanceUrl) {
+    requestConfig.baseURL = instanceUrl;
+  } else if ($.app.apiBaseUrl) {
+    requestConfig.baseURL = $.app.apiBaseUrl;
+  }
+
+  requestConfig.data = { api_key: apiKey, ...(requestConfig.data || {}) };
+
+  return requestConfig;
+};
+
+export default setBaseUrl;

packages/backend/src/apps/libretranslate/dynamic-data/index.js

@@ -0,0 +1,3 @@
+import listLanguages from './list-languages/index.js';
+
+export default [listLanguages];

packages/backend/src/apps/libretranslate/dynamic-data/list-languages/index.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'List languages',
+  key: 'listLanguages',
+
+  async run($) {
+    const languages = {
+      data: [],
+    };
+
+    const { data } = await $.http.get('/languages');
+
+    if (!data?.length) {
+      return;
+    }
+
+    for (const language of data) {
+      languages.data.push({
+        value: language.code,
+        name: language.name,
+      });
+    }
+
+    return languages;
+  },
+};

packages/backend/src/apps/libretranslate/index.js

@@ -0,0 +1,21 @@
+import defineApp from '../../helpers/define-app.js';
+import auth from './auth/index.js';
+import addApiKey from './common/add-api-key.js';
+import setBaseUrl from './common/set-base-url.js';
+import actions from './actions/index.js';
+import dynamicData from './dynamic-data/index.js';
+
+export default defineApp({
+  name: 'LibreTranslate',
+  key: 'libretranslate',
+  iconUrl: '{BASE_URL}/apps/libretranslate/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/libretranslate/connection',
+  supportsConnections: true,
+  baseUrl: 'https://libretranslate.com',
+  apiBaseUrl: 'https://libretranslate.com',
+  primaryColor: 'ffffff',
+  beforeRequest: [setBaseUrl, addApiKey],
+  auth,
+  actions,
+  dynamicData,
+});

packages/backend/src/config/app.js

@@ -52,7 +52,7 @@ const appConfig = {
   isDev: appEnv === 'development',
   isTest: appEnv === 'test',
   isProd: appEnv === 'production',
-  version: '0.11.0',
+  version: '0.12.0',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresSchema: process.env.POSTGRES_SCHEMA || 'public',
   postgresPort: parseInt(process.env.POSTGRES_PORT || '5432'),

packages/backend/src/controllers/api/v1/automatisch/version.test.js

@@ -10,7 +10,7 @@ describe('GET /api/v1/automatisch/version', () => {
 
     const expectedPayload = {
       data: {
-        version: '0.11.0',
+        version: '0.12.0',
       },
       meta: {
         count: 1,

packages/docs/pages/.vitepress/config.js

@@ -243,6 +243,15 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/invoice-ninja/connection' },
           ],
         },
+        {
+          text: 'LibreTranslate',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Actions', link: '/apps/libretranslate/actions' },
+            { text: 'Connection', link: '/apps/libretranslate/connection' },
+          ],
+        },
         {
           text: 'Mattermost',
           collapsible: true,

packages/docs/pages/apps/libretranslate/actions.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/libretranslate.svg
+items:
+  - name: Translate text
+    desc: Translate a text.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/apps/libretranslate/connection.md

@@ -0,0 +1,12 @@
+# LibreTranslate
+
+:::info
+This page explains the steps you need to follow to set up the LibreTranslate
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Login to your LibreTranslate account.
+2. Copy your `API key` from the page to the `API Key` field on Automatisch.
+3. If you are using a self hosted version of LibreTranslate, copy your `Instance URl` to the `Instance URL` field on Automatisch.
+4. Write any screen name to be displayed in Automatisch.
+5. Now, you can start using the LibreTranslate connection with Automatisch.

packages/docs/pages/guide/available-apps.md

@@ -25,6 +25,7 @@ The following integrations are currently supported by Automatisch.
 - [HTTP Request](/apps/http-request/actions)
 - [HubSpot](/apps/hubspot/actions)
 - [Invoice Ninja](/apps/invoice-ninja/triggers)
+- [LibreTranslate](/apps/libretranslate/actions)
 - [Mattermost](/apps/mattermost/actions)
 - [Miro](/apps/miro/actions)
 - [Notion](/apps/notion/triggers)

packages/docs/pages/public/favicons/libretranslate.svg

@@ -0,0 +1,28 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="187.04305" height="188.81523" viewBox="0 0 49.488472 49.957363" version="1.1" id="svg8">
+  <defs id="defs2">
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect835"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect835-7"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect874"/>
+    <rect x="25.162016" y="84.327377" width="71.115189" height="52.835255" id="rect923"/>
+  </defs>
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g id="layer1" transform="translate(-23.040803,-26.932047)">
+    <g id="g861" transform="translate(-42.114518,-17.993737)" style="fill:#000000">
+      <g aria-label="众" transform="matrix(4.3205134,0,0,4.3205134,-37.271798,-327.6536)" id="text833" style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect835);fill:#000000;fill-opacity:1;stroke:none">
+        <path d="m 34.996103,90.121035 -0.614947,0.759641 q -2.754346,-1.41593 -3.948067,-2.950715 -1.167884,1.617467 -3.7672,2.888703 L 26.0096,90.084861 q 3.457142,-1.601964 4.283963,-3.849882 l 0.878496,0.273884 q -0.175699,0.516763 -0.232543,0.604613 1.116207,1.596797 4.056587,3.007559 z m 0.165364,4.91958 -0.676959,0.645954 q -1.514115,-1.157549 -2.346102,-2.826692 -0.547769,1.550288 -2.268589,2.806021 l -0.676959,-0.625283 q 1.19889,-0.795814 1.798334,-1.875848 0.599445,-1.080034 0.682127,-3.079906 l 0.909502,0.07751 q 0,0.268716 -0.04134,0.671791 l -0.03617,0.361734 q 0,0.273884 0.30489,1.033525 0.310058,0.754474 0.899167,1.467606 0.594277,0.707965 1.452103,1.343583 z m -4.800725,-1.374588 -0.702797,0.63045 q -0.594277,-0.780312 -1.162716,-1.276404 -0.651121,1.421098 -2.020542,2.676831 l -0.687295,-0.614948 q 1.229895,-1.095537 1.767329,-2.201409 0.5426,-1.105872 0.697629,-2.795686 l 0.919838,0.09819 q -0.103353,0.940508 -0.366902,1.91719 1.00252,0.862993 1.555456,1.565791 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';fill:#00000" id="path961"/>
+      </g>
+      <g aria-label="L" id="text841" style="font-style:normal;font-weight:normal;font-size:43.3964px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.08492">
+        <path d="M 84.81389,94.883148 V 91.324643 H 69.191186 V 63.247172 h -4.035865 v 31.635976 z" style="fill:#000000;stroke-width:1.08492" id="path964"/>
+      </g>
+    </g>
+    <g id="g921" transform="translate(29.198135,-14.725175)"/>
+  </g>
+</svg>

packages/web/src/components/AdminApplicationSettings/index.jsx

@@ -36,7 +36,7 @@ function AdminApplicationSettings(props) {
 
   const handleSubmit = async (values) => {
     try {
-      if (!appConfig.data) {
+      if (!appConfig?.data) {
         await createAppConfig({
           variables: {
             input: { key: props.appKey, ...values },
@@ -69,6 +69,7 @@ function AdminApplicationSettings(props) {
     }),
     [appConfig?.data],
   );
+
   return (
     <Form
       defaultValues={defaultValues}

packages/web/src/components/FlowContextMenu/index.jsx

@@ -28,9 +28,12 @@ function ContextMenu(props) {
       variables: { input: { id: flowId } },
     });
 
+    if (appKey) {
       await queryClient.invalidateQueries({
         queryKey: ['apps', appKey, 'flows'],
       });
+    }
+
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
       SnackbarProps: {
@@ -56,9 +59,12 @@ function ContextMenu(props) {
       },
     });
 
+    if (appKey) {
       await queryClient.invalidateQueries({
         queryKey: ['apps', appKey, 'flows'],
       });
+    }
+
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });
@@ -110,7 +116,7 @@ ContextMenu.propTypes = {
   ]).isRequired,
   onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
-  appKey: PropTypes.string.isRequired,
+  appKey: PropTypes.string,
 };
 
 export default ContextMenu;

packages/web/src/components/FlowRow/index.jsx

@@ -38,20 +38,24 @@ function FlowRow(props) {
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const { flow, onDuplicateFlow, onDeleteFlow, appKey } = props;
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
   const onContextMenuClick = (event) => {
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(contextButtonRef.current);
   };
+
   const createdAt = DateTime.fromMillis(parseInt(flow.createdAt, 10));
   const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt, 10));
   const isUpdated = updatedAt > createdAt;
   const relativeCreatedAt = createdAt.toRelative();
   const relativeUpdatedAt = updatedAt.toRelative();
+
   return (
     <>
       <Card sx={{ mb: 1 }} data-test="flow-row">
@@ -127,7 +131,7 @@ FlowRow.propTypes = {
   flow: FlowPropType.isRequired,
   onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
-  appKey: PropTypes.string.isRequired,
+  appKey: PropTypes.string,
 };
 
 export default FlowRow;