Move filter structure to page component

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -7,8 +7,6 @@ import AppHeader from "@saleor/components/AppHeader";
 import FilterBar from "@saleor/components/FilterBar";
 import { sectionNames } from "@saleor/intl";
 import { AttributeListUrlSortField } from "@saleor/attributes/urls";
-import { AttributeFilterKeys } from "@saleor/attributes/views/AttributeList/filters";
-import { AttributeListFilterOpts } from "@saleor/attributes/types";
 import Container from "../../../components/Container";
 import PageHeader from "../../../components/PageHeader";
 import {
@@ -20,7 +18,11 @@ import {
 } from "../../../types";
 import { AttributeList_attributes_edges_node } from "../../types/AttributeList";
 import AttributeList from "../AttributeList/AttributeList";
-import { createFilterStructure } from "../../views/AttributeList/filters";
+import {
+  createFilterStructure,
+  AttributeListFilterOpts,
+  AttributeFilterKeys
+} from "./filters";
 
 export interface AttributeListPageProps
   extends PageListProps,

src/attributes/components/AttributeListPage/filters.ts

@@ -0,0 +1,131 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { FilterOpts } from "@saleor/types";
+import { commonMessages } from "@saleor/intl";
+import { IFilter } from "@saleor/components/Filter";
+import { createBooleanField } from "@saleor/utils/filters/fields";
+
+export enum AttributeFilterKeys {
+  availableInGrid = "availableInGrud",
+  filterableInDashboard = "filterableInDashboard",
+  filterableInStorefront = "filterableInStorefront",
+  isVariantOnly = "isVariantOnly",
+  valueRequired = "valueRequired",
+  visibleInStorefront = "visibleInStorefront"
+}
+
+export interface AttributeListFilterOpts {
+  availableInGrid: FilterOpts<boolean>;
+  filterableInDashboard: FilterOpts<boolean>;
+  filterableInStorefront: FilterOpts<boolean>;
+  isVariantOnly: FilterOpts<boolean>;
+  valueRequired: FilterOpts<boolean>;
+  visibleInStorefront: FilterOpts<boolean>;
+}
+
+const messages = defineMessages({
+  availableInGrid: {
+    defaultMessage: "Can be used as column",
+    description: "attribute can be column in product list table"
+  },
+  filterableInDashboard: {
+    defaultMessage: "Filterable in Dashboard",
+    description: "use attribute in filtering"
+  },
+  filterableInStorefront: {
+    defaultMessage: "Filterable in Storefront",
+    description: "use attribute in filtering"
+  },
+  isVariantOnly: {
+    defaultMessage: "Variant Only",
+    description: "attribute can be used only in variants"
+  },
+  valueRequired: {
+    defaultMessage: "Value Required",
+    description: "attribute value is required"
+  },
+  visibleInStorefront: {
+    defaultMessage: "Visible on Product Page in Storefront",
+    description: "attribute"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: AttributeListFilterOpts
+): IFilter<AttributeFilterKeys> {
+  return [
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.availableInGrid,
+        intl.formatMessage(messages.availableInGrid),
+        opts.availableInGrid.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.availableInGrid.active
+    },
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.filterableInDashboard,
+        intl.formatMessage(messages.filterableInDashboard),
+        opts.filterableInDashboard.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.filterableInDashboard.active
+    },
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.filterableInStorefront,
+        intl.formatMessage(messages.filterableInStorefront),
+        opts.filterableInStorefront.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.filterableInStorefront.active
+    },
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.isVariantOnly,
+        intl.formatMessage(messages.isVariantOnly),
+        opts.isVariantOnly.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.isVariantOnly.active
+    },
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.valueRequired,
+        intl.formatMessage(messages.valueRequired),
+        opts.valueRequired.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.valueRequired.active
+    },
+    {
+      ...createBooleanField(
+        AttributeFilterKeys.visibleInStorefront,
+        intl.formatMessage(messages.visibleInStorefront),
+        opts.visibleInStorefront.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.visibleInStorefront.active
+    }
+  ];
+}

src/attributes/components/AttributeListPage/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./AttributeListPage";
 export * from "./AttributeListPage";
+export * from "./filters";

src/attributes/types.ts

