Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate product page to new macaw #4125

Merged
merged 97 commits into from
Sep 15, 2023
Merged
Show file tree
Hide file tree
Changes from 92 commits
Commits
Show all changes
97 commits
Select commit Hold shift + click to select a range
12d6034
Bump macaw
poulch Aug 22, 2023
d59e9b1
WIP Attributes in product page
poulch Aug 22, 2023
b6715cf
Bump macaw ui
poulch Aug 23, 2023
15057ff
Implement swatch row
poulch Aug 23, 2023
c414f93
Use DynamicMultiselect in Attributes
poulch Aug 23, 2023
a4dce26
Add label to swatch row
poulch Aug 23, 2023
e27a055
Bump macaw to 123
poulch Aug 23, 2023
4502995
Add textarea to metadata and seo
poulch Aug 23, 2023
7f487af
Fix debounce import
poulch Aug 23, 2023
4b8b01c
bump macaw to 124
poulch Aug 24, 2023
edcde24
Add rest of new fields
poulch Aug 25, 2023
af97336
Update PriceField input
poulch Aug 25, 2023
dc4ec48
Merge branch 'main' into 4009-migrate-product-page
poulch Aug 25, 2023
b9b8d1f
Add changeset
poulch Aug 25, 2023
642511f
bump macaw 125
poulch Aug 25, 2023
aee88c1
Fix attribute dropdown combobox
poulch Aug 26, 2023
49c38a3
Update rich text styles
poulch Aug 26, 2023
ec7dc40
Bump macaw 127
poulch Aug 28, 2023
b541ec6
Fix combobox and multiselect in
poulch Aug 28, 2023
d5c357e
Fix types
poulch Aug 29, 2023
987fb3a
Merge branch 'main' into 4009-migrate-product-page
poulch Aug 29, 2023
9640333
Merge branch 'main' into 4009-migrate-product-page
poulch Aug 29, 2023
4037587
Merge branch 'main' into 4009-migrate-product-page
poulch Aug 29, 2023
7a689be
Fix AttributeRowDropdown
poulch Aug 30, 2023
150c9f1
Fix SwatchRow
poulch Aug 30, 2023
63733ee
Use new component in DateTimeTimezoneField
poulch Aug 31, 2023
101b96a
Improve AttributeRowDropdown
poulch Aug 31, 2023
6ab67ea
Update ProductOrganizationDropdown
poulch Aug 31, 2023
cbcbf9d
Refactor Product organiazation, move common compontnets
poulch Aug 31, 2023
186d55a
Add commnt to ProductTaxes
poulch Aug 31, 2023
e2496a7
Extract messages/tranlsations
poulch Aug 31, 2023
e5a4f98
Fix update collections
poulch Aug 31, 2023
1c6093a
Replace lodash debounce with useDebounce
poulch Aug 31, 2023
f9993e5
Refactor ProductTaxes
poulch Aug 31, 2023
1c251cb
Bump macaw 128
poulch Aug 31, 2023
cfe3bbd
Add custom values support to multiselect and combobox
poulch Aug 31, 2023
13ce2b7
Remove custom component and use global in AttributeRow
poulch Aug 31, 2023
e5f5f1e
Add alwaysFetchOnFocus and onBlur to attribute combobox and multiselect
poulch Aug 31, 2023
53b214b
Fix types for onChange, update state when value change
poulch Aug 31, 2023
fc1ac3c
Combobox adornments props
poulch Sep 1, 2023
7ad0491
Use Combobox in SwatchRow
poulch Sep 1, 2023
9b4c554
Replace Box with span in SeoForm
poulch Sep 1, 2023
a9a40ee
Use low cap for end date copy
poulch Sep 1, 2023
534cc45
Make PriceField smaller
poulch Sep 1, 2023
5bf2ef4
Make all inputs small
poulch Sep 1, 2023
7524b48
Remove attribute labels
timuric Sep 1, 2023
cef2928
Use small size
timuric Sep 1, 2023
14ecb65
Apply acceptance changes
poulch Sep 1, 2023
38de99f
Use product media thumbnail size
poulch Sep 1, 2023
2bab550
Merge branch 'main' into 4009-migrate-product-page
poulch Sep 1, 2023
cd00612
Fix multiselect types
poulch Sep 1, 2023
2b9b390
Change attributes layout
timuric Sep 1, 2023
e55b3d1
Merge remote-tracking branch 'origin/attribute-labels-redesign' into …
poulch Sep 1, 2023
e90fdc8
Change boolean to new layout
timuric Sep 1, 2023
8c28921
Use DashboardCard in ProductTaxes
poulch Sep 1, 2023
f308b96
Capitalize labels
timuric Sep 1, 2023
656f629
Update copy
poulch Sep 1, 2023
50bf47a
Drop variant in preview
poulch Sep 1, 2023
a768f41
Remove attributes divider
poulch Sep 1, 2023
3c403fc
Spacing nudge for file attribute
timuric Sep 1, 2023
d945153
Use macaw next for error field
timuric Sep 1, 2023
e7dabd6
Remove not used formErrors
poulch Sep 1, 2023
17269fa
Improve RichText padding and label
poulch Sep 4, 2023
3a1d657
Improve RichText padding when no label
poulch Sep 4, 2023
b5954ed
Fix accordion overflow
poulch Sep 4, 2023
87dbed3
Improvments part 1
poulch Sep 5, 2023
68144b6
Improvments part 2
poulch Sep 5, 2023
8df4d31
Extract translations
poulch Sep 5, 2023
a62e786
Wrapp metadata into accordion
poulch Sep 5, 2023
3b2922d
Align spacing
poulch Sep 5, 2023
29a50f4
Update labels for accordions
poulch Sep 5, 2023
30fed57
Extract translations
poulch Sep 5, 2023
9e78b19
Update rich text content padding
poulch Sep 5, 2023
39b1cc4
Update rich text label font size
poulch Sep 5, 2023
0a7992c
Merge branch 'main' into 4009-migrate-product-page
poulch Sep 6, 2023
832cb71
Support fetch more
poulch Sep 6, 2023
c11e0b7
Fix metadata
poulch Sep 6, 2023
098fb1d
Bump macaw to 130
poulch Sep 7, 2023
fbf2613
Fix ts issues
poulch Sep 7, 2023
e8beb87
Fix loading state in multiselect and combobox
poulch Sep 7, 2023
d773b44
Improve loading state
poulch Sep 7, 2023
feb13fb
Bump macaw 131
poulch Sep 7, 2023
7613b84
Fix props after upgrade macaw
poulch Sep 7, 2023
0af3b79
Fix ts errors
poulch Sep 7, 2023
bb6b2e9
Fix combobox value prop
poulch Sep 7, 2023
48e09f4
Fix product create e2e
poulch Sep 8, 2023
0db643a
Fix productVariants e2e
poulch Sep 8, 2023
1012305
Fix shipping method e2e
poulch Sep 8, 2023
fa2a5c8
Bump macaw to 132
poulch Sep 8, 2023
dd14cb2
Fix rest of e2e tests
poulch Sep 8, 2023
9839a16
Fix pages e2e
poulch Sep 8, 2023
59f927e
Merge branch 'main' into 4009-migrate-product-page
poulch Sep 8, 2023
a4c8888
Remove lodash import and use typeof
poulch Sep 8, 2023
2f49ae0
Refactor multiselect and combobox
poulch Sep 11, 2023
2044c72
Addd space to open product taxes dropdown
poulch Sep 13, 2023
948fa2c
Merge branch 'main' into 4009-migrate-product-page
poulch Sep 14, 2023
aa7f9e7
Bump macaw and add padding
poulch Sep 15, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hot-coins-exercise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"saleor-dashboard": minor
---

