Preserve UI changes (#5109)

* Hide browser extension links * added preserve icon * Remove info * migration
huridocs · Sep 16, 2022 · 69bb5d7 · 69bb5d7
1 parent e3ccbcf
commit 69bb5d7
Show file tree

Hide file tree

Showing 7 changed files with 277 additions and 7 deletions.
diff --git a/app/api/migrations/migrations/108-add_system_key_translations/index.js b/app/api/migrations/migrations/108-add_system_key_translations/index.js
@@ -0,0 +1,57 @@
+/*
+This migration is meant to be repeatable.
+After copy pasting:
+  - change the contents of system_keys.csv to the new keyset
+  - change the file location in the readCsvToSystemKeys call
+  - change the tests, if necessary
+*/
+
+async function insertSystemKeys(db, newKeys) {
+  const translations = await db.collection('translations').find().toArray();
+  const locales = translations.map(tr => tr.locale);
+
+  const locToSystemContext = {};
+  translations.forEach(tr => {
+    locToSystemContext[tr.locale] = tr.contexts.find(c => c.id === 'System');
+  });
+  const locToKeys = {};
+  Object.entries(locToSystemContext).forEach(([loc, context]) => {
+    locToKeys[loc] = new Set(context.values.map(v => v.key));
+  });
+
+  newKeys.forEach(row => {
+    const { key, value: optionalValue } = row;
+
+    locales.forEach(loc => {
+      if (!locToKeys[loc].has(key)) {
+        const newValue = optionalValue || key;
+        locToSystemContext[loc].values.push({ key, value: newValue });
+        locToKeys[loc].add(key);
+      }
+    });
+  });
+
+  await Promise.all(
+    translations.map(tr => db.collection('translations').replaceOne({ _id: tr._id }, tr))
+  );
+}
+
+export default {
+  delta: 108,
+
+  reindex: false,
+
+  name: 'add_system_key_translations',
+
+  description: 'Adding missing translations for system keys.',
+
+  async up(db) {
+    process.stdout.write(`${this.name}...\r\n`);
+    const systemKeys = [
+      {
+        key: 'Preserve',
+      },
+    ];
+    await insertSystemKeys(db, systemKeys);
+  },
+};
diff --git a/.../migrations/108-add_system_key_translations/specs/108-add_system_key_translations.spec.js b/.../migrations/108-add_system_key_translations/specs/108-add_system_key_translations.spec.js
@@ -0,0 +1,64 @@
+import { testingDB } from 'api/utils/testing_db';
+import migration from '../index.js';
+import { fixtures, templateId, defaultTemplateName, defaultTemplateTitle } from './fixtures.js';
+
+const locales = ['en', 'es', 'hu'];
+const newKeyValues = [
+  {
+    key: 'Preserve',
+    value: 'Preserve',
+  },
+];
+const alreadyInAllContexts = {
+  key: 'Duplicated label',
+  en: 'Duplicated label',
+  es: 'Nombre duplicado',
+  hu: 'Ismétlődő címke',
+};
+
+describe('migration add_system_key_translations', () => {
+  beforeEach(async () => {
+    spyOn(process.stdout, 'write');
+    await testingDB.setupFixturesAndContext(fixtures);
+  });
+
+  afterAll(async () => {
+    await testingDB.disconnect();
+  });
+
+  it('should have a delta number', () => {
+    expect(migration.delta).toBe(108);
+  });
+
+  it('should append new keys, leave existing keys intact.', async () => {
+    await migration.up(testingDB.mongodb);
+
+    const allTranslations = await testingDB.mongodb.collection('translations').find().toArray();
+    function testKeyValue(key, value, locale, contextId) {
+      expect(
+        allTranslations
+          .find(tr => tr.locale === locale)
+          .contexts.find(c => c.id === contextId)
+          .values.find(v => v.key === key).value
+      ).toBe(value);
+    }
+
+    newKeyValues.forEach(({ key, value }) => {
+      locales.forEach(loc => {
+        testKeyValue(key, value, loc, 'System');
+      });
+    });
+    locales.forEach(loc => {
+      testKeyValue(alreadyInAllContexts.key, alreadyInAllContexts[loc], loc, 'System');
+    });
+    locales.forEach(loc => {
+      expect(
+        allTranslations
+          .find(tr => tr.locale === loc)
+          .contexts.find(c => c.id === templateId.toString()).values
+      ).toHaveLength(2);
+      testKeyValue(defaultTemplateName, defaultTemplateName, loc, templateId.toString());
+      testKeyValue(defaultTemplateTitle, defaultTemplateTitle, loc, templateId.toString());
+    });
+  });
+});
diff --git a/app/api/migrations/migrations/108-add_system_key_translations/specs/fixtures.js b/app/api/migrations/migrations/108-add_system_key_translations/specs/fixtures.js
@@ -0,0 +1,90 @@
+import db from 'api/utils/testing_db';
+
+const templateId = db.id();
+const defaultTemplateName = 'default template';
+const defaultTemplateTitle = 'Title';
+
+//contexts
+const commonContext = {
+  id: 'System',
+  label: 'User Interface',
+  type: 'Uwazi UI',
+  values: [
+    {
+      key: 'existing-key-in-system',
+      value: 'existing-key-in-system',
+    },
+  ],
+};
+const templateContext = {
+  id: templateId.toString(),
+  label: defaultTemplateName,
+  type: 'Entity',
+  values: [
+    {
+      key: defaultTemplateName,
+      value: defaultTemplateName,
+    },
+    {
+      key: defaultTemplateTitle,
+      value: defaultTemplateTitle,
+    },
+  ],
+};
+
+const fixtures = {
+  templates: [
+    //default template name - correct
+    {
+      _id: templateId,
+      name: defaultTemplateName,
+      commonProperties: [{ name: 'title', label: defaultTemplateTitle, type: 'text' }],
+      properties: [],
+    },
+  ],
+  translations: [
+    {
+      _id: db.id(),
+      locale: 'es',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Drag properties here', value: 'Arrastra propiedades aquí' },
+            { key: 'Duplicated label', value: 'Nombre duplicado' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+    {
+      _id: db.id(),
+      locale: 'en',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Priority sorting', value: 'Priority sort' },
+            { key: 'Duplicated label', value: 'Duplicated label' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+    {
+      _id: db.id(),
+      locale: 'hu',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Duplicated label', value: 'Ismétlődő címke' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+  ],
+};
+
+export { fixtures, templateId, defaultTemplateName, defaultTemplateTitle };
diff --git a/app/react/Layout/PreserveIcon.tsx b/app/react/Layout/PreserveIcon.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+type preserveIconProps = {
+  width?: string;
+  height?: string;
+  color?: string;
+};
+
+const PreserveIcon = ({ width = '24', height = '24', color }: preserveIconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+      stroke={color || 'currentColor'}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3 7V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H7"
+      stroke={color || 'currentColor'}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V7"
+      stroke={color || 'currentColor'}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M21 17V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H17"
+      stroke={color || 'currentColor'}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V17"
+      stroke={color || 'currentColor'}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export { PreserveIcon };
diff --git a/app/react/Settings/components/PreserveSettings.tsx b/app/react/Settings/components/PreserveSettings.tsx
@@ -2,8 +2,8 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import api from 'app/utils/api';
 import { Translate } from 'app/I18N';
-import { Icon } from 'app/UI';
 import { IStore } from 'app/istore';
+import { PreserveIcon } from 'app/Layout/PreserveIcon';
 import './styles/preserve.scss';
 
 function mapStateToProps({ settings, user }: IStore) {
@@ -41,7 +41,7 @@ const PreserveSettingsComp = ({ settings, user }: mappedProps) => {
     <div className="settings-content">
       <div className="panel panel-preserve">
         <div className="panel-preserve-heading">
-          <Icon icon="square" /> <Translate>Preserve Extension</Translate>
+          <PreserveIcon color="#D20D6C" /> <Translate>Preserve Extension</Translate>
         </div>
         <div className="panel-preserve-content">
           <div className="status">
@@ -59,7 +59,7 @@ const PreserveSettingsComp = ({ settings, user }: mappedProps) => {
               </Translate>
             </div>
             <div className="install-buttons">
-              <button type="button">
+              <button type="button" style={{ display: 'none' }}>
                 <Translate>Install browser extension (dynamic link)</Translate>
               </button>
               <div>
@@ -110,9 +110,6 @@ const PreserveSettingsComp = ({ settings, user }: mappedProps) => {
                   </button>
                 )}
               </form>
-              <div className="info">
-                <Translate>Some information about the token</Translate>
-              </div>
             </div>
           </div>
         </div>

diff --git a/app/react/Settings/components/SettingsNavigation.tsx b/app/react/Settings/components/SettingsNavigation.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { I18NLink, Translate } from 'app/I18N';
 import { NeedAuthorization } from 'app/Auth';
 import { Icon } from 'app/UI';
+import { PreserveIcon } from 'app/Layout/PreserveIcon';
 import { FeatureToggle } from 'app/components/Elements/FeatureToggle';
 
 const SettingsNavigation = () => (
@@ -93,7 +94,8 @@ const SettingsNavigation = () => (
         <FeatureToggle feature="preserve.host">
           <NeedAuthorization roles={['admin']}>
             <I18NLink to="/settings/preserve" activeClassName="active" className="list-group-item">
-              <Translate>Preserve Extension</Translate> <Icon icon="square" />
+              <Translate>Preserve</Translate>
+              <PreserveIcon />
             </I18NLink>
           </NeedAuthorization>
         </FeatureToggle>

diff --git a/app/react/Settings/components/styles/preserve.scss b/app/react/Settings/components/styles/preserve.scss
@@ -4,6 +4,11 @@
     font-weight: 700;
     font-size: 18px;
     line-height: 25.2px;
+
+    svg {
+      float: inline-start;
+      margin-right: 5px;
+    }
   }
   .panel-preserve-content {
     div.status {