Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx (TypeScript)

Code before:
  // Only use storage policy editor when creating new policies for buckets
  const showStoragePolicyEditor =
    isEmpty(selectedPolicyToEdit) &&
    !isEmpty(isEditingPolicyForBucket) &&
    get(isEditingPolicyForBucket, ['bucket'], '').length > 0

  const showGeneralPolicyEditor = !isEmpty(isEditingPolicyForBucket) && !showStoragePolicyEditor

  // Policies under storage.objects
  const storageObjectsPolicies = filter(policies, { table: 'objects' })
  const formattedStorageObjectPolicies = formatPoliciesForStorage(buckets, storageObjectsPolicies)
  const ungroupedPolicies = get(
    find(formattedStorageObjectPolicies, { name: 'Ungrouped' }),
    ['policies'],
    []
  )

  // Policies under storage.buckets
  const storageBucketPolicies = filter(policies, { table: 'buckets' })

  /**
   * Filter buckets based on search string
   * - Filter buckets by name matching the search string
   * - Show all policies for filtered buckets (policies are not filtered)
   */
  const { filteredBucketsWithPolicies, filteredUngroupedPolicies, filteredBucketPolicies } =
    useMemo(() => {
      const searchFilter = deferredSearchString?.toLowerCase() || ''
      const bucketsList = data ?? []

      // Filter buckets by name if search filter is present
      const filteredBucketsList = searchFilter
        ? bucketsList.filter((bucket) => bucket.name.toLowerCase().includes(searchFilter))
        : bucketsList

      // Get policies for filtered buckets (show all policies, don't filter them)
      // Show all filtered buckets, even if they don't have policies (similar to auth/policies.tsx)
      const filteredBucketsWithPoliciesList = filteredBucketsList.map((bucket) => {
        const bucketPolicies = get(
          find(formattedStorageObjectPolicies, { name: bucket.name }),
          ['policies'],
          []
        )

        return {
          bucket,
          policies: bucketPolicies.sort((a: any, b: any) => a.name.localeCompare(b.name)),
        }
      })

      // Schema-level policies should always be shown, unaffected by search filter

Review comment (suggestion):
im not too sure i follow here but this feels like its unncessarily returning `filteredUngroupedPolicies` and `filteredBucketPolicies`?

given that `filteredUngroupedPolicies` is just `ungroupedPolicies`
and `filteredBucketPolicies` is just `storageBucketPolicies`

only `filteredBucketsWithPolicies` is being computed within the useMemo

Code after:

  // Only use storage policy editor when creating new policies for buckets
  const showStoragePolicyEditor =
    isEmpty(selectedPolicyToEdit) &&
    !isEmpty(isEditingPolicyForBucket) &&
    (isEditingPolicyForBucket.bucket ?? '').length > 0

  const showGeneralPolicyEditor = !isEmpty(isEditingPolicyForBucket) && !showStoragePolicyEditor

  // Policies under storage.objects
  const storageObjectsPolicies = policies.filter(
    (x) => x.schema === 'storage' && x.table === 'objects'
  )
  const formattedStorageObjectPolicies = formatPoliciesForStorage(buckets, storageObjectsPolicies)
  const ungroupedPolicies =
    formattedStorageObjectPolicies.find((x) => x.name === 'Ungrouped')?.policies ?? []

  // Policies under storage.buckets
  const storageBucketPolicies = policies.filter(
    (x) => x.schema === 'storage' && x.table === 'buckets'
  )

  /**
   * Filter buckets based on search string
   * - Filter buckets by name matching the search string
   * - Show all policies for filtered buckets (policies are not filtered)
   */
  const filteredBucketsWithPolicies = useMemo(() => {
    const searchFilter = searchString?.toLowerCase() || ''

    // Filter buckets by name if search filter is present
    const filteredBucketsList = searchFilter
      ? buckets.filter((bucket) => bucket.name.toLowerCase().includes(searchFilter))
      : buckets

    // Get policies for filtered buckets (show all policies, don't filter them)
    // Show all filtered buckets, even if they don't have policies (similar to auth/policies.tsx)
    const filteredBucketsWithPoliciesList = filteredBucketsList.map((bucket) => {
      const policies =
        formattedStorageObjectPolicies.find((x) => x.name === bucket.name)?.policies ?? []
      return { bucket, policies }
    })

    // Schema-level policies should always be shown, unaffected by search filter
    return filteredBucketsWithPoliciesList
  }, [buckets, searchString, formattedStorageObjectPolicies])

  const onSelectPolicyAdd = (bucketName = '', table = '') => {
    setSelectedPolicyToEdit(undefined)
    setIsEditingPolicyForBucket({ bucket: bucketName, table })
  }