refactor: update Tabs component usage in AnalyticsPage and ImagePickerPopover

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 // components
 import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
@@ -75,9 +75,9 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                       "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
                     )}
                   >
-                    <Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
+                    <TabsList className={"overflow-x-auto flex w-fit h-7"}>
                       {ANALYTICS_TABS.map((tab) => (
-                        <Tabs.Trigger
+                        <TabsTrigger
                           key={tab.key}
                           value={tab.key}
                           disabled={tab.isDisabled}
@@ -90,22 +90,22 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                           }}
                         >
                           {tab.label}
-                        </Tabs.Trigger>
+                        </TabsTrigger>
                       ))}
-                    </Tabs.List>
+                    </TabsList>
 
                     <div className="flex-shrink-0">
                       <AnalyticsFilterActions />
                     </div>
                   </div>
                   {ANALYTICS_TABS.map((tab) => (
-                    <Tabs.Content
+                    <TabsContent
                       key={tab.key}
                       value={tab.key}
                       className={"h-full overflow-hidden overflow-y-auto px-2"}
                     >
                       <tab.content />
-                    </Tabs.Content>
+                    </TabsContent>
                   ))}
                 </div>
               </Tabs>

apps/web/core/components/core/image-picker-popover.tsx

@@ -9,7 +9,7 @@ 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 { Tabs, TabsContent, TabsList, TabsIndicator, TabsTrigger } from "@plane/propel/tabs";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -197,16 +197,16 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
             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">
+              <TabsList className="flex rounded bg-layer-3 p-1">
                 {enabledTabs.map((tab) => (
-                  <Tabs.Trigger key={tab.key} value={tab.key} size="md">
+                  <TabsTrigger key={tab.key} value={tab.key} size="md">
                     {tab.title}
-                  </Tabs.Trigger>
+                  </TabsTrigger>
                 ))}
-                <Tabs.Indicator />
-              </Tabs.List>
+                <TabsIndicator />
+              </TabsList>
               <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">
+                <TabsContent value="unsplash" className="h-full w-full space-y-4">
                   {(unsplashImages || !unsplashError) && (
                     <>
                       <div className="flex items-center gap-x-2">
@@ -273,8 +273,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       )}
                     </>
                   )}
-                </Tabs.Content>
-                <Tabs.Content value="images" className="h-full w-full space-y-4">
+                </TabsContent>
+                <TabsContent 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
@@ -290,8 +290,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     ))}
                   </div>
-                </Tabs.Content>
-                <Tabs.Content value="upload" className="h-full w-full">
+                </TabsContent>
+                <TabsContent 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
@@ -358,7 +358,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </Button>
                     </div>
                   </div>
-                </Tabs.Content>
+                </TabsContent>
               </div>
             </Tabs>
           </div>

apps/web/core/components/project/create/common-attributes.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import type { UseFormSetValue } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
-import { Info } from "lucide-react";
+import { InfoIcon } from "@plane/propel/icons";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -120,7 +120,7 @@ function ProjectCommonAttributes(props: Props) {
           className="text-13"
           position="right-start"
         >
-          <Info className="absolute right-2 top-2.5 h-3 w-3 text-placeholder" />
+          <InfoIcon className="absolute right-2 top-2.5 h-3 w-3 text-placeholder" />
         </Tooltip>
         <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
       </div>

apps/web/core/components/project/create/header.tsx

@@ -18,13 +18,21 @@ import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/te
 type Props = {
   handleClose: () => void;
   isMobile?: boolean;
-  handleFormChange?: () => void;
+  handleFormOnChange?: () => void;
   isClosable?: boolean;
   handleTemplateSelect?: () => void;
+  showActionButtons?: boolean;
 };
 
 function ProjectCreateHeader(props: Props) {
-  const { handleClose, isMobile = false, handleFormChange, isClosable = true, handleTemplateSelect } = props;
+  const {
+    handleClose,
+    isMobile = false,
+    handleFormOnChange,
+    isClosable = true,
+    handleTemplateSelect,
+    showActionButtons = true,
+  } = props;
   const { watch, control, setValue } = useFormContext<IProject>();
   const { t } = useTranslation();
   // derived values
@@ -40,9 +48,11 @@ function ProjectCreateHeader(props: Props) {
         alt={t("project_cover_image_alt")}
         className="absolute left-0 top-0 h-full w-full rounded-lg"
       />
-      <div className="absolute left-2.5 top-2.5">
-        <ProjectTemplateSelect onClick={handleTemplateSelect} />
-      </div>
+      {showActionButtons && (
+        <div className="absolute left-2.5 top-2.5">
+          <ProjectTemplateSelect onClick={handleTemplateSelect} />
+        </div>
+      )}
       {isClosable && (
         <div className="absolute right-2 top-2 p-2">
           <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
@@ -59,7 +69,7 @@ function ProjectCreateHeader(props: Props) {
               label={t("change_cover")}
               onChange={(data) => {
                 onChange(data);
-                handleFormChange?.();
+                handleFormOnChange?.();
               }}
               control={control}
               value={value ?? null}
@@ -101,7 +111,7 @@ function ProjectCreateHeader(props: Props) {
                   shouldDirty: true,
                 });
                 onChange(newLogoProps);
-                handleFormChange?.();
+                handleFormOnChange?.();
                 setIsOpen(false);
               }}
               defaultIconColor={value?.in_use && value.in_use === "icon" ? value.icon?.color : undefined}