Add basic views

src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -97,6 +97,7 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
                 onDelete={onTokenDelete}
               />
             </div>
+            <div>
               <AccountPermissions
                 data={data}
                 disabled={disabled}
@@ -104,7 +105,12 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
                 onChange={change}
               />
               <CardSpacer />
-            <AccountStatus data={data} disabled={disabled} onChange={change} />
+              <AccountStatus
+                data={data}
+                disabled={disabled}
+                onChange={change}
+              />
+            </div>
           </Grid>
           <SaveButtonBar
             disabled={disabled || !hasChanged}

src/services/components/ServiceList/ServiceList.tsx

@@ -9,6 +9,7 @@ import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -18,13 +19,12 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
-import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "@saleor/misc";
-import { ListActions, ListProps } from "@saleor/types";
+import { ListProps } from "@saleor/types";
 import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
 
-export interface ServiceListProps extends ListProps, ListActions {
+export interface ServiceListProps extends ListProps {
   services: ServiceList_serviceAccounts_edges_node[];
   onRemove: (id: string) => void;
 }
@@ -51,10 +51,13 @@ const styles = (theme: Theme) =>
     },
     table: {
       tableLayout: "fixed"
+    },
+    tableRow: {
+      cursor: "pointer"
     }
   });
 
-const numberOfColumns = 3;
+const numberOfColumns = 2;
 
 const ServiceList = withStyles(styles, {
   name: "ServiceList"
@@ -69,24 +72,12 @@ const ServiceList = withStyles(styles, {
     onRemove,
     onRowClick,
     pageInfo,
-    services,
+    services
-    isChecked,
-    selected,
-    toggle,
-    toggleAll,
-    toolbar
   }: ServiceListProps & WithStyles<typeof styles>) => (
     <Table className={classes.table}>
-      <TableHead
+      <TableHead>
-        colSpan={numberOfColumns}
-        selected={selected}
-        disabled={disabled}
-        items={services}
-        toggleAll={toggleAll}
-        toolbar={toolbar}
-      >
         <TableCell className={classes.colName}>
-          <FormattedMessage defaultMessage="Code" description="voucher code" />
+          <FormattedMessage defaultMessage="Name" description="service name" />
         </TableCell>
         <TableCell />
       </TableHead>
@@ -108,25 +99,13 @@ const ServiceList = withStyles(styles, {
       <TableBody>
         {renderCollection(
           services,
-          service => {
+          service => (
-            const isSelected = service ? isChecked(service.id) : false;
-
-            return (
             <TableRow
               className={!!service ? classes.tableRow : undefined}
               hover={!!service}
               key={service ? service.id : "skeleton"}
-                selected={isSelected}
               onClick={service ? onRowClick(service.id) : undefined}
             >
-                <TableCell padding="checkbox">
-                  <Checkbox
-                    checked={isSelected}
-                    disabled={disabled}
-                    disableClickPropagation
-                    onChange={() => toggle(service.id)}
-                  />
-                </TableCell>
               <TableCell className={classes.colName}>
                 <span data-tc="name">
                   {maybe<React.ReactNode>(() => service.name, <Skeleton />)}
@@ -162,8 +141,7 @@ const ServiceList = withStyles(styles, {
                 </IconButton>
               </TableCell>
             </TableRow>
-            );
+          ),
-          },
           () => (
             <TableRow>
               <TableCell colSpan={numberOfColumns}>

src/services/components/ServiceListPage/ServiceListPage.tsx

@@ -8,18 +8,12 @@ import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import SearchBar from "@saleor/components/SearchBar";
 import { sectionNames } from "@saleor/intl";
-import {
+import { PageListProps, SearchPageProps, TabPageProps } from "@saleor/types";
-  ListActions,
-  PageListProps,
-  SearchPageProps,
-  TabPageProps
-} from "@saleor/types";
 import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
 import ServiceList from "../ServiceList";
 
 export interface ServiceListPageProps
   extends PageListProps,
-    ListActions,
     SearchPageProps,
     TabPageProps {
   services: ServiceList_serviceAccounts_edges_node[];

src/services/index.tsx

@@ -6,11 +6,13 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 import { sectionNames } from "@saleor/intl";
 import { WindowTitle } from "../components/WindowTitle";
 import {
+  serviceAddPath,
   serviceListPath,
   ServiceListUrlQueryParams,
   servicePath,
   ServiceUrlQueryParams
 } from "./urls";
+import ServiceCreate from "./views/ServiceCreate";
 import ServiceDetailsComponent from "./views/ServiceDetails";
 import ServiceListComponent from "./views/ServiceList";
 
@@ -43,6 +45,7 @@ const ServiceSection = () => {
       <WindowTitle title={intl.formatMessage(sectionNames.serviceAccounts)} />
       <Switch>
         <Route exact path={serviceListPath} component={ServiceList} />
+        <Route exact path={serviceAddPath} component={ServiceCreate} />
         <Route path={servicePath(":id")} component={ServiceDetails} />
       </Switch>
     </>

src/services/mutations.ts

@@ -0,0 +1,24 @@
+import gql from "graphql-tag";
+
+import { TypedMutation } from "../mutations";
+import { serviceFragment } from "./queries";
+import { ServiceCreate, ServiceCreateVariables } from "./types/ServiceCreate";
+
+export const serviceCreateMutation = gql`
+  ${serviceFragment}
+  mutation ServiceCreate($input: ServiceAccountInput!) {
+    serviceAccountCreate(input: $input) {
+      errors {
+        field
+        message
+      }
+      serviceAccount {
+        ...ServiceFragment
+      }
+    }
+  }
+`;
+export const ServiceCreateMutation = TypedMutation<
+  ServiceCreate,
+  ServiceCreateVariables
+>(serviceCreateMutation);

src/services/queries.ts

@@ -37,6 +37,9 @@ const serviceList = gql`
           ...ServiceFragment
         }
       }
+      pageInfo {
+        ...PageInfoFragment
+      }
     }
   }
 `;

src/services/types/ServiceCreate.ts

@@ -0,0 +1,36 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ServiceAccountInput } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ServiceCreate
+// ====================================================
+
+export interface ServiceCreate_serviceAccountCreate_errors {
+  __typename: "Error";
+  field: string | null;
+  message: string | null;
+}
+
+export interface ServiceCreate_serviceAccountCreate_serviceAccount {
+  __typename: "ServiceAccount";
+  id: string;
+  name: string | null;
+  isActive: boolean | null;
+}
+
+export interface ServiceCreate_serviceAccountCreate {
+  __typename: "ServiceAccountCreate";
+  errors: ServiceCreate_serviceAccountCreate_errors[] | null;
+  serviceAccount: ServiceCreate_serviceAccountCreate_serviceAccount | null;
+}
+
+export interface ServiceCreate {
+  serviceAccountCreate: ServiceCreate_serviceAccountCreate | null;
+}
+
+export interface ServiceCreateVariables {
+  input: ServiceAccountInput;
+}

src/services/types/ServiceList.ts

@@ -20,9 +20,18 @@ export interface ServiceList_serviceAccounts_edges {
   node: ServiceList_serviceAccounts_edges_node;
 }
 
+export interface ServiceList_serviceAccounts_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
 export interface ServiceList_serviceAccounts {
   __typename: "ServiceAccountCountableConnection";
   edges: ServiceList_serviceAccounts_edges[];
+  pageInfo: ServiceList_serviceAccounts_pageInfo;
 }
 
 export interface ServiceList {

src/services/views/ServiceCreate/ServiceCreate.tsx

@@ -0,0 +1,71 @@
+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 { ServiceCreateMutation } from "@saleor/services/mutations";
+import ServiceCreatePage, {
+  ServiceCreatePageFormData
+} from "../../components/ServiceCreatePage";
+import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls";
+
+export const ServiceCreate: React.StatelessComponent = () => {
+  const navigate = useNavigator();
+  const notify = useNotifier();
+  const intl = useIntl();
+  const shop = useShop();
+
+  const onSubmit = () => undefined;
+
+  const handleBack = () => navigate(serviceListUrl());
+
+  return (
+    <ServiceCreateMutation onCompleted={onSubmit}>
+      {(serviceCreate, serviceCreateOpts) => {
+        const handleSubmit = (data: ServiceCreatePageFormData) =>
+          serviceCreate({
+            variables: {
+              input: {
+                isActive: data.isActive,
+                name: data.name,
+                permissions: data.hasFullAccess
+                  ? shop.permissions.map(permission => permission.code)
+                  : data.permissions
+              }
+            }
+          });
+
+        const formTransitionState = getMutationState(
+          serviceCreateOpts.called,
+          serviceCreateOpts.loading,
+          maybe(() => serviceCreateOpts.data.serviceAccountCreate.errors)
+        );
+
+        return (
+          <>
+            <WindowTitle
+              title={intl.formatMessage({
+                defaultMessage: "Create Service Account",
+                description: "window title"
+              })}
+            />
+            <ServiceCreatePage
+              disabled={false}
+              errors={[]}
+              onBack={handleBack}
+              onSubmit={handleSubmit}
+              permissions={maybe(() => shop.permissions)}
+              saveButtonBarState={formTransitionState}
+            />
+          </>
+        );
+      }}
+    </ServiceCreateMutation>
+  );
+};
+
+export default ServiceCreate;

src/services/views/ServiceCreate/index.ts

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

src/services/views/ServiceDetails/ServiceDetails.tsx

@@ -11,7 +11,12 @@ import ServiceDetailsPage, {
   ServiceDetailsPageFormData
 } from "../../components/ServiceDetailsPage";
 import { ServiceDetailsQuery } from "../../queries";
-import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls";
+import {
+  serviceListUrl,
+  serviceUrl,
+  ServiceUrlDialog,
+  ServiceUrlQueryParams
+} from "../../urls";
 
 interface OrderListProps {
   id: string;
@@ -27,6 +32,25 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
+  const closeModal = () =>
+    navigate(
+      serviceUrl(id, {
+        ...params,
+        action: undefined,
+        id: undefined
+      }),
+      true
+    );
+
+  const openModal = (action: ServiceUrlDialog, tokenId?: string) =>
+    navigate(
+      serviceUrl(id, {
+        ...params,
+        action,
+        id: tokenId
+      })
+    );
+
   return (
     <ServiceDetailsQuery
       displayLoader
@@ -50,14 +74,7 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
           }
         };
 
-        const handleBack = navigate(serviceListUrl());
+        const handleBack = () => navigate(serviceListUrl());
-
-        const handleDelete = navigate(
-          serviceUrl(id, {
-            ...params,
-            action: "remove"
-          })
-        );
 
         const handleSubmit = (data: ServiceDetailsPageFormData) => undefined;
 
@@ -68,8 +85,10 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
               disabled={loading}
               errors={[]}
               onBack={handleBack}
-              onDelete={handleDelete}
+              onDelete={() => openModal("remove")}
               onSubmit={handleSubmit}
+              onTokenCreate={() => openModal("create-token")}
+              onTokenDelete={() => openModal("delete-token")}
               permissions={maybe(() => shop.permissions)}
               service={maybe(() => data.serviceAccount)}
               saveButtonBarState="default"

src/services/views/ServiceList/ServiceList.tsx

@@ -20,6 +20,7 @@ import { ListViews } from "@saleor/types";
 import ServiceListPage from "../../components/ServiceListPage";
 import { ServiceListQuery } from "../../queries";
 import {
+  serviceAddUrl,
   serviceListUrl,
   ServiceListUrlDialog,
   ServiceListUrlFilters,
@@ -118,37 +119,22 @@ export const ServiceList: React.StatelessComponent<ServiceListProps> = ({
 
   return (
     <ServiceListQuery displayLoader variables={queryVariables}>
-      {({ data, loading }) => (
+      {({ 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),
+          maybe(() => data.serviceAccounts.pageInfo),
           paginationState,
           params
         );
 
+        const handleCreate = () => navigate(serviceAddUrl);
+        const handleRemove = () =>
+          navigate(
+            serviceListUrl({
+              ...params,
+              action: "remove"
+            })
+          );
+
         return (
           <>
             <ServiceListPage
@@ -160,30 +146,23 @@ export const ServiceList: React.StatelessComponent<ServiceListProps> = ({
               onTabDelete={() => openModal("delete-search")}
               onTabSave={() => openModal("save-search")}
               tabs={tabs.map(tab => tab.name)}
-                  disabled={loading || addServiceMemberData.loading}
+              disabled={loading}
               settings={settings}
               pageInfo={pageInfo}
-                  serviceMembers={maybe(() =>
+              services={maybe(() =>
-                    data.serviceUsers.edges.map(edge => edge.node)
+                data.serviceAccounts.edges.map(edge => edge.node)
               )}
-                  onAdd={() =>
+              onAdd={handleCreate}
-                    navigate(
-                      serviceListUrl({
-                        action: "add"
-                      })
-                    )
-                  }
               onBack={() => navigate(configurationMenuUrl)}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}
               onUpdateListSettings={updateListSettings}
               onRowClick={id => () => navigate(serviceUrl(id))}
+              onRemove={handleRemove}
             />
           </>
         );
       }}
-        </TypedServiceMemberAddMutation>
-      )}
     </ServiceListQuery>
   );
 };

src/services/views/ServiceList/filter.ts

@@ -0,0 +1,31 @@
+import { ServiceAccountFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  ServiceListUrlFilters,
+  ServiceListUrlFiltersEnum,
+  ServiceListUrlQueryParams
+} from "../../urls";
+
+export const STAFF_FILTERS_KEY = "staffFilters";
+
+export function getFilterVariables(
+  params: ServiceListUrlFilters
+): ServiceAccountFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<ServiceListUrlFilters>(STAFF_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  ServiceListUrlQueryParams,
+  ServiceListUrlFilters
+>(ServiceListUrlFiltersEnum);

src/types/globalTypes.ts

@@ -655,6 +655,12 @@ export interface ServiceAccountFilterInput {
   isActive?: boolean | null;
 }
 
+export interface ServiceAccountInput {
+  name?: string | null;
+  isActive?: boolean | null;
+  permissions?: (PermissionEnum | null)[] | null;
+}
+
 export interface ShippingPriceInput {
   name?: string | null;
   price?: any | null;