Alphabetical order for relationship types and template names (#7669)

* sorting of relationshipTypes and templates
* updates expected template order in filters
* eslint fix
* fixes selectors
* update of snapshots

app/react/Entities/components/EntityViewer.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Helmet } from 'react-helmet';
+import { sortBy } from 'lodash';
 import PropTypes from 'prop-types';
 import { Icon } from 'UI';
 import { withContext, withRouter } from 'app/componentWrappers';
@@ -417,7 +418,7 @@ EntityViewer.propTypes = {
 
 const selectRelationTypes = createSelector(
   s => s.relationTypes,
-  r => r.toJS()
+  r => sortBy(r.toJS(), 'name')
 );
 
 const mapStateToProps = state => {

app/react/Relationships/actions/actions.js

@@ -1,3 +1,4 @@
+import { sortBy } from 'lodash';
 import api from 'app/utils/api';
 import { actions } from 'app/BasicReducer';
 import debounce from 'app/utils/debounce';
@@ -248,7 +249,9 @@ const selectRelationTypes = createSelector(
         name,
       };
     });
-    return [{ _id: null, name: t('System', 'No Label', null, false) }].concat(relations);
+    return [{ _id: null, name: t('System', 'No Label', null, false) }].concat(
+      sortBy(relations, 'name')
+    );
   }
 );
 

app/react/Templates/components/FormConfigRelationship.js

@@ -5,7 +5,7 @@ import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { createSelector } from 'reselect';
-
+import { sortBy } from 'lodash';
 import { Select } from 'app/ReactReduxForms';
 import { Translate, t } from 'app/I18N';
 import { Icon } from 'app/UI';
@@ -52,7 +52,10 @@ export class FormConfigRelationship extends Component {
       inheritSelectPropertyType,
     } = this.props;
 
-    const options = templates.toJS().filter(template => template._id !== templateId);
+    const options = sortBy(
+      templates.toJS().filter(template => template._id !== templateId),
+      'name'
+    );
 
     const labelClass = labelError ? 'form-group has-error' : 'form-group';
     const canBeFilter =
