Function UserFilter

console/src/platform/query-history/UserFilter.tsx:38–104

({ submitForm, variant }: UserFilterProps)

};

const UserFilter = ({ submitForm, variant }: UserFilterProps) => {
  const { colors, shadows } = useTheme<MaterializeTheme>();
  const { data: users, isError, isLoading } = useFetchQueryHistoryUsers();

  const { formState } = useFormContext<QueryHistoryListSchema>();
  const { field: userField } = useController<QueryHistoryListSchema, "user">({
    name: "user",
  });

  const { ref, onMenuOpen } = useReactSelectForceFocus();

  const handleOptionChange = (option: SelectOptionKind | null) => {
    if (!option || !("id" in option)) return;
    userField.onChange(option.id);
    submitForm();
  };

  const defaultSelectedValue =
    formState.defaultValues?.user ?? ALL_USERS_OPTION.id;

  const defaultOptions =
    defaultSelectedValue === ALL_USERS_OPTION.id
      ? [ALL_USERS_OPTION]
      : [
          {
            id: defaultSelectedValue,
            name: defaultSelectedValue,
          },
          ALL_USERS_OPTION,
        ];

  const options =
    users?.reduce((accum, user) => {
      if (user.id !== defaultSelectedValue) {
        accum.push(user);
      }

      return accum;
    }, defaultOptions) ?? defaultOptions;

  const currentValue =
    options?.find((option) => option.id === userField.value) ??
    defaultOptions[0];

  const isDisabled = isError || isLoading;

  return (
    <SearchableSelect<SelectOptionKind, false>
      ariaLabel="User filter"
      isDisabled={isDisabled}
      options={options}
      leftIcon={<Text color={colors.foreground.secondary}>User</Text>}
      value={currentValue}
      onChange={(value) => handleOptionChange(value)}
      onMenuOpen={onMenuOpen}
      ref={ref as RefObject<any>}
      styles={buildSearchableSelectFilterStyles(
        {