Fix account settings page when logged in with external auth (#2478)

* Fix account settings page when logged in with external auth

* Update staff details page types

* refactor: staff member page utils

src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx

@@ -13,6 +13,7 @@ import {
   SearchPermissionGroupsQuery,
   StaffErrorFragment,
   StaffMemberDetailsFragment,
+  UserFragment,
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useLocale from "@saleor/hooks/useLocale";
@@ -23,6 +24,7 @@ import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getUserName } from "@saleor/misc";
 import UserStatus from "@saleor/staff/components/UserStatus";
 import { staffListUrl } from "@saleor/staff/urls";
+import { getMemberPermissionGroups, isMemberActive } from "@saleor/staff/utils";
 import { FetchMoreProps, RelayToFlat, SearchPageProps } from "@saleor/types";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import React from "react";
@@ -51,7 +53,7 @@ export interface StaffDetailsPageProps extends SearchPageProps {
   disabled: boolean;
   fetchMorePermissionGroups: FetchMoreProps;
   saveButtonBarState: ConfirmButtonTransitionState;
-  staffMember: StaffMemberDetailsFragment;
+  staffMember: StaffMemberDetailsFragment | UserFragment;
   errors: StaffErrorFragment[];
   onChangePassword: () => void;
   onDelete: () => void;
@@ -85,11 +87,14 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
 
   const { locale, setLocale } = useLocale();
 
+  const isActive = isMemberActive(staffMember);
+  const permissionGroups = getMemberPermissionGroups(staffMember);
+
   const [
     permissionGroupsDisplayValues,
     setPermissionGroupsDisplayValues,
   ] = useStateFromProps<MultiAutocompleteChoiceType[]>(
-    (staffMember?.permissionGroups || []).map(group => ({
+    permissionGroups.map(group => ({
       disabled: !group.userCanManage,
       label: group.name,
       value: group.id,
@@ -99,9 +104,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
   const initialForm: StaffDetailsFormData = {
     email: staffMember?.email || "",
     firstName: staffMember?.firstName || "",
-    isActive: !!staffMember?.isActive,
+    isActive,
     lastName: staffMember?.lastName || "",
-    permissionGroups: staffMember?.permissionGroups.map(pg => pg.id) || [],
+    permissionGroups: permissionGroups.map(pg => pg.id),
   };
 
   return (

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -4,6 +4,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import {
   StaffErrorFragment,
   StaffMemberDetailsFragment,
+  UserFragment,
 } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -105,7 +106,7 @@ interface StaffPropertiesProps {
   };
   errors: StaffErrorFragment[];
   disabled: boolean;
-  staffMember: StaffMemberDetailsFragment;
+  staffMember: StaffMemberDetailsFragment | UserFragment;
   onChange: (event: React.ChangeEvent<any>) => void;
   onImageDelete: () => void;
   onImageUpload: (file: File) => void;

src/staff/utils.ts

@@ -1,4 +1,4 @@
-import { StaffMemberDetailsFragment } from "@saleor/graphql";
+import { StaffMemberDetailsFragment, UserFragment } from "@saleor/graphql";
 import difference from "lodash/difference";
 
 import { StaffDetailsFormData } from "./components/StaffDetailsPage";
@@ -18,3 +18,23 @@ export const groupsDiff = (
     removeGroups: difference(oldGroups, newGroups),
   };
 };
+
+export const isMemberActive = (
+  staffMember: StaffMemberDetailsFragment | UserFragment,
+) => {
+  if (staffMember && "isActive" in staffMember) {
+    return staffMember.isActive;
+  }
+
+  return false;
+};
+
+export const getMemberPermissionGroups = (
+  staffMember: StaffMemberDetailsFragment | UserFragment,
+) => {
+  if (staffMember && "permissionGroups" in staffMember) {
+    return staffMember.permissionGroups;
+  }
+
+  return [];
+};

src/staff/views/StaffDetails.tsx

@@ -55,12 +55,15 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
       }),
     );
 
+  const isUserSameAsViewer = user.user?.id === id;
+
   const { data, loading, refetch } = useStaffMemberDetailsQuery({
     displayLoader: true,
     variables: { id },
+    skip: isUserSameAsViewer,
   });
 
-  const staffMember = data?.user;
+  const staffMember = isUserSameAsViewer ? user.user : data?.user;
 
   const [changePassword, changePasswordOpts] = useChangeStaffPasswordMutation({
     onCompleted: data => {
@@ -159,8 +162,6 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
       }),
     );
 
-  const isUserSameAsViewer = user.user?.id === data?.user?.id;
-
   return (
     <>
       <WindowTitle title={getStringOrPlaceholder(staffMember?.email)} />