From 47ac2a94e441b7a4bea34c380badea20d0ed0064 Mon Sep 17 00:00:00 2001 From: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com> Date: Fri, 9 Jul 2021 10:04:33 +0200 Subject: [PATCH] Fixed issue with redundant payload for plugins view (#1203) (#1203) Co-authored-by: Jakub Majorek --- CHANGELOG.md | 2 + src/fragments/plugins.ts | 39 ++++++++++----- src/fragments/types/PluginBaseFragment.ts | 43 ++++++++++++++++ .../types/PluginConfigurationBaseFragment.ts | 21 ++++++++ .../PluginConfigurationExtendedFragment.ts | 33 ++++++++++++ .../ChannelConfigPluginPopupBody.tsx | 4 +- .../GlobalConfigPluginPopupBody.tsx | 4 +- .../PluginAvailabilityStatusPopup.tsx | 4 +- .../PluginChannelAvailabilityCell.tsx | 4 +- .../PluginChannelConfigurationCell.tsx | 4 +- src/plugins/components/PluginsList/utils.ts | 6 +-- src/plugins/fixtures.ts | 2 - src/plugins/queries.ts | 8 +-- src/plugins/types/Plugins.ts | 50 ++++++------------- src/plugins/views/utils.ts | 4 +- 15 files changed, 160 insertions(+), 68 deletions(-) create mode 100644 src/fragments/types/PluginBaseFragment.ts create mode 100644 src/fragments/types/PluginConfigurationBaseFragment.ts create mode 100644 src/fragments/types/PluginConfigurationExtendedFragment.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 06b23397c..24b17feab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,8 +59,10 @@ All notable, unreleased changes to this project will be documented in this file. - Add generic filter validation - #1187 by @jwm0 - Fix duplicated labels in column picker - #1197 by @orzechdev - Fix forbidden null sending as attribute value - #1201 by @orzechdev +- Fix huge payload issue for plugins view - #1203 by @kamilpastuszka - Fix missing call for update metadata mutation - #1207 by @orzechdev - Fix order links on home page - #1219 by @jwm0 +- Fix huge payload issue for plugins view - #1203 by @kamilpastuszka # 2.11.1 diff --git a/src/fragments/plugins.ts b/src/fragments/plugins.ts index d88d0e413..a40190ab3 100644 --- a/src/fragments/plugins.ts +++ b/src/fragments/plugins.ts @@ -10,39 +10,54 @@ export const configurationItemFragment = gql` } `; -export const pluginConfigurationFragment = gql` - ${configurationItemFragment} - fragment PluginConfigurationFragment on PluginConfiguration { +export const pluginConfigurationBaseFragment = gql` + fragment PluginConfigurationBaseFragment on PluginConfiguration { active channel { id name slug } + } +`; + +export const pluginConfigurationExtendedFragment = gql` + ${configurationItemFragment} + ${pluginConfigurationBaseFragment} + fragment PluginConfigurationExtendedFragment on PluginConfiguration { + ...PluginConfigurationBaseFragment configuration { ...ConfigurationItemFragment } } `; -export const pluginsFragment = gql` - ${pluginConfigurationFragment} - fragment PluginFragment on Plugin { +export const pluginBaseFragment = gql` + ${pluginConfigurationBaseFragment} + fragment PluginBaseFragment on Plugin { id name description - globalConfiguration { - ...PluginConfigurationFragment - } channelConfigurations { - ...PluginConfigurationFragment + ...PluginConfigurationBaseFragment + } + globalConfiguration { + ...PluginConfigurationBaseFragment } } `; export const pluginsDetailsFragment = gql` - ${pluginsFragment} + ${pluginConfigurationExtendedFragment} fragment PluginsDetailsFragment on Plugin { - ...PluginFragment + id + name + description + globalConfiguration { + ...PluginConfigurationExtendedFragment + } + channelConfigurations { + ...PluginConfigurationExtendedFragment + } } `; diff --git a/src/fragments/types/PluginBaseFragment.ts b/src/fragments/types/PluginBaseFragment.ts new file mode 100644 index 000000000..1686183de --- /dev/null +++ b/src/fragments/types/PluginBaseFragment.ts @@ -0,0 +1,43 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL fragment: PluginBaseFragment +// ==================================================== + +export interface PluginBaseFragment_channelConfigurations_channel { + __typename: "Channel"; + id: string; + name: string; + slug: string; +} + +export interface PluginBaseFragment_channelConfigurations { + __typename: "PluginConfiguration"; + active: boolean; + channel: PluginBaseFragment_channelConfigurations_channel | null; +} + +export interface PluginBaseFragment_globalConfiguration_channel { + __typename: "Channel"; + id: string; + name: string; + slug: string; +} + +export interface PluginBaseFragment_globalConfiguration { + __typename: "PluginConfiguration"; + active: boolean; + channel: PluginBaseFragment_globalConfiguration_channel | null; +} + +export interface PluginBaseFragment { + __typename: "Plugin"; + id: string; + name: string; + description: string; + channelConfigurations: PluginBaseFragment_channelConfigurations[]; + globalConfiguration: PluginBaseFragment_globalConfiguration | null; +} diff --git a/src/fragments/types/PluginConfigurationBaseFragment.ts b/src/fragments/types/PluginConfigurationBaseFragment.ts new file mode 100644 index 000000000..10df0cac6 --- /dev/null +++ b/src/fragments/types/PluginConfigurationBaseFragment.ts @@ -0,0 +1,21 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL fragment: PluginConfigurationBaseFragment +// ==================================================== + +export interface PluginConfigurationBaseFragment_channel { + __typename: "Channel"; + id: string; + name: string; + slug: string; +} + +export interface PluginConfigurationBaseFragment { + __typename: "PluginConfiguration"; + active: boolean; + channel: PluginConfigurationBaseFragment_channel | null; +} diff --git a/src/fragments/types/PluginConfigurationExtendedFragment.ts b/src/fragments/types/PluginConfigurationExtendedFragment.ts new file mode 100644 index 000000000..15604dd6e --- /dev/null +++ b/src/fragments/types/PluginConfigurationExtendedFragment.ts @@ -0,0 +1,33 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes"; + +// ==================================================== +// GraphQL fragment: PluginConfigurationExtendedFragment +// ==================================================== + +export interface PluginConfigurationExtendedFragment_channel { + __typename: "Channel"; + id: string; + name: string; + slug: string; +} + +export interface PluginConfigurationExtendedFragment_configuration { + __typename: "ConfigurationItem"; + name: string; + value: string | null; + type: ConfigurationTypeFieldEnum | null; + helpText: string | null; + label: string | null; +} + +export interface PluginConfigurationExtendedFragment { + __typename: "PluginConfiguration"; + active: boolean; + channel: PluginConfigurationExtendedFragment_channel | null; + configuration: (PluginConfigurationExtendedFragment_configuration | null)[] | null; +} diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx index 0830f5c4f..f16e913ec 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx @@ -3,7 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer"; import CollectionWithDividers from "@saleor/components/CollectionWithDividers"; import StatusLabel from "@saleor/components/StatusLabel"; import { statusLabelMessages } from "@saleor/components/StatusLabel/messages"; -import { Plugin_plugin } from "@saleor/plugins/types/Plugin"; +import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; import { makeStyles } from "@saleor/theme"; import React from "react"; import { useIntl } from "react-intl"; @@ -25,7 +25,7 @@ const useStyles = makeStyles( ); interface ChannelConfigPluginPopupBodyProps { - plugin: Plugin_plugin; + plugin: PluginBaseFragment; } const ChannelConfigPluginPopupBody: React.FC = ({ diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx index 086933e73..f8f763aa0 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx @@ -2,14 +2,14 @@ import { CardContent, Typography } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import StatusLabel from "@saleor/components/StatusLabel"; import { statusLabelMessages } from "@saleor/components/StatusLabel/messages"; -import { Plugin_plugin } from "@saleor/plugins/types/Plugin"; +import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; import React from "react"; import { useIntl } from "react-intl"; import { globalConfigPluginMessages as messages } from "../messages"; interface GlobalConfigPluginPopupBodyProps { - plugin: Plugin_plugin; + plugin: PluginBaseFragment; } const GlobalConfigPluginPopupBody: React.FC = ({ diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx index e91fdfa6d..7fec54acc 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx @@ -1,5 +1,5 @@ import { Card, Popper } from "@material-ui/core"; -import { Plugin_plugin } from "@saleor/plugins/types/Plugin"; +import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; import { isPluginGlobal } from "@saleor/plugins/views/utils"; import { makeStyles } from "@saleor/theme"; import React from "react"; @@ -18,7 +18,7 @@ const useStyles = makeStyles( ); interface PluginAvailabilityStatusPopupProps { - plugin: Plugin_plugin; + plugin: PluginBaseFragment; isOpen: boolean; anchor: React.RefObject; } diff --git a/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx b/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx index e9c0ee65c..b69234ea5 100644 --- a/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx +++ b/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx @@ -1,13 +1,13 @@ import { TableCell } from "@material-ui/core"; import Skeleton from "@saleor/components/Skeleton"; -import { Plugin_plugin } from "@saleor/plugins/types/Plugin"; +import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; import React, { useRef, useState } from "react"; import PluginAvailabilityStatus from "./PluginAvailabilityStatus"; import PluginAvailabilityStatusPopup from "./PluginAvailabilityStatusPopup"; interface PluginChannelAvailabilityCellProps { - plugin: Plugin_plugin; + plugin: PluginBaseFragment; } const PluginChannelAvailabilityCell: React.FC = ({ diff --git a/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx b/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx index 70d6702e6..53a3b9100 100644 --- a/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx +++ b/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx @@ -1,5 +1,5 @@ import { TableCell } from "@material-ui/core"; -import { Plugin_plugin } from "@saleor/plugins/types/Plugin"; +import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment"; import { isPluginGlobal } from "@saleor/plugins/views/utils"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -7,7 +7,7 @@ import { FormattedMessage } from "react-intl"; import { pluginChannelConfigurationCellMessages as messages } from "./messages"; interface PluginChannelConfigurationCellProps { - plugin: Plugin_plugin; + plugin: PluginBaseFragment; } const PluginChannelConfigurationCell: React.FC = ({ diff --git a/src/plugins/components/PluginsList/utils.ts b/src/plugins/components/PluginsList/utils.ts index 4c6f9775c..15e60023d 100644 --- a/src/plugins/components/PluginsList/utils.ts +++ b/src/plugins/components/PluginsList/utils.ts @@ -1,9 +1,9 @@ -import { Plugin_plugin_channelConfigurations } from "@saleor/plugins/types/Plugin"; +import { PluginConfigurationBaseFragment } from "@saleor/fragments/types/PluginConfigurationBaseFragment"; export const getAllChannelConfigsCount = ( - channelConfigurations: Plugin_plugin_channelConfigurations[] + channelConfigurations: PluginConfigurationBaseFragment[] ) => channelConfigurations?.length; export const getActiveChannelConfigsCount = ( - channelConfigurations: Plugin_plugin_channelConfigurations[] + channelConfigurations: PluginConfigurationBaseFragment[] ) => channelConfigurations?.filter(({ active }) => !!active).length; diff --git a/src/plugins/fixtures.ts b/src/plugins/fixtures.ts index f9af2459f..b0844bc88 100644 --- a/src/plugins/fixtures.ts +++ b/src/plugins/fixtures.ts @@ -11,7 +11,6 @@ export const pluginList: Plugins_plugins_edges_node[] = [ { __typename: "PluginConfiguration", active: true, - configuration: [], channel: { __typename: "Channel", id: "channel-1", @@ -32,7 +31,6 @@ export const pluginList: Plugins_plugins_edges_node[] = [ { __typename: "PluginConfiguration", active: true, - configuration: [], channel: { __typename: "Channel", id: "channel-1", diff --git a/src/plugins/queries.ts b/src/plugins/queries.ts index 9c1d70ba3..2da47515d 100644 --- a/src/plugins/queries.ts +++ b/src/plugins/queries.ts @@ -1,6 +1,6 @@ import { - pluginsDetailsFragment, - pluginsFragment + pluginBaseFragment, + pluginsDetailsFragment } from "@saleor/fragments/plugins"; import makeQuery from "@saleor/hooks/makeQuery"; import gql from "graphql-tag"; @@ -9,7 +9,7 @@ import { Plugin, PluginVariables } from "./types/Plugin"; import { Plugins, PluginsVariables } from "./types/Plugins"; const pluginsList = gql` - ${pluginsFragment} + ${pluginBaseFragment} query Plugins( $first: Int $after: String @@ -28,7 +28,7 @@ const pluginsList = gql` ) { edges { node { - ...PluginFragment + ...PluginBaseFragment } } pageInfo { diff --git a/src/plugins/types/Plugins.ts b/src/plugins/types/Plugins.ts index e5f61af12..e45dfce4e 100644 --- a/src/plugins/types/Plugins.ts +++ b/src/plugins/types/Plugins.ts @@ -3,35 +3,12 @@ // @generated // This file was automatically generated and should not be edited. -import { PluginFilterInput, PluginSortingInput, ConfigurationTypeFieldEnum } from "./../../types/globalTypes"; +import { PluginFilterInput, PluginSortingInput } from "./../../types/globalTypes"; // ==================================================== // GraphQL query operation: Plugins // ==================================================== -export interface Plugins_plugins_edges_node_globalConfiguration_channel { - __typename: "Channel"; - id: string; - name: string; - slug: string; -} - -export interface Plugins_plugins_edges_node_globalConfiguration_configuration { - __typename: "ConfigurationItem"; - name: string; - value: string | null; - type: ConfigurationTypeFieldEnum | null; - helpText: string | null; - label: string | null; -} - -export interface Plugins_plugins_edges_node_globalConfiguration { - __typename: "PluginConfiguration"; - active: boolean; - channel: Plugins_plugins_edges_node_globalConfiguration_channel | null; - configuration: (Plugins_plugins_edges_node_globalConfiguration_configuration | null)[] | null; -} - export interface Plugins_plugins_edges_node_channelConfigurations_channel { __typename: "Channel"; id: string; @@ -39,20 +16,23 @@ export interface Plugins_plugins_edges_node_channelConfigurations_channel { slug: string; } -export interface Plugins_plugins_edges_node_channelConfigurations_configuration { - __typename: "ConfigurationItem"; - name: string; - value: string | null; - type: ConfigurationTypeFieldEnum | null; - helpText: string | null; - label: string | null; -} - export interface Plugins_plugins_edges_node_channelConfigurations { __typename: "PluginConfiguration"; active: boolean; channel: Plugins_plugins_edges_node_channelConfigurations_channel | null; - configuration: (Plugins_plugins_edges_node_channelConfigurations_configuration | null)[] | null; +} + +export interface Plugins_plugins_edges_node_globalConfiguration_channel { + __typename: "Channel"; + id: string; + name: string; + slug: string; +} + +export interface Plugins_plugins_edges_node_globalConfiguration { + __typename: "PluginConfiguration"; + active: boolean; + channel: Plugins_plugins_edges_node_globalConfiguration_channel | null; } export interface Plugins_plugins_edges_node { @@ -60,8 +40,8 @@ export interface Plugins_plugins_edges_node { id: string; name: string; description: string; - globalConfiguration: Plugins_plugins_edges_node_globalConfiguration | null; channelConfigurations: Plugins_plugins_edges_node_channelConfigurations[]; + globalConfiguration: Plugins_plugins_edges_node_globalConfiguration | null; } export interface Plugins_plugins_edges { diff --git a/src/plugins/views/utils.ts b/src/plugins/views/utils.ts index 512e40b68..84850592a 100644 --- a/src/plugins/views/utils.ts +++ b/src/plugins/views/utils.ts @@ -1,7 +1,7 @@ -import { Plugin_plugin_globalConfiguration } from "@saleor/plugins/types/Plugin"; +import { PluginConfigurationBaseFragment } from "@saleor/fragments/types/PluginConfigurationBaseFragment"; export const isPluginGlobal = ( - globalConfiguration: Plugin_plugin_globalConfiguration + globalConfiguration: PluginConfigurationBaseFragment ) => !!globalConfiguration; export const getConfigByChannelId = (channelIdToCompare: string) => ({