feat(admin-ui): consolidate UI primitives into src/components/ui/

admin-ui/cypress.config.ts

@@ -4,8 +4,8 @@ export default defineConfig({
   defaultCommandTimeout: 5000,
 
   retries: {
-    runMode: 3,
-    openMode: 2,
+    runMode: 2,
+    openMode: 1,
   },
 
   e2e: {
@@ -14,8 +14,8 @@ export default defineConfig({
     baseUrl: 'http://localhost:3000',
     supportFile: 'cypress/support/e2e.ts',
     retries: {
-      openMode: 2,
-      runMode: 3,
+      openMode: 1,
+      runMode: 1,
     },
   },
 

admin-ui/cypress/e2e/account.cy.ts

@@ -269,7 +269,7 @@ describe('Account', () => {
         .contains(localizations.en.send_verification_mail)
         .should('be.visible');
 
-      cy.get('button#delete_button').should('be.visible');
+      cy.get('button.border-rose-500').should('be.visible');
     });
 
     it('Should [SEND VERIFICATION EMAIL] successfully', () => {
@@ -296,7 +296,7 @@ describe('Account', () => {
     it('Should [DELETE EMAIL] successfully', () => {
       const { me: currentUser } = CurrentUserResponse.data;
 
-      cy.get('button#delete_button').first().click();
+      cy.get('button.border-rose-500').eq(1).click();
 
       cy.get('button#danger_continue')
         .contains(localizations.en.delete_email)

admin-ui/cypress/e2e/assortment-media.cy.ts

@@ -147,7 +147,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [DELETE] media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('li button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_continue')
       .contains(localizations.en.delete_assortment_media)
       .click();
@@ -175,7 +175,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [CANCEL] delete media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('li button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_cancel')
       .contains(localizations.en.cancel)
       .click();
@@ -186,7 +186,7 @@ describe('Assortment Detail Media', () => {
       TranslatedAssortmentMediaTextsResponse.data
         .translatedAssortmentMediaTexts;
 
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').should('have.value', firstText.title);
     cy.get('input#subtitle').should('have.value', firstText.subtitle);
   });
@@ -197,7 +197,7 @@ describe('Assortment Detail Media', () => {
         .translatedAssortmentMediaTexts;
 
     cy.selectLocale(1);
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').should('have.value', secondTexts.title);
     cy.get('input#subtitle').should('have.value', secondTexts.subtitle);
   });
@@ -207,7 +207,7 @@ describe('Assortment Detail Media', () => {
       TranslatedAssortmentMediaTextsResponse.data
         .translatedAssortmentMediaTexts;
 
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(firstText.title);
     cy.get('input#subtitle').clear().type(firstText.subtitle);
 
@@ -239,7 +239,7 @@ describe('Assortment Detail Media', () => {
 
     cy.selectLocale(1);
     cy.get('select#locale-wrapper').should('not.have.value', '');
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(secondTexts.title);
     cy.get('input#subtitle').clear().type(secondTexts.subtitle);
 
@@ -259,7 +259,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [CANCEL] in media texts update form', () => {
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type('title');
     cy.get('button[type="button"][data-id="cancel_update"]')
       .contains(localizations.en.cancel)

admin-ui/cypress/e2e/country.cy.ts

@@ -265,7 +265,7 @@ describe('Countries', () => {
       .click({ force: true });
     cy.get('button').contains(localizations.en.edit).click();
     cy.url().should('include', `/country/?countryId=${country._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')

admin-ui/cypress/e2e/currency.cy.ts

@@ -325,7 +325,7 @@ describe('Currencies', () => {
       .click({ force: true });
     cy.get('button').contains(localizations.en.edit).click();
     cy.url().should('include', `/currency/?currencyId=${currency._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')

admin-ui/cypress/e2e/filter.cy.ts

@@ -114,28 +114,15 @@ describe('Filter', () => {
 
     it('Toggling status [ACTIVE/INACTIVE] toggle should update route', () => {
       cy.get('button[role="switch"]').click();
-      cy.location().then((current) => {
+      cy.location().should((current) => {
         expect(current.pathname).to.eq('/filters/');
         expect(convertURLSearchParamToObj(current.search)).to.deep.eq({
           includeInactive: 'false',
         });
       });
 
-      cy.wait(fullAliasName(FilterOperations.GetFiltersList)).then(
-        (currentSubject) => {
-          const { request } = currentSubject;
-          expect(request.body.variables.includeInactive).to.eq(false);
-        },
-      );
-
       cy.get('button[role="switch"]').click();
-      cy.wait(fullAliasName(FilterOperations.GetFiltersList)).then(
-        (currentSubject) => {
-          const { request } = currentSubject;
-          expect(request.body.variables.includeInactive).to.eq(true);
-        },
-      );
-      cy.location().then((current) => {
+      cy.location().should((current) => {
         expect(current.pathname).to.eq('/filters/');
         expect(convertURLSearchParamToObj(current.search)).to.deep.eq({
           includeInactive: 'true',
@@ -531,7 +518,7 @@ describe('Filter', () => {
       );
       cy.get('input[name="key"]').type(SingleFilterResponse.data.filter.key);
       cy.get('select[name="type"]').select(firstFilterType.value);
-      cy.get(`button[aria-label="${localizations.en.delete}"]`).click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('input[type="submit"]')
         .contains(localizations.en.create_filter)
         .click();
@@ -608,7 +595,7 @@ describe('Filter', () => {
       );
       cy.get('input[name="key"]').type(SingleFilterResponse.data.filter.key);
       cy.get('select[name="type"]').select(firstFilterType.value);
-      cy.get(`button[aria-label="${localizations.en.delete}"]`).click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('input[type="submit"]')
         .contains(localizations.en.create_filter)
         .click();

admin-ui/cypress/e2e/language.cy.ts

@@ -212,7 +212,7 @@ describe('Languages', () => {
     cy.location('pathname').should('eq', '/language/');
     cy.visit(`/language?languageId=${language._id}`);
     cy.url().should('include', `/language/?languageId=${language._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')

admin-ui/cypress/e2e/order.cy.ts

@@ -260,36 +260,6 @@ describe('Order', () => {
         },
       );
 
-      cy.wait(fullAliasName(OrderOperations.OrderDeliveryStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            OrderDeliveryStatusResponse,
-          );
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.PaymentProvidersType)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            PaymentProvidersTypeResponse,
-          );
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.OrderStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(OrderStatusResponse);
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.OrderPaymentStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            OrderPaymentStatusResponse,
-          );
-        },
-      );
-
       cy.url().should('include', `/orders/?orderId=${order._id}`);
       cy.get('h2').should('contain.text', localizations.en.order);
     });

admin-ui/cypress/e2e/product-assignment.cy.ts

@@ -151,9 +151,7 @@ describe('Product Assignment', () => {
     });
 
     it('Should [REMOVE productASSIGNMENT ] successfully', () => {
-      cy.get(
-        `button[type=button][aria-label="${localizations.en.delete}"]#delete_button`,
-      ).first().click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('[aria-modal="true"]').should('exist');
       cy.get('button[type="button"]#danger_continue')
         .should('contain.text', localizations.en.delete_variation_assignment)

admin-ui/cypress/e2e/product-media.cy.ts

@@ -141,7 +141,7 @@ describe('Product Media', () => {
   });
 
   it('Should [DELETE] media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_continue')
       .contains(localizations.en.delete_product_media)
       .click();
@@ -176,7 +176,7 @@ describe('Product Media', () => {
   });
 
   it('Should [CANCEL] delete media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_cancel')
       .contains(localizations.en.cancel)
       .click();
@@ -194,7 +194,7 @@ describe('Product Media', () => {
     const { translatedProductMediaTexts: mediaTexts } =
       TranslatedProductMediaTextsResponse.data;
 
-    cy.get('div#edit__icon_button').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(mediaTexts[0].title);
     cy.get('input#subtitle').clear().type(mediaTexts[0].subtitle);
 
@@ -239,7 +239,7 @@ describe('Product Media', () => {
   });
 
   it('Should [CANCEL] in media texts update form', () => {
-    cy.get('div#edit__icon_button').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type('title');
     cy.get('button[type="button"][data-id="cancel_update"]')
       .contains(localizations.en.cancel)

admin-ui/cypress/e2e/product-variation.cy.ts

@@ -220,7 +220,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
       cy.get('div[aria-modal="true"]').should('exist');
       cy.get('#danger_continue')
         .should('contain.text', localizations.en.delete_product_variation)
@@ -240,7 +240,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
       cy.get('div[aria-modal="true"]').should('exist');
       cy.get('#danger_cancel')
         .should('contain.text', localizations.en.cancel)
@@ -254,7 +254,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .should('have.value', firstVariation.texts.title);
@@ -270,7 +270,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .clear()
@@ -301,7 +301,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .clear()
@@ -361,5 +361,82 @@ describe('Product Variation', () => {
         .should('have.value', localizations.en.add_option)
         .should('be.disabled');
     });
+
+    it('Should  [UPDATE VARIATION OPTION TEXT] successfully', () => {
+      const [firstOption] = firstVariation.options;
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
+
+      cy.get('form.variation-option-update-form input[name="title"]')
+        .clear()
+        .type('updated option title');
+      cy.get('form.variation-option-update-form input[name="subtitle"]')
+        .clear()
+        .type('updated option subtitle');
+      cy.get('form.variation-option-update-form button[type="submit"]')
+        .contains(localizations.en.save)
+        .click();
+
+      cy.wait(
+        fullAliasMutationName(ProductOperations.UpdateProductVariationTexts),
+      ).then((currentSubject) => {
+        const { request, response } = currentSubject;
+        expect(request.body.variables.productVariationId).to.eq(firstVariation._id);
+        expect(request.body.variables.productVariationOptionValue).to.eq(firstOption.value);
+        expect(request.body.variables.texts[0].title).to.eq('updated option title');
+        expect(request.body.variables.texts[0].subtitle).to.eq('updated option subtitle');
+        expect(response.body).to.deep.eq(UpdateProductVariationTextResponse);
+      });
+    });
+
+    it('Should  [CANCEL UPDATE VARIATION OPTION] successfully', () => {
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
+
+      cy.get('form.variation-option-update-form input[name="title"]')
+        .clear()
+        .type('updated option title');
+      cy.get('form.variation-option-update-form button[type="button"]')
+        .contains(localizations.en.cancel)
+        .click();
+
+      cy.get('form.variation-option-update-form input[name="title"]').should('not.exist');
+    });
+
+    it('Should  [REMOVE VARIATION OPTION] successfully', () => {
+      const [firstOption] = firstVariation.options;
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
+
+      cy.get('button#danger_continue')
+        .should('contain.text', localizations.en.delete_variation_option)
+        .click();
+
+      cy.wait(
+        fullAliasMutationName(ProductOperations.RemoveProductVariationOption),
+      ).then((currentSubject) => {
+        const { request, response } = currentSubject;
+        expect(request.body.variables.productVariationId).to.eq(firstVariation._id);
+        expect(request.body.variables.productVariationOptionValue).to.eq(firstOption.value);
+        expect(response.body).to.deep.eq(RemoveProductVariationOptionResponse);
+      });
+    });
+
+    it('Should  [CANCEL REMOVING VARIATION OPTION] successfully', () => {
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
+
+      cy.get('button#danger_cancel')
+        .should('contain.text', localizations.en.cancel)
+        .click();
+    });
   });
 });