feat(Organization): add organization types and unify entity presentation

eslint.config.mjs

@@ -8,6 +8,8 @@ export default [
   {
     ignores: [
       '**/node_modules/**',
+      '**/.yarn/**',
+      '**/*.local/**',
       '**/*.d.ts',
       '**/dist/**',
       '**/storybook-static/**',

packages/web-app/cypress/e2e/deleted-organizations.cy.js

@@ -0,0 +1,153 @@
+const source = {
+  id: 42,
+  name: 'Deleted club with a very long organization name for narrow screens',
+  type: 'SPELEOLOGY',
+  isDeleted: true,
+  redirectTo: 43,
+  cavers: []
+};
+const target = {
+  id: 43,
+  name: 'Surviving club',
+  type: 'SPELEOLOGY',
+  isDeleted: false,
+  cavers: []
+};
+
+const visitDeleted = () => {
+  cy.loginAs({ groups: ['User', 'Moderator', 'Administrator'] });
+  cy.visit('/organizations/management?tab=deleted', {
+    onBeforeLoad: win => win.localStorage.setItem('selectedLanguage', 'en')
+  });
+};
+
+describe('Deleted organizations', () => {
+  [320, 390, 768, 1280].forEach(width => {
+    it(`previews deleted organizations and confirms permanent deletion at ${width}px`, () => {
+      cy.viewport(width, 900);
+      cy.mockApiCatchAll();
+      let isPermanentlyDeleted = false;
+      cy.intercept(
+        { method: 'GET', pathname: '/api/v1/organizations' },
+        req => {
+          expect(req.query).to.include({
+            isDeleted: 'true',
+            limit: '50',
+            skip: '0'
+          });
+          req.reply({
+            statusCode: isPermanentlyDeleted ? 200 : 206,
+            headers: isPermanentlyDeleted ? {} : { 'Content-Range': '0-1/1' },
+            body: { organizations: isPermanentlyDeleted ? [] : [source] }
+          });
+        }
+      ).as('deletedOrganizations');
+      cy.intercept(
+        { method: 'GET', pathname: '/api/v1/organizations/42' },
+        { body: source }
+      );
+      cy.intercept(
+        { method: 'GET', pathname: '/api/v1/organizations/43' },
+        { body: target }
+      );
+      cy.intercept(
+        { method: 'DELETE', pathname: '/api/v1/organizations/42' },
+        req => {
+          expect(req.query).to.include({ isPermanent: '1', entityId: '43' });
+          isPermanentlyDeleted = true;
+          req.reply({ body: source });
+        }
+      ).as('permanentDelete');
+      visitDeleted();
+      cy.wait('@deletedOrganizations', { requestTimeout: 30000 });
+      cy.get('[data-testid="deleted-organizations-count"]').should(
+        'contain.text',
+        '1 result'
+      );
+      cy.get('[data-testid="deleted-organization-42"]').within(() => {
+        cy.contains('p', source.name).should($name => {
+          const nameBounds = $name[0].getBoundingClientRect();
+          const row = $name[0].parentElement;
+          const button = row.querySelector(
+            '[data-testid="permanent-delete-organization-42"]'
+          );
+          const buttonBounds = button.getBoundingClientRect();
+          expect(row.scrollWidth).to.be.at.most(row.clientWidth);
+          if (width < 900) {
+            expect(buttonBounds.top).to.be.at.least(nameBounds.bottom);
+            expect(buttonBounds.width).to.be.closeTo(row.clientWidth, 1);
+          } else {
+            expect(buttonBounds.left).to.be.at.least(nameBounds.right);
+          }
+        });
+        cy.get('[data-testid="open-organization-42"]')
+          .should('have.attr', 'href', '/ui/organizations/42')
+          .and('have.attr', 'target', '_blank');
+        cy.get('a[href$="/edit"]').should('not.exist');
+      });
+      cy.document().should(doc => {
+        expect(doc.documentElement.scrollWidth).to.be.at.most(
+          doc.documentElement.clientWidth
+        );
+      });
+      cy.screenshot(`deleted-organizations-list-${width}`, {
+        capture: 'viewport'
+      });
+      cy.get('[data-testid="preview-organization-42"]').click();
+      cy.get('[role="dialog"]:visible').should('contain.text', source.name);
+      cy.get('[role="dialog"]:visible [data-testid="organization-type"] img')
+        .invoke('attr', 'src')
+        .as('sourceIcon', { type: 'static' });
+      cy.get('[role="dialog"]:visible button[aria-label="close"]').click();
+      cy.get('[role="dialog"]:visible').should('not.exist');
+      // Restored preview focus can leave its tooltip over the delete button.
+      cy.get('[data-testid="preview-organization-42"]').trigger('mouseout');
+      cy.get('[data-testid="permanent-delete-organization-42"]').focus();
+      cy.get('[role="tooltip"]').should('not.exist');
+      cy.get('[data-testid="permanent-delete-organization-42"]').click();
+      cy.get('[role="dialog"]:visible').within(() => {
+        cy.get('@sourceIcon').then(iconSrc => {
+          cy.contains('p', source.name)
+            .parent()
+            .find('img')
+            .should('have.attr', 'src', iconSrc);
+        });
+        cy.contains(target.name).should('be.visible');
+        cy.get('a[href="/ui/organizations/43"]').should('not.exist');
+        cy.screenshot(`deleted-organization-confirmation-${width}`, {
+          capture: 'viewport'
+        });
+        cy.contains('button', /^Merge and permanently delete$/)
+          .should('be.enabled')
+          .click();
+      });
+      cy.wait('@permanentDelete');
+      cy.get('[role="dialog"]:visible').should('not.exist');
+      cy.get('[data-testid="deleted-organization-42"]').should('not.exist');
+      cy.get('[data-testid="deleted-organizations-count"]').should(
+        'contain.text',
+        '0 results'
+      );
+    });
+  });
+
+  it('does not present active organizations returned by an outdated API as deleted', () => {
+    cy.mockApiCatchAll();
+    cy.intercept(
+      { method: 'GET', pathname: '/api/v1/organizations' },
+      { body: { organizations: [target] } }
+    );
+    visitDeleted();
+    cy.get('[data-testid="deleted-organizations-section"]').within(() => {
+      cy.get('[role="alert"]').should(
+        'contain.text',
+        'The list of deleted organizations is currently unavailable.'
+      );
+      cy.get('[data-testid="deleted-organizations-count"]').should('not.exist');
+      cy.get('[data-testid^="deleted-organization-"]').should('not.exist');
+      cy.get('[data-testid^="permanent-delete-organization-"]').should(
+        'not.exist'
+      );
+    });
+  });
+});

packages/web-app/cypress/e2e/deletion-redirect.cy.js

@@ -1,8 +1,18 @@
+const expectOrganizationIcon = name => {
+  cy.get('@sourceIcon').then(iconSrc => {
+    cy.contains('p', name)
+      .parent()
+      .find('img')
+      .should('have.attr', 'src', iconSrc);
+  });
+};
+
 const scenarios = [
   {
     path: 'organizations',
     source: {
       name: 'Source organization',
+      type: 'SPELEOLOGY',
       cavers: [],
       exploredEntrances: [{ id: 101, name: 'Linked entrance' }],
       exploredNetworks: [{ id: 102, name: 'Linked network', nbEntrances: 2 }]
@@ -81,6 +91,9 @@ describe('Deletion with an existing redirect', () => {
       cy.wait('@source');
 
       if (path === 'organizations') {
+        cy.get('[data-testid="organization-type"] img')
+          .invoke('attr', 'src')
+          .as('sourceIcon', { type: 'static' });
         // MUI's generated icon test IDs are omitted from production builds.
         // Use the application-owned IDs so this also checks the CI bundle.
         cy.get('[data-testid="unlink-network-icon"]').should('have.length', 1);
@@ -89,6 +102,9 @@ describe('Deletion with an existing redirect', () => {
 
       cy.get('button[aria-label="Delete"]').click();
       cy.get('[role="dialog"]').within(() => {
+        if (path === 'organizations') {
+          expectOrganizationIcon(source.name);
+        }
         cy.get('[role="combobox"]').type('Destination');
       });
       cy.wait('@search');
@@ -105,6 +121,9 @@ describe('Deletion with an existing redirect', () => {
       cy.contains('button', /^Permanently delete$/).click();
       cy.wait('@target');
       cy.get('[role="dialog"]').within(() => {
+        if (path === 'organizations') {
+          expectOrganizationIcon(source.name);
+        }
         cy.contains(target.title ?? target.name).should('be.visible');
         cy.get('[role="combobox"]').should('not.exist');
         cy.contains('button', /^Cancel$/).click();