✨ Refactor filters into a panel and add subjectType and collection fi…

…lters

app/reports/page-content.tsx

@@ -30,8 +30,8 @@ import { useFluentReportSearchParams } from '@/reports/useFluentReportSearch'
 import { useLabelerAgent } from '@/shell/ConfigurationContext'
 import { WorkspacePanel } from 'components/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
-import { EmbedTypePickerForModerationQueue } from '@/common/EmbedTypePicker'
 import { QUEUE_SEED } from '@/lib/constants'
+import QueueFilterPanel from '@/reports/QueueFilter/Panel'
 
 const TABS = [
   {
@@ -248,8 +248,7 @@ export const ReportsPageContent = () => {
       </SectionHeader>
       <div className="md:flex mt-2 mb-2 flex-row justify-between px-4 sm:px-6 lg:px-8">
         <div className="flex flex-row items-center gap-2">
-          <LanguagePicker />
-          <EmbedTypePickerForModerationQueue />
+          <QueueFilterPanel />
         </div>
         <ResolvedFilters />
       </div>
@@ -305,6 +304,8 @@ function useModerationQueueQuery() {
   const tags = params.get('tags')
   const excludeTags = params.get('excludeTags')
   const queueName = params.get('queueName')
+  const subjectType = params.get('subjectType')
+  const collections = params.get('collections')
   const { sortField, sortDirection } = getSortParams(params)
   const { lastReviewedBy, subject, reporters, includeAllUserRecords } =
     useFluentReportSearchParams()
@@ -327,6 +328,8 @@ function useModerationQueueQuery() {
         queueName,
         includeMuted,
         onlyMuted,
+        subjectType,
+        collections,
       },
     ],
     queryFn: async ({ pageParam }) => {
@@ -340,6 +343,17 @@ function useModerationQueueQuery() {
 
       if (subject) {
         queryParams.subject = subject
+      } else {
+        if (subjectType) {
+          queryParams.subjectType = subjectType
+        }
+
+        if (subjectType === 'record') {
+          const collectionNames = collections?.split(',')
+          if (collectionNames?.length) {
+            queryParams.collections = collectionNames
+          }
+        }
       }
 
       if (takendown) {

components/common/LanguagePicker.tsx

@@ -61,58 +61,7 @@ const SelectionTitle = ({
   )
 }
 
-// Tags can be any arbitrary string, and lang tags are prefixed with lang:[code2] so we use this to get the lang code from tag string
-const getLangFromTag = (tag: string) => tag.split(':')[1]
-
 export const LanguagePicker: React.FC = () => {
-  const searchParams = useSearchParams()
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const tagsParam = searchParams.get('tags')
-  const excludeTagsParam = searchParams.get('excludeTags')
-  const tags = tagsParam?.split(',') || []
-  const excludedTags = excludeTagsParam?.split(',') || []
-  const includedLanguages = tags
-    .filter((tag) => tag.startsWith('lang:'))
-    .map(getLangFromTag)
-  const excludedLanguages = excludedTags
-    .filter((tag) => tag.startsWith('lang:'))
-    .map(getLangFromTag)
-
-  const toggleLanguage = (section: 'include' | 'exclude', newLang: string) => {
-    const nextParams = new URLSearchParams(searchParams)
-    const urlQueryKey = section === 'include' ? 'tags' : 'excludeTags'
-    const selectedLanguages =
-      section === 'include' ? includedLanguages : excludedLanguages
-    const selectedLanguageTags = section === 'include' ? tags : excludedTags
-
-    if (selectedLanguages.includes(newLang)) {
-      const newTags = selectedLanguageTags.filter(
-        (tag) => `lang:${newLang}` !== tag,
-      )
-      if (newTags.length) {
-        nextParams.set(urlQueryKey, newTags.join(','))
-      } else {
-        nextParams.delete(urlQueryKey)
-      }
-    } else {
-      nextParams.set(
-        urlQueryKey,
-        [...selectedLanguageTags, `lang:${newLang}`].join(','),
-      )
-    }
-
-    router.push((pathname ?? '') + '?' + nextParams.toString())
-  }
-  const clearLanguages = () => {
-    const nextParams = new URLSearchParams(searchParams)
-
-    nextParams.delete('tags')
-    nextParams.delete('excludeTags')
-    router.push((pathname ?? '') + '?' + nextParams.toString())
-  }
-
   return (
     <Popover>
       {({ open, close }) => (
@@ -134,44 +83,7 @@ export const LanguagePicker: React.FC = () => {
           >
             <Popover.Panel className="absolute left-0 z-10 mt-1 flex w-screen max-w-max -translate-x-1/5 px-4">
               <div className="w-fit-content flex-auto rounded bg-white dark:bg-slate-800 p-4 text-sm leading-6 shadow-lg dark:shadow-slate-900 ring-1 ring-gray-900/5">
-                <div className="flex flex-row gap-4 text-gray-700 dark:text-gray-100">
-                  <LanguageList
-                    disabled={excludedLanguages}
-                    selected={includedLanguages}
-                    header="Include Languages"
-                    onSelect={(lang) => toggleLanguage('include', lang)}
-                  />
-                  <LanguageList
-                    disabled={includedLanguages}
-                    selected={excludedLanguages}
-                    header="Exclude Languages"
-                    onSelect={(lang) => toggleLanguage('exclude', lang)}
-                  />
-                </div>
 
-                <p className="py-2 block max-w-xs text-gray-500 dark:text-gray-300 text-xs">
-                  Note:{' '}
-                  <i>
-                    When multiple languages are selected, only subjects that are
-                    tagged with <b>all</b> of those languages will be
-                    included/excluded.
-                  </i>
-                </p>
-                {(includedLanguages.length > 0 ||
-                  excludedLanguages.length > 0) && (
-                  <div className="flex flex-row mt-2">
-                    <ActionButton
-                      size="xs"
-                      appearance="outlined"
-                      onClick={() => {
-                        clearLanguages()
-                        close()
-                      }}
-                    >
-                      <span className="text-xs">Clear All</span>
-                    </ActionButton>
-                  </div>
-                )}
               </div>
             </Popover.Panel>
           </Transition>
@@ -181,47 +93,6 @@ export const LanguagePicker: React.FC = () => {
   )
 }
 
-const LanguageList = ({
-  header,
-  onSelect,
-  selected = [],
-  disabled = [],
-}: {
-  selected: string[]
-  disabled: string[]
-  header: string
-  onSelect: (lang: string) => void
-}) => {
-  return (
-    <div>
-      <h4 className="text-gray-900 dark:text-gray-200 border-b border-gray-300 mb-2 pb-1">
-        {header}
-      </h4>
-      <div className="flex flex-col items-start">
-        {availableLanguageCodes.map((code2) => {
-          const isDisabled = disabled.includes(code2)
-          return (
-            <button
-              className={`w-full flex flex-row items-center justify-between ${
-                isDisabled
-                  ? 'text-gray-400'
-                  : 'text-gray-700 dark:text-gray-100'
-              }`}
-              onClick={() => !isDisabled && onSelect(code2)}
-              key={code2}
-            >
-              {getLanguageName(code2)}
-              {selected.includes(code2) && (
-                <CheckIcon className="h-4 w-4 text-green-700" />
-              )}
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
 export const LanguageSelectorDropdown = ({
   selectedLang,
   setSelectedLang,

components/common/buttons.tsx

@@ -99,10 +99,15 @@ export const ButtonGroup = ({
   appearance,
   size = 'sm',
   items,
+  leftAligned = false,
 }: ComponentProps<'span'> &
-  ActionButtonProps & { items: ButtonGroupItem[] }) => {
+  ActionButtonProps & { items: ButtonGroupItem[]; leftAligned?: boolean }) => {
+  const containerClasses = classNames(
+    `isolate inline-flex rounded-md shadow-sm my-2 sm:my-0`,
+    leftAligned ? '' : 'sm:ml-4',
+  )
   return (
-    <span className="isolate inline-flex rounded-md shadow-sm sm:ml-4 my-2 sm:my-0">
+    <span className={containerClasses}>
       {items.map(({ id, className, Icon, text, isActive, ...rest }, i) => (
         <button
           key={id}

components/common/forms/index.tsx

@@ -39,65 +39,6 @@ export const Textarea = forwardRef<
   )
 })
 
-export function RadioGroup(props: ComponentProps<'ul'>) {
-  const { className = '', ...others } = props
-  return (
-    <ul
-      className={`items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex ${className}`}
-      {...others}
-    />
-  )
-}
-
-export function RadioGroupOption(
-  props: ComponentProps<'input'> & {
-    name: string
-    value: string
-    last?: boolean
-    labelClassName?: string
-  },
-) {
-  const {
-    className = '',
-    value,
-    name,
-    required,
-    disabled,
-    last,
-    children,
-    labelClassName = '',
-    ...others
-  } = props
-  return (
-    <li
-      className={`w-full border-b border-gray-200 sm:border-b-0 ${
-        last ? '' : 'sm:border-r'
-      } ${className}`}
-    >
-      <div className="flex items-center pl-3">
-        <input
-          id={`radio-group--${name}--${value}`}
-          type="radio"
-          value={value}
-          name={name}
-          required={required}
-          disabled={disabled}
-          className="w-4 h-4 text-indigo-600 dark:text-teal-600 bg-gray-100 dark:bg-slate-500 border-gray-300 focus:ring-indigo-500 dark:focus:ring-teal-500 focus:ring-2"
-          {...others}
-        />
-        <label
-          htmlFor={`radio-group--${name}--${value}`}
-          className={`w-full py-3 ml-2 text-sm font-medium ${
-            labelClassName || 'text-gray-900'
-          }`}
-        >
-          {children}
-        </label>
-      </div>
-    </li>
-  )
-}
-
 type LabelProps = { label: string | JSX.Element; required?: boolean }
 type CopyProps = { copyButton?: { text: string; label?: string } }