Fix user menu

saleor · Aug 17, 2023 · fa82773 · fa82773
1 parent 65a15a1
commit fa82773
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 100 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.118",
+    "@saleor/macaw-ui": "0.8.0-pre.119",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

diff --git a/src/components/Sidebar/user/Controls.tsx b/src/components/Sidebar/user/Controls.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useUser } from "@dashboard/auth";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
 import { useTheme } from "@dashboard/theme";
@@ -29,11 +28,11 @@ export const useLegacyThemeHandler = () => {
   };
 
   const handleStorage = (event: StorageEvent) => {
-    if (!["macaw-ui-theme", "activeMacawUITheme"].includes(event.key)) {
+    if (!["macaw-ui-theme", "activeMacawUITheme"].includes(event.key || "")) {
       return;
     }
 
-    const isDark = event.newValue.toLowerCase().includes("dark");
+    const isDark = event.newValue?.toLowerCase().includes("dark");
     setLegacyTheme(isDark ? "dark" : "light");
     setTheme(isDark ? "defaultDark" : "defaultLight");
   };
@@ -51,102 +50,107 @@ export const UserControls = () => {
   const { user, logout } = useUser();
   const { changeTheme, theme } = useLegacyThemeHandler();
   const [open, setOpen] = useState(false);
+  const [flagsModalOpen, setFlagsModalOpen] = useState(false);
 
   return (
-    <Dropdown
-      open={open}
-      onOpenChange={value => {
-        setOpen(value);
-      }}
-    >
-      <Dropdown.Trigger>
-        <Button
-          variant="tertiary"
-          icon={<MoreOptionsIcon />}
-          data-test-id="userMenu"
-          size="medium"
-          onClick={() => setOpen(true)}
-        />
-      </Dropdown.Trigger>
-      <Dropdown.Content align="end">
-        <Box __minWidth={192}>
-          <List
-            padding={2}
-            borderRadius={4}
-            boxShadow="overlay"
-            backgroundColor="surfaceNeutralPlain"
-          >
-            <Dropdown.Item>
-              <List.Item
-                borderRadius={4}
-                data-test-id="account-settings-button"
-                onClick={() => setOpen(false)}
-              >
-                <Link
-                  to={staffMemberDetailsUrl(user?.id)}
-                  className={sprinkles({
-                    display: "block",
-                    width: "100%",
-                    ...listItemStyles,
-                  })}
+    <>
+      <Dropdown
+        open={open}
+        onOpenChange={value => {
+          setOpen(value);
+        }}
+      >
+        <Dropdown.Trigger>
+          <Button
+            variant="tertiary"
+            icon={<MoreOptionsIcon />}
+            data-test-id="userMenu"
+            size="medium"
+            onClick={() => setOpen(true)}
+          />
+        </Dropdown.Trigger>
+        <Dropdown.Content align="end">
+          <Box __minWidth={192}>
+            <List
+              padding={2}
+              borderRadius={4}
+              boxShadow="overlay"
+              backgroundColor="surfaceNeutralPlain"
+            >
+              <Dropdown.Item>
+                <List.Item
+                  borderRadius={4}
+                  data-test-id="account-settings-button"
+                  onClick={() => setOpen(false)}
+                >
+                  <Link
+                    to={staffMemberDetailsUrl(user?.id || "")}
+                    className={sprinkles({
+                      display: "block",
+                      width: "100%",
+                      ...listItemStyles,
+                    })}
+                  >
+                    <Text>
+                      <FormattedMessage
+                        id="NQgbYA"
+                        defaultMessage="Account Settings"
+                      />
+                    </Text>
+                  </Link>
+                </List.Item>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <List.Item
+                  {...listItemStyles}
+                  onClick={() => setFlagsModalOpen(true)}
                 >
                   <Text>
                     <FormattedMessage
-                      id="NQgbYA"
-                      defaultMessage="Account Settings"
+                      id="38dc43"
+                      defaultMessage="Features preview"
+                      description="Features preview"
                     />
                   </Text>
-                </Link>
-              </List.Item>
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <FeatureFlagsModal>
-                <List.Item {...listItemStyles}>
+                </List.Item>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <List.Item
+                  onClick={logout}
+                  {...listItemStyles}
+                  data-test-id="log-out-button"
+                >
                   <Text>
                     <FormattedMessage
-                      id="38dc43"
-                      defaultMessage="Features preview"
-                      description="Features preview"
+                      id="qLbse5"
+                      defaultMessage="Log out"
+                      description="button"
                     />
                   </Text>
                 </List.Item>
-              </FeatureFlagsModal>
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <List.Item
-                onClick={logout}
-                {...listItemStyles}
-                data-test-id="log-out-button"
-              >
-                <Text>
-                  <FormattedMessage
-                    id="qLbse5"
-                    defaultMessage="Log out"
-                    description="button"
-                  />
-                </Text>
-              </List.Item>
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <List.Item
-                display="flex"
-                alignItems="center"
-                gap={2}
-                marginTop={1}
-                onClick={() => {
-                  changeTheme();
-                  setOpen(false);
-                }}
-                {...listItemStyles}
-                data-test-id="theme-switch"
-              >
-                <ThemeSwitcher theme={theme} />
-              </List.Item>
-            </Dropdown.Item>
-          </List>
-        </Box>
-      </Dropdown.Content>
-    </Dropdown>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <List.Item
+                  display="flex"
+                  alignItems="center"
+                  gap={2}
+                  marginTop={1}
+                  onClick={() => {
+                    changeTheme();
+                    setOpen(false);
+                  }}
+                  {...listItemStyles}
+                  data-test-id="theme-switch"
+                >
+                  <ThemeSwitcher theme={theme} />
+                </List.Item>
+              </Dropdown.Item>
+            </List>
+          </Box>
+        </Dropdown.Content>
+      </Dropdown>
+      <FeatureFlagsModal open={flagsModalOpen} onChange={setFlagsModalOpen} />
+    </>
   );
 };
 

diff --git a/src/components/Sidebar/user/FeatureFlagsModal/index.tsx b/src/components/Sidebar/user/FeatureFlagsModal/index.tsx
@@ -1,6 +1,6 @@
 import { Name } from "@dashboard/featureFlags/availableFlags";
 import { Box, Button, CloseIcon, Modal } from "@saleor/macaw-ui/next";
-import React, { ReactNode } from "react";
+import React from "react";
 
 import { Content } from "./Content";
 import { FlagList } from "./FlagList";
@@ -9,19 +9,22 @@ import { NoFlags } from "./NoFlags";
 import { useFlagsState } from "./useFlagsState";
 
 interface FeatureFlagsModalProps {
-  children: ReactNode;
+  open: boolean;
+  onChange: (open: boolean) => void;
 }
 
-export const FeatureFlagsModal = ({ children }: FeatureFlagsModalProps) => {
+export const FeatureFlagsModal = ({
+  open,
+  onChange,
+}: FeatureFlagsModalProps) => {
   const { selectedFlag, hasNoFlags, changeTab } = useFlagsState();
 
   const handleTabClick = (tabName: Name) => {
     changeTab(tabName);
   };
 
   return (
-    <Modal>
-      <Modal.Trigger>{children}</Modal.Trigger>
+    <Modal open={open} onChange={onChange}>
       <Modal.Content>
         <Box
           backgroundColor="surfaceNeutralPlain"