binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5822] fix: migrate ImagePickerPopover to Propel Tabs component and render only enabled tabs #8290

Browse source 
- Replace custom tab implementation with Propel Tabs
- Dynamically render only enabled tabs based on configuration
- Filter tabs by isEnabled property for cleaner conditional rendering
- Improve tab navigation and accessibility with Propel components
This commit is contained in:
Prateek Shourya 2025-12-29 19:54:32 +05:30 • committed by GitHub
parent 94d5779f3a
commit 8d479ac24c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 22 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

47
apps/web/core/components/core/image-picker-popover.tsx
View file

@ -5,10 +5,11 @@ import { useDropzone } from "react-dropzone";
import type { Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import useSWR from "swr";
import { Tab, Popover } from "@headlessui/react";
import { Popover } from "@headlessui/react";
// plane imports
import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
import { Tabs } from "@plane/propel/tabs";
import { Button, getButtonStyling } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
@ -80,6 +81,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
[hasUnsplashConfigured]
);
const enabledTabs = useMemo(() => tabOptions.filter((tab) => tab.isEnabled), [tabOptions]);
const { data: unsplashImages, error: unsplashError } = useSWR(
`UNSPLASH_IMAGES_${searchParams}`,
() => fileService.getUnsplashImages(searchParams),
@ -191,25 +194,19 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
>
<div
ref={imagePickerRef}
className="flex h-96 w-80 flex-col overflow-auto rounded-sm border border-strong bg-surface-1 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
>
<Tab.Group>
<Tab.List as="span" className="inline-block rounded-sm bg-layer-1 p-1">
{tabOptions.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`rounded-sm px-4 py-1 text-center text-13 outline-none transition-colors ${
selected ? "bg-accent-primary text-on-color" : "text-primary"
}`
}
className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
>
<Tabs defaultValue={enabledTabs[0]?.key || "images"} className="flex h-full flex-col p-3">
<Tabs.List className="flex rounded bg-layer-3 p-1">
{enabledTabs.map((tab) => (
<Tabs.Trigger key={tab.key} value={tab.key} size="md">
{tab.title}
</Tab>
</Tabs.Trigger>
))}
</Tab.List>
<Tab.Panels className="vertical-scrollbar scrollbar-md h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
<Tab.Panel className="mt-4 h-full w-full space-y-4">
<Tabs.Indicator />
</Tabs.List>
<div className="vertical-scrollbar scrollbar-sm p-3 mt-3 flex-1 overflow-y-auto overflow-x-hidden">
<Tabs.Content value="unsplash" className="h-full w-full space-y-4">
{(unsplashImages || !unsplashError) && (
<>
<div className="flex items-center gap-x-2">
@ -276,8 +273,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
)}
</>
)}
</Tab.Panel>
<Tab.Panel className="mt-4 h-full w-full space-y-4">
</Tabs.Content>
<Tabs.Content value="images" className="h-full w-full space-y-4">
<div className="grid grid-cols-4 gap-4">
{Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
<div
@ -293,8 +290,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
</div>
))}
</div>
</Tab.Panel>
<Tab.Panel className="mt-4 h-full w-full">
</Tabs.Content>
<Tabs.Content value="upload" className="h-full w-full">
<div className="flex h-full w-full flex-col gap-y-2">
<div className="flex w-full flex-1 items-center gap-3">
<div
@ -357,13 +354,13 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
disabled={!image}
loading={isImageUploading}
>
{isImageUploading ? "Uploading..." : "Upload & Save"}
{isImageUploading ? "Uploading" : "Upload & Save"}
</Button>
</div>
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</Tabs.Content>
</div>
</Tabs>
</div>
</Popover.Panel>
)}