wip

src/index.tsx

@@ -41,6 +41,8 @@ import PageSection from "./pages";
 import PluginsSection from "./plugins";
 import ProductSection from "./products";
 import ProductTypesSection from "./productTypes";
+import ServiceSection from "./services";
+import { serviceSection } from "./services/urls";
 import ShippingSection from "./shipping";
 import SiteSettingsSection from "./siteSettings";
 import StaffSection from "./staff";
@@ -227,6 +229,11 @@ const Routes: React.FC = () => {
                 path={attributeSection}
                 component={AttributeSection}
               />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_SERVICE_ACCOUNTS]}
+                path={serviceSection}
+                component={ServiceSection}
+              />
               {createConfigurationMenu(intl).filter(menu =>
                 menu.menuItems.map(item => hasPermission(item.permission, user))
               ).length > 0 && (

src/services/components/ServiceCreatePage/ServiceCreatePage.tsx

@@ -17,7 +17,7 @@ import { UserError } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import ServiceInfo from "../ServiceInfo";
 
-export interface ServiceDetailsPageFormData {
+export interface ServiceCreatePageFormData {
   hasFullAccess: boolean;
   isActive: boolean;
   name: string;
@@ -29,7 +29,7 @@ export interface ServiceCreatePageProps {
   permissions: ShopInfo_shop_permissions[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
-  onSubmit: (data: ServiceDetailsPageFormData) => void;
+  onSubmit: (data: ServiceCreatePageFormData) => void;
 }
 
 const ServiceCreatePage: React.FC<ServiceCreatePageProps> = props => {
@@ -43,7 +43,7 @@ const ServiceCreatePage: React.FC<ServiceCreatePageProps> = props => {
   } = props;
   const intl = useIntl();
 
-  const initialForm: ServiceDetailsPageFormData = {
+  const initialForm: ServiceCreatePageFormData = {
     hasFullAccess: false,
     isActive: false,
     name: "",

src/services/index.tsx

@@ -7,45 +7,46 @@ import { sectionNames } from "@saleor/intl";
 import { WindowTitle } from "../components/WindowTitle";
 import {
   serviceListPath,
-  ServiceListUrlQueryParams
-  //   servicePath
+  ServiceListUrlQueryParams,
+  servicePath,
+  ServiceUrlQueryParams
 } from "./urls";
-// import ServiceDetailsComponent from "./views/ServiceDetails";
+import ServiceDetailsComponent from "./views/ServiceDetails";
 import ServiceListComponent from "./views/ServiceList";
 
-const PluginList: React.StatelessComponent<RouteComponentProps<any>> = ({
-  location
-}) => {
+const ServiceList: React.FC<RouteComponentProps> = ({ location }) => {
   const qs = parseQs(location.search.substr(1));
   const params: ServiceListUrlQueryParams = qs;
+
   return <ServiceListComponent params={params} />;
 };
 
-// const ServiceDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
-//   match
-// }) => {
-//   const qs = parseQs(location.search.substr(1));
-//   const params: ServiceListUrlQueryParams = qs;
+const ServiceDetails: React.FC<RouteComponentProps<{ id: string }>> = ({
+  match
+}) => {
+  const qs = parseQs(location.search.substr(1));
+  const params: ServiceUrlQueryParams = qs;
 
-//   return (
-//     <ServiceDetailsComponent
-//       id={decodeURIComponent(match.params.id)}
-//       params={params}
-//     />
-//   );
-// };
+  return (
+    <ServiceDetailsComponent
+      id={decodeURIComponent(match.params.id)}
+      params={params}
+    />
+  );
+};
 
-const Component = () => {
+const ServiceSection = () => {
   const intl = useIntl();
+
   return (
     <>
       <WindowTitle title={intl.formatMessage(sectionNames.serviceAccounts)} />
       <Switch>
-        <Route exact path={serviceListPath} component={PluginList} />
-        {/* <Route path={servicePath(":id")} component={ServiceDetails} /> */}
+        <Route exact path={serviceListPath} component={ServiceList} />
+        <Route path={servicePath(":id")} component={ServiceDetails} />
       </Switch>
     </>
   );
 };
 
-export default Component;
+export default ServiceSection;

src/services/queries.ts

@@ -68,7 +68,7 @@ const serviceDetails = gql`
     }
   }
 `;
-export const ServiceDetailsFragmentQuery = TypedQuery<
+export const ServiceDetailsQuery = TypedQuery<
   ServiceDetails,
   ServiceDetailsVariables
 >(serviceDetails);

src/services/views/ServiceDetails/ServiceDetails.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { WindowTitle } from "@saleor/components/WindowTitle";
+import useNavigator from "@saleor/hooks/useNavigator";
+import useNotifier from "@saleor/hooks/useNotifier";
+import useShop from "@saleor/hooks/useShop";
+import { commonMessages } from "@saleor/intl";
+import { getMutationState, maybe } from "@saleor/misc";
+import ServiceDetailsPage, {
+  ServiceDetailsPageFormData
+} from "../../components/ServiceDetailsPage";
+import { ServiceDetailsQuery } from "../../queries";
+import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls";
+
+interface OrderListProps {
+  id: string;
+  params: ServiceUrlQueryParams;
+}
+
+export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
+  id,
+  params
+}) => {
+  const navigate = useNavigator();
+  const notify = useNotifier();
+  const intl = useIntl();
+  const shop = useShop();
+
+  return (
+    <ServiceDetailsQuery
+      displayLoader
+      variables={{ id }}
+      require={["serviceAccount"]}
+    >
+      {({ data, loading }) => {
+        const onServiceUpdate = (data: ServiceUpdate) => {
+          if (!maybe(() => data.serviceUpdate.errors.length !== 0)) {
+            notify({
+              text: intl.formatMessage(commonMessages.savedChanges)
+            });
+          }
+        };
+        const onServiceDelete = (data: ServiceDelete) => {
+          if (!maybe(() => data.serviceDelete.errors.length !== 0)) {
+            notify({
+              text: intl.formatMessage(commonMessages.savedChanges)
+            });
+            navigate(serviceListUrl());
+          }
+        };
+
+        const handleBack = navigate(serviceListUrl());
+
+        const handleDelete = navigate(
+          serviceUrl(id, {
+            ...params,
+            action: "remove"
+          })
+        );
+
+        const handleSubmit = (data: ServiceDetailsPageFormData) => undefined;
+
+        return (
+          <>
+            <WindowTitle title={maybe(() => data.serviceAccount.name)} />
+            <ServiceDetailsPage
+              disabled={loading}
+              errors={[]}
+              onBack={handleBack}
+              onDelete={handleDelete}
+              onSubmit={handleSubmit}
+              permissions={maybe(() => shop.permissions)}
+              service={maybe(() => data.serviceAccount)}
+              saveButtonBarState="default"
+            />
+          </>
+        );
+      }}
+    </ServiceDetailsQuery>
+  );
+};
+
+export default ServiceDetails;

src/services/views/ServiceDetails/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ServiceDetails";
+export * from "./ServiceDetails";

src/services/views/ServiceList/ServiceList.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+
+import useListSettings from "@saleor/hooks/useListSettings";
+import useNavigator from "@saleor/hooks/useNavigator";
+import useNotifier from "@saleor/hooks/useNotifier";
+import usePaginator, {
+  createPaginationState
+} from "@saleor/hooks/usePaginator";
+import { useIntl } from "react-intl";
+
+import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
+import SaveFilterTabDialog, {
+  SaveFilterTabDialogFormData
+} from "@saleor/components/SaveFilterTabDialog";
+import { configurationMenuUrl } from "@saleor/configuration";
+import useShop from "@saleor/hooks/useShop";
+import { commonMessages } from "@saleor/intl";
+import { getMutationState, maybe } from "@saleor/misc";
+import { ListViews } from "@saleor/types";
+import ServiceListPage from "../../components/ServiceListPage";
+import { ServiceListQuery } from "../../queries";
+import {
+  serviceListUrl,
+  ServiceListUrlDialog,
+  ServiceListUrlFilters,
+  ServiceListUrlQueryParams,
+  serviceUrl
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";
+
+interface ServiceListProps {
+  params: ServiceListUrlQueryParams;
+}
+
+export const ServiceList: React.StatelessComponent<ServiceListProps> = ({
+  params
+}) => {
+  const navigate = useNavigator();
+  const notify = useNotifier();
+  const paginate = usePaginator();
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.STAFF_MEMBERS_LIST
+  );
+  const intl = useIntl();
+  const shop = useShop();
+
+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: ServiceListUrlFilters) =>
+    navigate(
+      serviceListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+
+  const closeModal = () =>
+    navigate(
+      serviceListUrl({
+        ...params,
+        action: undefined,
+        ids: undefined
+      }),
+      true
+    );
+
+  const openModal = (action: ServiceListUrlDialog, ids?: string[]) =>
+    navigate(
+      serviceListUrl({
+        ...params,
+        action,
+        ids
+      })
+    );
+
+  const handleTabChange = (tab: number) => {
+    navigate(
+      serviceListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    navigate(serviceListUrl());
+  };
+
+  const handleTabSave = (data: SaveFilterTabDialogFormData) => {
+    saveFilterTab(data.name, getActiveFilters(params));
+    handleTabChange(tabs.length + 1);
+  };
+
+  const paginationState = createPaginationState(settings.rowNumber, params);
+  const queryVariables = React.useMemo(
+    () => ({
+      ...paginationState,
+      filter: getFilterVariables(params)
+    }),
+    [params]
+  );
+
+  return (
+    <ServiceListQuery displayLoader variables={queryVariables}>
+      {({ data, loading }) => (
+        <TypedServiceMemberAddMutation
+          onCompleted={handleServiceMemberAddSuccess}
+        >
+          {(addServiceMember, addServiceMemberData) => {
+            const handleServiceMemberAdd = (variables: AddServiceMemberForm) =>
+              addServiceMember({
+                variables: {
+                  input: {
+                    email: variables.email,
+                    firstName: variables.firstName,
+                    lastName: variables.lastName,
+                    permissions: variables.fullAccess
+                      ? maybe(() => shop.permissions.map(perm => perm.code))
+                      : undefined,
+                    sendPasswordEmail: true
+                  }
+                }
+              });
+            const addTransitionState = getMutationState(
+              addServiceMemberData.called,
+              addServiceMemberData.loading,
+              maybe(() => addServiceMemberData.data.serviceCreate.errors)
+            );
+
+            const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+              maybe(() => data.serviceUsers.pageInfo),
+              paginationState,
+              params
+            );
+
+            return (
+              <>
+                <ServiceListPage
+                  currentTab={currentTab}
+                  initialSearch={params.query || ""}
+                  onSearchChange={query => changeFilterField({ query })}
+                  onAll={() => navigate(serviceListUrl())}
+                  onTabChange={handleTabChange}
+                  onTabDelete={() => openModal("delete-search")}
+                  onTabSave={() => openModal("save-search")}
+                  tabs={tabs.map(tab => tab.name)}
+                  disabled={loading || addServiceMemberData.loading}
+                  settings={settings}
+                  pageInfo={pageInfo}
+                  serviceMembers={maybe(() =>
+                    data.serviceUsers.edges.map(edge => edge.node)
+                  )}
+                  onAdd={() =>
+                    navigate(
+                      serviceListUrl({
+                        action: "add"
+                      })
+                    )
+                  }
+                  onBack={() => navigate(configurationMenuUrl)}
+                  onNextPage={loadNextPage}
+                  onPreviousPage={loadPreviousPage}
+                  onUpdateListSettings={updateListSettings}
+                  onRowClick={id => () => navigate(serviceUrl(id))}
+                />
+              </>
+            );
+          }}
+        </TypedServiceMemberAddMutation>
+      )}
+    </ServiceListQuery>
+  );
+};
+
+export default ServiceList;