Migrate product page to new macaw components
2 changes: 1 addition & 1 deletion cypress/elements/catalog/products/product-details.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const PRODUCT_DETAILS = {
skuInput: "[name='sku']",
variantRow: "[data-test-id='product-variant-row']",
variantPrice: '[data-test-id="price"]',
collectionRemoveButtons: '[data-test-id="collection-remove"]',
collectionRemoveButtons: '[data-test-id*="selected-option"] span:last-child',
addWarehouseButton: '[data-test-id="add-warehouse"]',
warehouseOption: "[role='menuitem']",
stockInput: '[data-test-id="stock-input"]',
Expand Down
3 changes: 1 addition & 2 deletions cypress/elements/catalog/products/variants-selectors.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
export const VARIANTS_SELECTORS = {
variantNameInput: '[data-test-id="variant-name"]',
skuTextField: '[data-test-id="sku"]',
attributeOption:
"[data-test-type='option'], [data-test-id='multi-autocomplete-select-option']",
attributeOption: "[data-test-id='select-option']",
attributeSelector: "[data-test-id='attribute-value']",
addWarehouseButton: "[data-test-id='add-warehouse']",
warehouseOption: "[role='menuitem']",
Expand Down
2 changes: 1 addition & 1 deletion cypress/elements/pages/page-details.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ export const PAGE_DETAILS_SELECTORS = {
isNotPublishedCheckbox: '[name="isPublished"][value=false]',
uploadFileButton: '[data-test-id="button-upload-file"]',
richTextEditorAttributeValue: '[class*="ce-paragraph"]',
booleanAttributeValueCheckbox: '[role="checkbox"]',
booleanAttributeValueCheckbox: '[data-macaw-ui-component="Toggle"]',
numericAttributeValueInput: '[name*="attribute:"]',
};
3 changes: 3 additions & 0 deletions cypress/elements/shared/sharedElements.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ export const SHARED_ELEMENTS = {
},
warningDialog: '[data-test-id="warning-dialog"]',
pageHeader: "[data-test-id='page-header']",
multiselect: {
selectedOptions: '[data-test-id*="selected-option-"]',
},
multiAutocomplete: {
selectedOptions: '[id*="selected-option-"]',
},
Expand Down
117 changes: 68 additions & 49 deletions cypress/support/customCommands/sharedElementsOperations/selects.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,30 @@ Cypress.Commands.add("createNewOption", (selectSelector, newOption) => {
.click({ force: true });
});

Cypress.Commands.add("fillNewMultiSelect", (selectSelector, option) => {
cy.fillAutocompleteSelect(selectSelector, option, true).then(
returnedOption => {
cy.get(SHARED_ELEMENTS.header)
.first()
.click({ force: true })
.get(SHARED_ELEMENTS.multiselect.selectedOptions)
.should("be.visible");
return cy.wrap(returnedOption);
},
);
});

Cypress.Commands.add("fillMultiSelect", (selectSelector, option) => {
cy.fillAutocompleteSelect(selectSelector, option).then(returnedOption => {
cy.get(SHARED_ELEMENTS.header)
.first()
.click({ force: true })
.get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
.should("be.visible");
return cy.wrap(returnedOption);
});
cy.fillAutocompleteSelect(selectSelector, option, true).then(
returnedOption => {
cy.get(SHARED_ELEMENTS.header)
.first()
.click({ force: true })
.get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
.should("be.visible");
return cy.wrap(returnedOption);
},
);
});

Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
Expand All @@ -60,46 +75,50 @@ Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
.click();
});

