feat: Rebuilt member admin (#2139)

app/scenes/Search/components/CollectionFilter.js

@@ -2,7 +2,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "./FilterOptions";
+import FilterOptions from "components/FilterOptions";
 import useStores from "hooks/useStores";
 
 type Props = {|

app/scenes/Search/components/DateFilter.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "./FilterOptions";
+import FilterOptions from "components/FilterOptions";
 
 type Props = {|
   dateFilter: ?string,

app/scenes/Search/components/FilterOption.js

@@ -1,85 +0,0 @@
-// @flow
-import { CheckmarkIcon } from "outline-icons";
-import * as React from "react";
-import { MenuItem } from "reakit/Menu";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Flex from "components/Flex";
-import HelpText from "components/HelpText";
-
-type Props = {|
-  label: string,
-  note?: string,
-  onSelect: () => void,
-  active: boolean,
-|};
-
-const FilterOption = ({ label, note, onSelect, active, ...rest }: Props) => {
-  return (
-    <MenuItem onClick={active ? undefined : onSelect} {...rest}>
-      {(props) => (
-        <ListItem>
-          <Button active={active} {...props}>
-            <Flex align="center" justify="space-between">
-              <span>
-                {label}
-                {note && <Description small>{note}</Description>}
-              </span>
-              {active && <Checkmark />}
-            </Flex>
-          </Button>
-        </ListItem>
-      )}
-    </MenuItem>
-  );
-};
-
-const Description = styled(HelpText)`
-  margin-top: 2px;
-  margin-bottom: 0;
-  line-height: 1.2em;
-`;
-
-const Checkmark = styled(CheckmarkIcon)`
-  flex-shrink: 0;
-  padding-left: 4px;
-  fill: ${(props) => props.theme.text};
-`;
-
-const Button = styled.button`
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  padding: 8px;
-  margin: 0;
-  border: 0;
-  background: none;
-  color: ${(props) => props.theme.text};
-  text-align: left;
-  font-weight: ${(props) => (props.active ? "600" : "normal")};
-  justify-content: center;
-  width: 100%;
-  min-height: 42px;
-
-  ${HelpText} {
-    font-weight: normal;
-    user-select: none;
-  }
-
-  &:hover {
-    background: ${(props) => props.theme.listItemHoverBackground};
-  }
-
-  ${breakpoint("tablet")`
-    padding: 4px 8px;
-    font-size: 15px;
-    min-height: 32px;
-  `};
-`;
-
-const ListItem = styled("li")`
-  list-style: none;
-  max-width: 250px;
-`;
-
-export default FilterOption;

app/scenes/Search/components/FilterOptions.js

@@ -1,97 +0,0 @@
-// @flow
-import { find } from "lodash";
-import * as React from "react";
-import { useMenuState, MenuButton } from "reakit/Menu";
-import styled from "styled-components";
-import Button, { Inner } from "components/Button";
-import ContextMenu from "components/ContextMenu";
-import FilterOption from "./FilterOption";
-
-type TFilterOption = {|
-  key: string,
-  label: string,
-  note?: string,
-|};
-
-type Props = {|
-  options: TFilterOption[],
-  activeKey: ?string,
-  defaultLabel?: string,
-  selectedPrefix?: string,
-  className?: string,
-  onSelect: (key: ?string) => void,
-|};
-
-const FilterOptions = ({
-  options,
-  activeKey = "",
-  defaultLabel,
-  selectedPrefix = "",
-  className,
-  onSelect,
-}: Props) => {
-  const menu = useMenuState({ modal: true });
-  const selected = find(options, { key: activeKey }) || options[0];
-  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
-
-  return (
-    <SearchFilter>
-      <MenuButton {...menu}>
-        {(props) => (
-          <StyledButton
-            {...props}
-            className={className}
-            neutral
-            disclosure
-            small
-          >
-            {activeKey ? selectedLabel : defaultLabel}
-          </StyledButton>
-        )}
-      </MenuButton>
-      <ContextMenu aria-label={defaultLabel} {...menu}>
-        <List>
-          {options.map((option) => (
-            <FilterOption
-              key={option.key}
-              onSelect={() => {
-                onSelect(option.key);
-                menu.hide();
-              }}
-              active={option.key === activeKey}
-              {...option}
-              {...menu}
-            />
-          ))}
-        </List>
-      </ContextMenu>
-    </SearchFilter>
-  );
-};
-
-const StyledButton = styled(Button)`
-  box-shadow: none;
-  text-transform: none;
-  border-color: transparent;
-  height: 28px;
-
-  &:hover {
-    background: transparent;
-  }
-
-  ${Inner} {
-    line-height: 28px;
-  }
-`;
-
-const SearchFilter = styled.div`
-  margin-right: 8px;
-`;
-
-const List = styled("ol")`
-  list-style: none;
-  margin: 0;
-  padding: 0 8px;
-`;
-
-export default FilterOptions;

app/scenes/Search/components/StatusFilter.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "./FilterOptions";
+import FilterOptions from "components/FilterOptions";
 
 type Props = {|
   includeArchived?: boolean,

app/scenes/Search/components/UserFilter.js

@@ -2,7 +2,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "./FilterOptions";
+import FilterOptions from "components/FilterOptions";
 import useStores from "hooks/useStores";
 
 type Props = {|