Operations components should use composer pattern, because of growing cognitive complexity of code and hard to read git diffs. Therefore, we should end up implementing this:

<Composer components={[<Provider1 />, <Provider2 />, <Provider3 />]}>
{renderProps => 
  <Component prop1={renderProps[0]} ... />
}
</Composer>
rather than this:
```javascript
<Provider1>
{renderProps1 => 
  <Provider2>
  {renderProps2 =>
    <Provider3>
    {renderProps3 => 
      <Component prop1={renderProps1} ... />
    }
    </Provider3>
  }
  </Provider2>
}
</Provider1>

The problem is that select components render dropdown at root using portal, so selecting an option results in sending click away event. We should investigate if select component can render dropdown as sibling instead of using portal to root.

Google's own testing tool shows them and lack of them could be puzzling if you're trying to get them listed in the search results:

We could also display the preview widget in product details, not just the edit form.

What I'm trying to achieve

To extract common piece of almost all mutations to common fragment.

Describe a proposed solution

Replace

someMutation() {
  errors {
    field
    message
  }
  ...
}

with

someMutation() {
  errors {
    ...MutationErrorsFragment
  }
  ...
}

We should double check if all labels are translated and have context provided if necessary.

Support for digital content fulfillment in the backend was added in PR saleor/saleor#2098. Now we need to implement related management views in Dashboard 2.0. Mockups are available in Figma in the "PRODUCTS DIGITAL" section.

We should not use the callback factory pattern, instead of doing this:

onClick={handleClick(productId)}

we should do this"

onClick={() => handleClick(productId)}

We need a reusable component that uses a proper mouse cursor, handled hover state and displays a ripple when interacted with.

What I'm trying to achieve

adding an Item to an Order

Steps to reproduce the problem

1. Open All Orders
2. click Plus for new Order
3. click add Products
4. select Product
5. no button to save is visible (maybe the button is offscreen)

What I expected to happen

an button to save

Screenshots

System information
Operating system: Mac OSX
Browser: Chrome (latest)

What I'm trying to achieve

To show user a beautiful error page rather than blank screen and no explanation at all.

Describe a proposed solution

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

What I'm trying to achieve

To filter products by multiple categories.

Describe a proposed solution

Add autocomplete component and send list of IDs to API.

This is a feature I expected to see on dashboard 2.0, but doesn't seem to be planned. I think we should add a way to move nodes of mptt trees (so we can implement it to other cases than the category model).

I'm thinking that maybe we could add a button "Move categories" and render the whole tree and allow the user to drag and drop categories and subcategories where the user want to move them.

According to the mockups, we should also provide the following bulk actions:

• bulk delete attributes
• bulk delete shipping methods

Situations where forms are nested should not happen, therefore this prop is useless.

Feature Request:
Addition of Abandoned Checkout

Functionalities:

• Ability to view Abandoned Checkouts List in Orders Section of Dashboard
• Abandoned Checkout Details Page
• Ability to prepare and send Recovery Emails from Abandoned Checkout Details Page

Designs for it can be seen in Figma File

Setting "strictNullChecks": true in tsconfig.json reveals a long list of places where we don't properly check for possibly unset props and parameters.

With PR saleor/saleor#4018 we've added more events that can appear in the "Order history" section on order details page. We should now implement support for rendering them. All types of events can be found in the "UI Guide" section in Figma.

There are components that use theme.spacing.unit as width or height where it could be written as simple integers.

For accessibility reasons it's important that all forms have an explicit button of type="submit" and that each form handles saving through its onSubmit property.

We should make both properties (initial and onSubmit) required.

We should add types to all places where any is used.

i18next uses complex JSON structures which makes it hard to translate. We want to keep using Transifex which currently relies on unsupported scripts to convert between i18next's JSON structures and gettext .po catalog files.

Lingui on the other hand depends on Babel plugins which means we'd have to start using Babel to compile our Typescript code. We need to investigate the performance hit caused by adding another loader to the pipeline (especially when working locally with watch mode enabled).

What I'm trying to achieve

To keep order and transparency within the project.

Describe a proposed solution

Keep stories in their sections, include them in section's storybook.js (or stories.js or whatever) and in main config.js include those files. This way section files live only in one place, and storybook's config.js decreases to only a few lines long, increasing code readability.

What I'm trying to achieve

I'm trying to browse the dashboard as an admin with limited permissions.

Steps to reproduce the problem

I haven't discovered all failing cases as there is a lot of views and multiple permissions that staff users may have. One scenario that doesn't work and illustrates the issue:

1. Create a staff user and give him "Manage orders" permission only.
2. Try to log in as the newly created user.
3. Dashboard homepage doesn't render because it queries for User.note field which requires "Manage products" permission.
4. Go to order details list and try to create a new draft order.
5. Draft order view fails because it tries to load the list of customers, but our staff user has no permission to fetch it.

This component currently relies on absolutely positioned elements that share the common DOM ancestors. That in turn makes it impossible to fix #11 as the table is often already surrounded by a form.

We've agreed that a proper solution should use a portal-based <Modal/> that contains an actual <Form/> and a <button type="submit"/>. The card itself will be positioned using Popper.

Description

While creating a product, if I realize that the category/collection/product type that I want to use has not been created yet, there's no convenient way to do so (maybe through a popup). Instead, I have to discard the information I've already entered into the product and create the categories or product types first.

Also, if you have a category tree where some subcategories have identical names (like "Footwear" under "Men's fashion" and "Footwear" under "Ladies fashion"), there is no way to tell them apart in the dropdown when creating a new product. See screenshot below. Some breadcrumbs and/or tooltips showing the parent categories of each suggestion should solve this nicely.

Screenshots or mockups

What I'm trying to achieve

To simplify code.

Describe a proposed solution

export function getMutationState<TData>(
  result: MutationResult<TData>,
  ...keys: Array<keyof TData>
): ConfirmButtonTransitionState {
  if (result.loading) {
    return "loading";
  }
  if (result.called) {
    interface MutationData {
      errors: UserError[];
    }
    return keys
      .map(key => {
        const data = (result.data[key] as unknown) as MutationData;
        return data.errors;
      })
      .map(hasErrors)
      .reduce((acc, curr) => acc || curr, false)
      ? "error"
      : "success";
  }
  return "default";
}

At this moment, <ConfirmFormLeaveDialog /> is displayed at each URL change if form data is modified. This causes problems when creating eg. products, displaying prompt before navigating to new product's details view, or adding attributes to new product type.

Implement events log on the customer details page in Dashboard 2.0:

Customer events were added in PR saleor/saleor#4094. All types of events can be also found in Figma in the "UI guide" section.

Dashboard right now works like this:
Add element --> Provide basic information --> SAVE --> Open added element --> Configure element --> SAVE

Should be:
Add element --> Configure element --> SAVE

We should simplify adding elements by giving full capabilities to modify element after adding it to the system without necessity to Save after adding basic information.

What I'm trying to achieve

To be able to use styling hook without packing two theme providers into the tree

Describe a proposed solution

Update @material-ui/core to v4 and then fix all the imports. Also check if all styles are okay.

Feature:
Gift Card Section

Functionalities:

• Add section Gift Cards in Catalog section
• List with all gift cards in the shop:
  • Alert card showing that you can create a "gift card" product in your store
  • Ability to filter the list
• Gift Card details page:
  • Ability to disable gift card
  • Ability to resend gift card code to customer
• Ability to issue gift card from list view:
  • Ability to create custom card code
  • Ability to assign card to specific customer
  • Ability to choose denomination and use "custom" denomination
  • Denominations to choose should be based on denominations in "Gift Card" product type
• Add Gift Card section to Configure:
  • Ability to set default expiry dates
• Add "Gift Card" product type to saleor:
  • Ability to add denominations to product type
  • Ability to define whether product is shippable
• Add Gift Card in Customer Details page:
  • Element should show last 5 gift cards issued for this Customer
  • Ability to issue Card to customer from Customer Detail Page
  • "View All" gift card button should move user to prefiltered list of gift cards issued for customer.

Design and Prototype can be seen on Figma file

At this moment autocomplete widget logic are messy and they require storing value as

interface AutocompleteFieldValue {
  label: string;
  value: string;
}

which only brings more and more form data processing. They also support both static list and list fetching, which causes them to lose benefits of strict typechecking. The idea to refactor them is to:

• make widgets stateful and hold current label in component state
• separate components that are able to fetch choice list from those which cannot
• use fuzzaldrin library to sort static choice lists ( https://github.com/atom/fuzzaldrin )
• decide if we should drop multiple choice autocomplete widget with fetching ability
• refactor logic used in views

Can saleor support right to left cultures like Arabic,Hebr,Persian?

We need a way to specify the email address for a draft order. That's the only way for a customer to receive update emails.

What I'm trying to achieve

To select discounted products while creating sale or voucher.

• I don't like the fact that Webpack needs to know public paths which makes it depend on STATIC_URL at compile time
• I don't like the fact that source files are copied to the output /static/ directory
• I'd like to use module names as module IDs in Webpack bundles to avoid all bundles being recompiled whenever a new dependency appears and dependency IDs shift
• I'd like to investigate having a separate Webpack config for local development, optimized for speed in watch mode
• I'd like to investigate making Django responsible for asset hashing until both dashboard and storefront become single-page apps (currently we only hash assets Webpack is aware of which means images referenced in Django templates are not hashed)

List of formatting options in our editor is now very basic and I think we could extend it a little bit to support a few other common options. Here is my proposition:

• P, H1, H2, blockquote
• bold, italic, underline, strikethrough
• ul, ol
• alignment
• link, image
• clear formatting

From those that we have now I would only remove the one that inserts a new line.

What I'm trying to achieve

To simplify the code by using dedicated component rendering either value or skeleton.

Describe a proposed solution

Introduce new component <ValueOrSkeleton value={() => some.value.key} />.

Other solutions I've tried and won't work

<tag>{maybe<React.ReactNode>(() => some.value.key, <Skeleton />)</tag>

What I'm trying to achieve

Avoid potential css namespace collision.

What I expected to happen

Use unique, jss-generated class names.

What I'm trying to achieve

To handle formsets in <Form /> component. At this moment this is not possible without creating synthetic events and marking them as any by onChange({ target: { name: "input", value: "input value" } } as any).

Describe a proposed solution

<Form /> component should not depend on React.ChangeEvent. Also, it should return mapped change functions to their inputs rather than returning one generic function, losing all type checking benefits.

It should behave as if multiple images were dropped at the same time.

All of the input components use string type as their value. Autocompletes shouldn't be any different.

There is a bug in storybook causing to render inline SVGs with additional text node with " content.
It is related to svg-url-loader in storybook's default webpack config.

I don't think we need to have the backend return a list of valid phone prefixes or to split the number into a dialing prefix and a national number. Instead we could use a library like https://catamphetamine.github.io/libphonenumber-js/ to automate input and formatting while still keeping the number as a single string in the GraphQL API.