@@ -1,10 +0,0 @@
-import { FilterOpts } from "@saleor/types";
-
-export interface AttributeListFilterOpts {
-  availableInGrid: FilterOpts<boolean>;
-  filterableInDashboard: FilterOpts<boolean>;
-  filterableInStorefront: FilterOpts<boolean>;
-  isVariantOnly: FilterOpts<boolean>;
-  valueRequired: FilterOpts<boolean>;
-  visibleInStorefront: FilterOpts<boolean>;
-}

src/attributes/views/AttributeList/filters.ts

@@ -1,10 +1,10 @@
-import { IntlShape } from "react-intl";
-
 import { AttributeFilterInput } from "@saleor/types/globalTypes";
 import { maybe, parseBoolean } from "@saleor/misc";
-import { createBooleanField } from "@saleor/utils/filters/fields";
-import { commonMessages } from "@saleor/intl";
-import { IFilter, IFilterElement } from "@saleor/components/Filter";
+import { IFilterElement } from "@saleor/components/Filter";
+import {
+  AttributeListFilterOpts,
+  AttributeFilterKeys
+} from "@saleor/attributes/components/AttributeListPage";
 import {
   createFilterTabUtils,
   createFilterUtils
@@ -14,20 +14,9 @@ import {
   AttributeListUrlFiltersEnum,
   AttributeListUrlQueryParams
 } from "../../urls";
-import { AttributeListFilterOpts } from "../../types";
-import messages from "./messages";
 
 export const PRODUCT_FILTERS_KEY = "productFilters";
 
-export enum AttributeFilterKeys {
-  availableInGrid = "availableInGrud",
-  filterableInDashboard = "filterableInDashboard",
-  filterableInStorefront = "filterableInStorefront",
-  isVariantOnly = "isVariantOnly",
-  valueRequired = "valueRequired",
-  visibleInStorefront = "visibleInStorefront"
-}
-
 export function getFilterOpts(
   params: AttributeListUrlFilters
 ): AttributeListFilterOpts {
@@ -59,86 +48,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: AttributeListFilterOpts
-): IFilter<AttributeFilterKeys> {
-  return [
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.availableInGrid,
-        intl.formatMessage(messages.availableInGrid),
-        opts.availableInGrid.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.availableInGrid.active
-    },
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.filterableInDashboard,
-        intl.formatMessage(messages.filterableInDashboard),
-        opts.filterableInDashboard.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.filterableInDashboard.active
-    },
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.filterableInStorefront,
-        intl.formatMessage(messages.filterableInStorefront),
-        opts.filterableInStorefront.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.filterableInStorefront.active
-    },
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.isVariantOnly,
-        intl.formatMessage(messages.isVariantOnly),
-        opts.isVariantOnly.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.isVariantOnly.active
-    },
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.valueRequired,
-        intl.formatMessage(messages.valueRequired),
-        opts.valueRequired.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.valueRequired.active
-    },
-    {
-      ...createBooleanField(
-        AttributeFilterKeys.visibleInStorefront,
-        intl.formatMessage(messages.visibleInStorefront),
-        opts.visibleInStorefront.value,
-        {
-          negative: intl.formatMessage(commonMessages.no),
-          positive: intl.formatMessage(commonMessages.yes)
-        }
-      ),
-      active: opts.visibleInStorefront.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: AttributeListUrlFilters
 ): AttributeFilterInput {

src/attributes/views/AttributeList/messages.ts

@@ -1,30 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  availableInGrid: {
-    defaultMessage: "Can be used as column",
-    description: "attribute can be column in product list table"
-  },
-  filterableInDashboard: {
-    defaultMessage: "Filterable in Dashboard",
-    description: "use attribute in filtering"
-  },
-  filterableInStorefront: {
-    defaultMessage: "Filterable in Storefront",
-    description: "use attribute in filtering"
-  },
-  isVariantOnly: {
-    defaultMessage: "Variant Only",
-    description: "attribute can be used only in variants"
-  },
-  valueRequired: {
-    defaultMessage: "Value Required",
-    description: "attribute value is required"
-  },
-  visibleInStorefront: {
-    defaultMessage: "Visible on Product Page in Storefront",
-    description: "attribute"
-  }
-});
-
-export default messages;