Separate status and role filters in member management

app/scenes/Settings/components/UserRoleFilter.tsx

@@ -0,0 +1,50 @@
+import compact from "lodash/compact";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { UserRole } from "@shared/types";
+import FilterOptions from "~/components/FilterOptions";
+
+type Props = {
+  activeKey: string;
+  onSelect: (key: string | null | undefined) => void;
+};
+
+const UserRoleFilter = ({ activeKey, onSelect, ...rest }: Props) => {
+  const { t } = useTranslation();
+
+  const options = React.useMemo(
+    () =>
+      compact([
+        {
+          key: "",
+          label: t("All roles"),
+        },
+        {
+          key: UserRole.Admin,
+          label: t("Admins"),
+        },
+        {
+          key: UserRole.Member,
+          label: t("Editors"),
+        },
+        {
+          key: UserRole.Viewer,
+          label: t("Viewers"),
+        },
+      ]),
+    [t]
+  );
+
+  return (
+    <FilterOptions
+      options={options}
+      selectedKeys={[activeKey]}
+      onSelect={onSelect}
+      defaultLabel={t("All roles")}
+      {...rest}
+    />
+  );
+};
+
+export default observer(UserRoleFilter);

app/scenes/Settings/components/UserStatusFilter.tsx

@@ -17,22 +17,14 @@ const UserStatusFilter = ({ activeKey, onSelect, ...rest }: Props) => {
   const options = React.useMemo(
     () =>
       compact([
+        {
+          key: "all",
+          label: t("All status"),
+        },
         {
           key: "",
           label: t("Active"),
         },
-        {
-          key: "all",
-          label: t("Everyone"),
-        },
-        {
-          key: "members",
-          label: t("Members"),
-        },
-        {
-          key: "admins",
-          label: t("Admins"),
-        },
         ...(user.isAdmin
           ? [
               {
@@ -45,10 +37,6 @@ const UserStatusFilter = ({ activeKey, onSelect, ...rest }: Props) => {
           key: "invited",
           label: t("Invited"),
         },
-        {
-          key: "viewers",
-          label: t("Viewers"),
-        },
       ]),
     [t, user.isAdmin]
   );