feat(libretranslate): add libretranslate integration

Merge pull request #1907 from automatisch/fix-admin-apps-undefined-error
fix(AdminApplicationSettings): handle undefined appConfig object
2024-06-03 13:11:33 +02:00 · 2024-05-31 13:52:13 +02:00 · 2024-05-31 13:26:06 +02:00 · 2024-05-31 12:54:13 +02:00 · 2024-05-28 12:05:52 +02:00 · 2024-05-28 11:13:54 +02:00
15 changed files with 206 additions and 11 deletions
--- a/packages/backend/src/apps/libretranslate/assets/favicon.svg
+++ b/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>
--- a/packages/backend/src/apps/libretranslate/auth/index.js
+++ b/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,
+};
--- a/packages/backend/src/apps/libretranslate/auth/is-still-verified.js
+++ b/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;
--- a/packages/backend/src/apps/libretranslate/auth/verify-credentials.js
+++ b/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;
--- a/packages/backend/src/apps/libretranslate/common/add-api-key.js
+++ b/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;
--- a/packages/backend/src/apps/libretranslate/common/set-base-url.js
+++ b/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;
--- a/packages/backend/src/apps/libretranslate/index.js
+++ b/packages/backend/src/apps/libretranslate/index.js
@@ -0,0 +1,17 @@
+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';
+
+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,
+});
--- a/packages/backend/src/config/app.js
+++ b/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'),
--- a/packages/backend/src/controllers/api/v1/automatisch/version.test.js
+++ b/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,
--- a/packages/docs/pages/.vitepress/config.js
+++ b/packages/docs/pages/.vitepress/config.js
@@ -243,6 +243,14 @@ export default defineConfig({
            { text: 'Connection', link: '/apps/invoice-ninja/connection' },
          ],
        },
+        {
+          text: 'LibreTranslate',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Connection', link: '/apps/libretranslate/connection' },
+          ],
+        },
        {
          text: 'Mattermost',
          collapsible: true,
--- a/packages/docs/pages/apps/libretranslate/connection.md
+++ b/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.
--- a/packages/docs/pages/public/favicons/libretranslate.svg
+++ b/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>
--- a/packages/web/src/components/AdminApplicationSettings/index.jsx
+++ b/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}
--- a/packages/web/src/components/FlowContextMenu/index.jsx
+++ b/packages/web/src/components/FlowContextMenu/index.jsx
@@ -28,9 +28,12 @@ function ContextMenu(props) {
      variables: { input: { id: flowId } },
    });

-    await queryClient.invalidateQueries({
-      queryKey: ['apps', appKey, 'flows'],
-    });
+    if (appKey) {
+      await queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'flows'],
+      });
+    }
+
    enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
      variant: 'success',
      SnackbarProps: {
@@ -56,9 +59,12 @@ function ContextMenu(props) {
      },
    });

-    await queryClient.invalidateQueries({
-      queryKey: ['apps', appKey, 'flows'],
-    });
+    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;
--- a/packages/web/src/components/FlowRow/index.jsx
+++ b/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;
Author	SHA1	Message	Date
Rıdvan Akca	e6540b5b7e	feat(libretranslate): add libretranslate integration	2024-06-03 13:11:33 +02:00
Ali BARIN	ef5a09314e	Merge pull request #1907 from automatisch/fix-admin-apps-undefined-error fix(AdminApplicationSettings): handle undefined appConfig object	2024-05-31 13:52:13 +02:00
Rıdvan Akca	ba52e298eb	fix(AdminApplicationSettings): handle undefined appConfig object	2024-05-31 13:26:06 +02:00
Ali BARIN	b3c3998189	Merge pull request #1895 from automatisch/fix-appkey-error-in-flowrow fix: remove unnecessary appKey in FlowRow and FlowContextMenu	2024-05-31 12:54:13 +02:00
Ömer Faruk Aydın	782f9b5c04	Merge pull request #1900 from automatisch/release/v0.12.0 release(v0.12.0): Update version to 0.12.0	2024-05-28 12:05:52 +02:00
Faruk AYDIN	3079d8c605	Update version to 0.12.0	2024-05-28 11:13:54 +02:00
Rıdvan Akca	c5202d7b3e	fix: remove unnecessary appKey in FlowRow and FlowContextMenu	2024-05-24 14:11:22 +02:00