Cypress.Commands.add("fillAutocompleteSelect", (selectSelector, option) => {
let selectedOption = option;
cy.get(selectSelector)
.click()
.get(BUTTON_SELECTORS.selectOption)
.should("be.visible");
if (option) {
cy.get(BUTTON_SELECTORS.selectOption)
.first()
.then(detachedOption => {
cy.get(selectSelector).then(select => {
if (select.find("input").length > 0) {
cy.get(selectSelector)
.find("input")
.clear()
.type(option, { delay: 10 });
} else {
cy.get(selectSelector).clear().type(option, { delay: 10 });
}
Cypress.Commands.add(
"fillAutocompleteSelect",
(selectSelector, option, isForce = false) => {
let selectedOption = option;
console.log("isForce", isForce);
cy.get(selectSelector)
.click(isForce ? { force: true } : undefined)
.get(BUTTON_SELECTORS.selectOption)
.should("be.visible");
if (option) {
cy.get(BUTTON_SELECTORS.selectOption)
.first()
.then(detachedOption => {
cy.get(selectSelector).then(select => {
if (select.find("input").length > 0) {
cy.get(selectSelector)
.find("input")
.clear()
.type(option, { delay: 10 });
} else {
cy.get(selectSelector).clear().type(option, { delay: 10 });
}
});
cy.wrap(detachedOption).should(det => {
Cypress.dom.isDetached(det);
});
cy.contains(BUTTON_SELECTORS.selectOption, option)
.should("be.visible")
.click({ force: true })
.then(() => selectedOption);
});
cy.wrap(detachedOption).should(det => {
Cypress.dom.isDetached(det);
} else {
cy.get(BUTTON_SELECTORS.selectOption)
.wait(1000)
.first()
.invoke("text")
.then(text => {
selectedOption = text;
});
cy.contains(BUTTON_SELECTORS.selectOption, option)
.should("be.visible")
.click({ force: true })
.then(() => selectedOption);
});
} else {
cy.get(BUTTON_SELECTORS.selectOption)
.wait(1000)
.first()
.invoke("text")
.then(text => {
selectedOption = text;
});
return cy
.get(BUTTON_SELECTORS.selectOption)
.first()
.click()
.then(() => selectedOption);
}
});
return cy
.get(BUTTON_SELECTORS.selectOption)
.first()
.click()
.then(() => selectedOption);
}
},
);
2 changes: 2 additions & 0 deletions cypress/support/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,12 @@ declare namespace Cypress {
fillAutocompleteSelect(
selectSelector: string,
option?: string,
isForce?: boolean,
): Chainable<any>;
addAliasToGraphRequest(alias: string): Chainable<any>;
sendRequestWithQuery(query: string): Chainable<any>;
fillMultiSelect(selectSelector: string, option: string): Chainable<any>;
fillNewMultiSelect(selectSelector: string, option: string): Chainable<any>;
createNewOption(selectSelector: string, newOption: string): Chainable<any>;
findElementsAndMakeActionOnTable({
elementsGraphqlAlias: string,
Expand Down
4 changes: 2 additions & 2 deletions cypress/support/pages/catalog/products/VariantsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ export function fillUpVariantDetails({
selectAttributeWithType({ attributeType, attributeName });
cy.get(PRICE_LIST.priceInput)
.each(input => {
cy.wrap(input).type(price);
cy.wrap(input).type(price, { force: true });
})
.get(PRICE_LIST.costPriceInput)
.each(input => {
cy.wrap(input).type(costPrice);
cy.wrap(input).type(costPrice, { force: true });
});
if (variantName) {
cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import { PRICE_LIST } from "../../../../elements/catalog/products/price-list";

export const priceInputLists = {
sellingPrice: PRICE_LIST.priceInput,
costPrice: PRICE_LIST.costPriceInput
costPrice: PRICE_LIST.costPriceInput,
};

export function fillUpPriceList(
price = 1,
priceTypeInput = priceInputLists.sellingPrice
priceTypeInput = priceInputLists.sellingPrice,
) {
cy.get(priceTypeInput).each($priceInput => {
cy.wrap($priceInput).type(price);
cy.wrap($priceInput).type(price, { force: true });
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export function fillUpProductOrganization({
}) {
const organization = {};
return cy
.fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType)
.fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType, true)
.then(selected => {
organization.productType = selected;
fillUpCollectionAndCategory({ category, collection });
Expand All @@ -124,10 +124,10 @@ export function fillUpProductOrganization({
export function fillUpCollectionAndCategory({ category, collection }) {
const organization = {};
return cy
.fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category)
.fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category, true)
.then(selected => {
organization.category = selected;
cy.fillMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
cy.fillNewMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
})
.then(selected => {
organization.collection = selected;
Expand Down
2 changes: 1 addition & 1 deletion cypress/support/pages/discounts/vouchersPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function createVoucher({
cy.get(VOUCHERS_SELECTORS.requirements.minOrderValueCheckbox)
.click()
.get(VOUCHERS_SELECTORS.requirements.minOrderValueInput)
.type(minOrderValue);
.type(minOrderValue, { force: true });
}
if (minAmountOfItems) {
cy.get(VOUCHERS_SELECTORS.requirements.minAmountOfItemsCheckbox)
Expand Down
4 changes: 3 additions & 1 deletion cypress/support/pages/ordersTransactionUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ export function typeRefundReason(refundReasonDescription) {
.type(`reason_${refundReasonDescription}`);
}
export function typeRefundTotalAmount(amount) {
return cy.get(ORDER_TRANSACTION_CREATE.transactAmountInput).type(amount);
return cy
.get(ORDER_TRANSACTION_CREATE.transactAmountInput)
.type(amount, { force: true });
}
export function typeTransactionReference(reference) {
return cy.get(ORDERS_SELECTORS.transactionReferenceInput).type(reference);
Expand Down
12 changes: 6 additions & 6 deletions cypress/support/pages/shippingMethodPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,11 +136,11 @@ export function fillUpShippingRate({
}
cy.get(SHIPPING_RATE_DETAILS.priceInput).each($priceInput => {
cy.wrap($priceInput)
.clear()
.clear({ force: true })
.get(SHARED_ELEMENTS.pageHeader)
.click()
.wrap($priceInput)
.clearAndType(price);
.clearAndType(price, { force: true });
});
}

Expand Down Expand Up @@ -189,16 +189,16 @@ export function saveRateAfterUpdate() {

export function fillUpLimits({ max, min }) {
cy.get(SHIPPING_RATE_DETAILS.minValueInput)
.type(min)
.type(min, { force: true })
poulch marked this conversation as resolved.
Show resolved Hide resolved
.get(SHIPPING_RATE_DETAILS.maxValueInput)
.type(max);
.type(max, { force: true });
}

export function fillUpDeliveryTime({ min, max }) {
cy.get(SHIPPING_RATE_DETAILS.minDeliveryTimeInput)
.clearAndType(min)
.clearAndType(min, { force: true })
.get(SHIPPING_RATE_DETAILS.maxDeliveryTimeInput)
.clearAndType(max);
.clearAndType(max, { force: true });
}

export const rateOptions = {
Expand Down
Loading
Loading