Reset form after closing dialog

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -1,9 +1,9 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
-
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import AppHeader from "@saleor/components/AppHeader";
 import SearchBar from "@saleor/components/SearchBar";
 import { sectionNames } from "@saleor/intl";
 import Container from "../../../components/Container";
@@ -23,10 +23,12 @@ export interface AttributeListPageProps
     SearchPageProps,
     TabPageProps {
   attributes: AttributeList_attributes_edges_node[];
+  onBack: () => void;
 }
 
 const AttributeListPage: React.FC<AttributeListPageProps> = ({
   onAdd,
+  onBack,
   initialSearch,
   onSearchChange,
   currentTab,
@@ -41,6 +43,9 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
 
   return (
     <Container>
+      <AppHeader onBack={onBack}>
+        <FormattedMessage {...sectionNames.configuration} />
+      </AppHeader>
       <PageHeader title={intl.formatMessage(sectionNames.attributes)}>
         <Button onClick={onAdd} color="primary" variant="contained">
           <FormattedMessage

src/attributes/views/AttributeList/AttributeList.tsx

@@ -15,6 +15,7 @@ import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog, {
   SaveFilterTabDialogFormData
 } from "@saleor/components/SaveFilterTabDialog";
+import { configurationMenuUrl } from "@saleor/configuration";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
@@ -165,6 +166,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
                     isChecked={isSelected}
                     onAdd={() => navigate(attributeAddUrl())}
                     onAll={() => navigate(attributeListUrl())}
+                    onBack={() => navigate(configurationMenuUrl)}
                     onNextPage={loadNextPage}
                     onPreviousPage={loadPreviousPage}
                     onRowClick={id => () => navigate(attributeUrl(id))}

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -23,6 +23,7 @@ import { buttonMessages, sectionNames } from "@saleor/intl";
 import { UserError } from "@saleor/types";
 import { getErrors, getFieldError } from "@saleor/utils/errors";
 import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";
+import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 
 export type MenuItemType = "category" | "collection" | "link" | "page";
 export interface MenuItemData {
@@ -97,17 +98,20 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
   );
   const [url, setUrl] = React.useState<string>(undefined);
 
+  // Reset input state after closing dialog
+  useModalDialogOpen(open, {
+    onClose: () => {
+      setData(initial || defaultInitial);
+      setDisplayValue(initialDisplayValue);
+      setUrl(undefined);
+    }
+  });
+
   // Refresh initial display value if changed
   React.useEffect(() => setDisplayValue(initialDisplayValue), [
     initialDisplayValue
   ]);
 
-  // Reset input state after closing dialog
-  React.useEffect(() => {
-    setDisplayValue(initialDisplayValue);
-    setUrl(undefined);
-  }, [open]);
-
   const mutationErrors = getErrors(errors);
 
   let options: IMenu = [];

src/storybook/stories/attributes/AttributeListPage.tsx

@@ -18,7 +18,8 @@ const props: AttributeListPageProps = {
   ...listActionsProps,
   ...tabPageProps,
   ...searchPageProps,
-  attributes
+  attributes,
+  onBack: () => undefined
 };
 
 storiesOf("Views / Attributes / Attribute list", module)