@@ -76,7 +79,7 @@ export class FormConfigRelationship extends Component {
           </label>
           <Select
             model={`template.data.properties[${index}].relationType`}
-            options={relationTypes.toJS()}
+            options={sortBy(relationTypes.toJS(), 'name')}
             optionsLabel="name"
             validators={FormConfigRelationship.contentValidation()}
             optionsValue="_id"

app/react/V2/Routes/Settings/RelationshipTypes/RelationshipTypes.tsx

@@ -5,7 +5,7 @@ import { IncomingHttpHeaders } from 'http';
 import { LoaderFunction, useLoaderData, useRevalidator } from 'react-router';
 import { Row } from '@tanstack/react-table';
 import { useSetAtom, useAtomValue } from 'jotai';
-import { Translate } from 'app/I18N';
+import { t, Translate } from 'app/I18N';
 import * as relationshipTypesAPI from 'app/V2/api/relationshiptypes';
 import { Template } from 'app/apiResponseTypes';
 import { notificationAtom, templatesAtom, relationshipTypesAtom } from 'app/V2/atoms';
@@ -39,23 +39,26 @@ const RelationshipTypes = () => {
 
   useEffect(() => {
     setTableRelationshipTypes(
-      relationshipTypes.map(relationshipType => {
-        const templatesUsingIt = templates
-          .map(t => {
-            const usingIt = t.properties?.some(
-              property => property.relationType === relationshipType._id
-            );
-            return usingIt ? t : null;
-          })
-          .filter(t => t) as Template[];
+      relationshipTypes
+        .map(relationshipType => {
+          const templatesUsingIt = templates
+            .map(tmpl => {
+              const usingIt = tmpl.properties?.some(
+                property => property.relationType === relationshipType._id
+              );
+              return usingIt ? tmpl : null;
+            })
+            .filter(tmpl => tmpl) as Template[];
 
-        return {
-          ...relationshipType,
-          rowId: relationshipType._id,
-          templates: templatesUsingIt,
-          disableRowSelection: Boolean(templatesUsingIt.length),
-        };
-      })
+          return {
+            ...relationshipType,
+            rowId: relationshipType._id,
+            translation: t(relationshipType._id, relationshipType.name, null, false),
+            templates: templatesUsingIt,
+            disableRowSelection: Boolean(templatesUsingIt.length),
+          };
+        })
+        .sort((a, b) => a.translation.localeCompare(b.translation))
     );
   }, [relationshipTypes, templates]);
 

app/react/V2/Routes/Settings/RelationshipTypes/components/TableComponents.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import { t, Translate } from 'app/I18N';
+import { Translate } from 'app/I18N';
 import { CellContext, createColumnHelper } from '@tanstack/react-table';
 import { Button, Pill } from 'app/V2/Components/UI';
 import { ClientRelationshipType, Template } from 'app/apiResponseTypes';
@@ -10,6 +10,7 @@ type Relationships = ClientRelationshipType & { rowId: string };
 interface TableRelationshipType extends Relationships {
   templates: Template[];
   disableRowSelection: boolean;
+  translation: string;
 }
 
 const EditButton = ({ cell, column }: CellContext<TableRelationshipType, string>) => (
@@ -24,8 +25,7 @@ const EditButton = ({ cell, column }: CellContext<TableRelationshipType, string>
 
 const TitleCell = ({ cell, getValue }: CellContext<TableRelationshipType, string>) => (
   <div className="flex gap-2 items-center">
-    <span className="text-indigo-800">{t(cell.row.original._id, getValue(), null, false)}</span>(
-    {getValue()})
+    <span className="text-indigo-800">{cell.row.original.translation}</span>({getValue()})
   </div>
 );
 

app/react/V2/atoms/store.ts

@@ -1,4 +1,5 @@
 import { createStore } from 'jotai';
+import { sortBy } from 'lodash';
 import { isClient } from 'app/utils';
 import { store } from 'app/store';
 import { ClientSettings, ClientThesaurus, ClientUserSchema } from 'app/apiResponseTypes';
@@ -52,11 +53,11 @@ if (isClient && window.__atomStoreData__) {
     store?.dispatch({ type: 'settings/collection/SET', value });
   });
   atomStore.sub(templatesAtom, () => {
-    const value = atomStore.get(templatesAtom);
+    const value = sortBy(atomStore.get(templatesAtom), 'name');
     store?.dispatch({ type: 'templates/SET', value });
   });
   atomStore.sub(relationshipTypesAtom, () => {
-    const value = atomStore.get(relationshipTypesAtom);
+    const value = sortBy(atomStore.get(relationshipTypesAtom), 'name');
     store?.dispatch({ type: 'relationTypes/SET', value });
   });
   atomStore.sub(thesauriAtom, () => {

app/react/entry-server.tsx

@@ -15,7 +15,7 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Helmet } from 'react-helmet';
 import { Provider } from 'jotai';
-import { omit, isEmpty } from 'lodash';
+import { omit, isEmpty, sortBy } from 'lodash';
 import { Provider as ReduxProvider } from 'react-redux';
 import api from 'app/utils/api';
 import { RequestParams } from 'app/utils/RequestParams';
@@ -160,9 +160,9 @@ const prepareStores = async (req: ExpressRequest, settings: ClientSettings, lang
 
   const reduxData = {
     user: userApiResponse.json,
-    templates: templatesApiResponse.json.rows,
+    templates: sortBy(templatesApiResponse.json.rows, 'name'),
     thesauris: thesaurisApiResponse.json.rows,
-    relationTypes: relationTypesApiResponse.json.rows,
+    relationTypes: sortBy(relationTypesApiResponse.json.rows, 'name'),
     translations: translationsApiResponse.json.rows,
     settings: {
       collection: { ...settingsApiResponse.json, links: settingsApiResponse.json.links || [] },

e2e/suite1/connections.test.ts

@@ -17,7 +17,7 @@ describe('connections', () => {
 
   it('should navigate to an entities connections view', async () => {
     await expect(page).toClick(
-      '#filtersForm > div:nth-child(2) > ul > li > ul > li:nth-child(6) > label > span.multiselectItem-name > span',
+      '#filtersForm > div:nth-child(2) > ul > li > ul > li:nth-child(1) > label > span.multiselectItem-name > span',
       { text: 'Causa' }
     );
     await expect(page).toClick('.item-name', {

e2e/suite2/searchFilters.test.ts

@@ -59,7 +59,7 @@ describe('search filters path', () => {
 
   describe('filter one type', () => {
     it('should only show entities of that type', async () => {
-      await selectFilterOption('Mecanismo', 1);
+      await selectFilterOption('Mecanismo', 4);
       const titles = await getAllEntitiesTitles(2);
       expect(titles.length).toEqual(2);
       expect(titles[0]).toEqual('Corte Interamericana de Derechos Humanos');
@@ -69,7 +69,7 @@ describe('search filters path', () => {
 
   describe('filter by more types', () => {
     it('should show entities of those types', async () => {
-      await selectFilterOption('Informe de admisibilidad', 3);
+      await selectFilterOption('Informe de admisibilidad', 2);
       const entityTitles = await getAllEntitiesTitles(9);
       expect(entityTitles.length).toBe(9);
       expect(entityTitles).toEqual([
@@ -88,9 +88,9 @@ describe('search filters path', () => {
 
   describe('multiselect filters', () => {
     it('should filter', async () => {
-      await selectFilterOption('Mecanismo', 1);
-      await selectFilterOption('Informe de admisibilidad', 3);
-      await selectFilterOption('Ordenes de la corte', 2);
+      await selectFilterOption('Mecanismo', 4);
+      await selectFilterOption('Informe de admisibilidad', 2);
+      await selectFilterOption('Ordenes de la corte', 6);
       await expect(page).toClick('span.multiselectItem-name', { text: 'Peru' });
       await waitForEvent('DOMContentLoaded');
       const entityTitles = await getAllEntitiesTitles(6);
@@ -162,7 +162,7 @@ describe('search filters path', () => {
       await waitForEvent('DOMContentLoaded');
     });
     it('should order them by aggregated value', async () => {
-      await selectFilterOption('Ordenes de la corte', 2);
+      await selectFilterOption('Ordenes de la corte', 6);
       await waitForEvent('DOMContentLoaded');
       const filterNames = await getSearchFilters();
       expect([filterNames[0], filterNames[1], filterNames[2]]).toEqual([
@@ -253,7 +253,7 @@ describe('search filters path', () => {
 
     it('should display the No Label option with the correct aggregation when filtering by template', async () => {
       await expect(page).toClick(
-        'li.wide:nth-child(1) > ul:nth-child(1) > li:nth-child(10) > label:nth-child(2) > span:nth-child(2) > span',
+        'li.wide:nth-child(1) > ul:nth-child(1) > li:nth-child(3) > label:nth-child(2) > span:nth-child(2) > span',
         { text: 'Juez y/o Comisionado' }
       );
 

e2e/suite2/tableView.test.ts

@@ -66,7 +66,7 @@ describe('Table view', () => {
       await expect(page).toClick('.rw-list-option>span', { text: 'Firmantes' });
       await page.click('.tableview-wrapper');
       await expect(page).toMatchElement('.tableview-wrapper th:last-child', { text: 'Firmantes' });
-      await expect(page).toMatchElement('.tableview-wrapper th:nth-last-child(3)', {
+      await expect(page).toMatchElement('.tableview-wrapper th:nth-last-child(2)', {
         text: 'Mecanismo',
       });
       await expect(page).not.toMatchElement('.hidden-columns-dropdown .rw-open');
@@ -113,6 +113,7 @@ describe('Table view', () => {
         text: 'Alvarez et al. Order of the President. August 14, 1997',
       });
     });
+
     it('should uncheck selected rows and show the clicked entity row on the side panel', async () => {
       const rowSelector = 'div.tableview-wrapper > table > tbody > tr:nth-child(2)';
       await expect(page).toClick(rowSelector);