fix: marking template as active without needing to refresh the page (#…

…799) Co-authored-by: Yoganandan Pandiyan <p.yoganandan@gmail.com> Co-authored-by: janosbabik <143906591+janosbabik@users.noreply.github.com>
UserOfficeProject · Oct 30, 2024 · 69b95a5 · 69b95a5
1 parent 845ec87
commit 69b95a5
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 9 deletions.
diff --git a/apps/e2e/cypress/e2e/templatesBasic.cy.ts b/apps/e2e/cypress/e2e/templatesBasic.cy.ts
@@ -435,8 +435,6 @@ context('Template Basic tests', () => {
       cy.visit('/');
       cy.navigateToTemplatesSubmenu('Shipment declaration templates');
 
-      cy.get('[data-cy=mark-as-active]').click();
-
       cy.get('[data-cy=delete-template]').click();
 
       cy.get('[data-cy=confirm-ok]').click();
@@ -1995,6 +1993,132 @@ context('Template Basic tests', () => {
       cy.notification({ variant: 'success', text: 'Saved' });
     });
   });
+
+  describe('Activate/Deactivate template tests', () => {
+    it('Activate a Shipment Declaration template', () => {
+      cy.login('officer');
+      cy.visit('/ShipmentDeclarationTemplates');
+      cy.finishedLoading();
+
+      //Create a new template
+
+      cy.get('[data-cy=create-new-button]').click();
+
+      cy.get('[data-cy="name"]').type('Shipment Declaration Template');
+
+      cy.get('[data-cy="description"]').type('Shipment Declaration Template');
+
+      cy.get('[data-cy="submit"]').click();
+
+      // Create another template
+      cy.finishedLoading();
+      cy.visit('/ShipmentDeclarationTemplates');
+      cy.get('[data-cy=create-new-button]').click();
+
+      cy.get('[data-cy="name"]').type('Shipment Declaration Template 2');
+
+      cy.get('[data-cy="description"]').type('Shipment Declaration Template 2');
+
+      cy.get('[data-cy="submit"]').click();
+
+      cy.finishedLoading();
+      cy.visit('/ShipmentDeclarationTemplates');
+
+      // Shipment declaration template should contain data-cy=mark-as-inactive
+      cy.contains('Shipment Declaration Template')
+        .parent()
+        .find('[data-cy=mark-as-inactive]')
+        .should('exist');
+
+      // Shipment declaration template 2 should contain data-cy=mark-as-active
+      cy.contains('Shipment Declaration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .should('exist');
+
+      // Activate the secont template
+      cy.contains('Shipment Declaration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .click();
+
+      // Shipment declaration template should contain data-cy=mark-as-inactive
+      cy.contains('Shipment Declaration Template')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .should('exist');
+
+      // Shipment declaration template 2 should contain data-cy=mark-as-active
+      cy.contains('Shipment Declaration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-inactive]')
+        .should('exist');
+    });
+
+    it('Activate a Visit Registration template', function () {
+      if (!featureFlags.getEnabledFeatures().get(FeatureId.VISIT_MANAGEMENT)) {
+        this.skip();
+      }
+
+      cy.login('officer');
+      cy.visit('/VisitTemplates');
+      cy.finishedLoading();
+
+      //Create a new template
+
+      cy.get('[data-cy=create-new-button]').click();
+
+      cy.get('[data-cy="name"]').type('Visit Registration Template');
+
+      cy.get('[data-cy="description"]').type('Visit Registration Template');
+
+      cy.get('[data-cy="submit"]').click();
+
+      // Create another template
+      cy.finishedLoading();
+      cy.visit('/VisitTemplates');
+      cy.get('[data-cy=create-new-button]').click();
+
+      cy.get('[data-cy="name"]').type('Visit Registration Template 2');
+
+      cy.get('[data-cy="description"]').type('Visit Registration Template 2');
+
+      cy.get('[data-cy="submit"]').click();
+
+      cy.finishedLoading();
+      cy.visit('/VisitTemplates');
+
+      // Visit Registration template should contain data-cy=mark-as-inactive
+      cy.contains('Visit Registration Template')
+        .parent()
+        .find('[data-cy=mark-as-inactive]')
+        .should('exist');
+
+      // Visit Registration template 2 should contain data-cy=mark-as-active
+      cy.contains('Visit Registration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .should('exist');
+
+      // Activate the secont template
+      cy.contains('Visit Registration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .click();
+
+      // Visit Registration template should contain data-cy=mark-as-inactive
+      cy.contains('Visit Registration Template')
+        .parent()
+        .find('[data-cy=mark-as-active]')
+        .should('exist');
+
+      // Visit Registration template 2 should contain data-cy=mark-as-active
+      cy.contains('Visit Registration Template 2')
+        .parent()
+        .find('[data-cy=mark-as-inactive]')
+        .should('exist');
+    });
+  });
 });
 
 context('Template Delete, Archive, Unarchive', () => {

diff --git a/apps/frontend/src/components/template/withMarkTemplateAsActiveAction.tsx b/apps/frontend/src/components/template/withMarkTemplateAsActiveAction.tsx
@@ -1,6 +1,6 @@
 import { MaterialTableProps } from '@material-table/core';
 import DoneIcon from '@mui/icons-material/Done';
-import React from 'react';
+import React, { useState } from 'react';
 
 import UOLoader from 'components/common/UOLoader';
 import { Template, TemplateGroupId } from 'generated/sdk';
@@ -27,34 +27,44 @@ function withMarkTemplateAsActiveAction<T>(
     const { activeTemplateId, setActiveTemplateId } = useActiveTemplateId(
       props.templateGroup
     );
+    const [seed, setSeed] = useState(Math.random());
 
     if (activeTemplateId === undefined) {
       return <UOLoader />;
     }
 
     return (
       <Component
+        key={seed}
         {...props}
         actions={[
           (rowData) => ({
             icon: function DoneIconComponent() {
               return rowData.templateId === activeTemplateId ? (
-                <DoneIcon data-cy="mark-as-active" />
+                <DoneIcon data-cy="mark-as-inactive" />
               ) : (
                 <DoneIcon
                   sx={(theme) => ({ color: theme.palette.grey.A100 })}
                   data-cy="mark-as-active"
                 />
               );
             },
-            tooltip: 'Mark as active',
+            tooltip:
+              rowData.templateId === activeTemplateId
+                ? 'Mark as Inactive'
+                : 'Mark as active',
             onClick: async (_event, data) => {
               const newActiveTemplateId = (data as Pick<Template, 'templateId'>)
                 .templateId;
-              await api().setActiveTemplate({
-                templateGroupId: props.templateGroup,
-                templateId: newActiveTemplateId,
-              });
+              await api()
+                .setActiveTemplate({
+                  templateGroupId: props.templateGroup,
+                  templateId: newActiveTemplateId,
+                })
+                .then(() => {
+                  setActiveTemplateId(newActiveTemplateId);
+                  setSeed(Math.random());
+                });
               setActiveTemplateId(newActiveTemplateId);
             },
           }),