fix(admin-ui): Always show categories in product page (#3655)

* fix(admin-ui): Always show categories in product page

* Create .changeset/tasty-timers-drive.md

* add disabled classes

.changeset/tasty-timers-drive.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Always show categories in product page

packages/admin-ui/ui/src/components/forms/product/organize-form/index.tsx

@@ -2,14 +2,14 @@ import { Controller } from "react-hook-form"
 import NestedMultiselect from "../../../../domain/categories/components/multiselect"
 import {
   FeatureFlag,
-  useFeatureFlag,
+  useFeatureFlag
 } from "../../../../providers/feature-flag-provider"
 import { Option } from "../../../../types/shared"
 import { NestedForm } from "../../../../utils/nested-form"
 import InputHeader from "../../../fundamentals/input-header"
 import {
   NextCreateableSelect,
-  NextSelect,
+  NextSelect
 } from "../../../molecules/select/next-select"
 import TagInput from "../../../molecules/tag-input"
 import useOrganizeData from "./use-organize-data"
@@ -86,8 +86,7 @@ const OrganizeForm = ({ form }: Props) => {
         />
       </div>
 
-      {isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) &&
+      {isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) ? (
-      categoriesOptions?.length ? (
         <>
           <InputHeader label="Categories" className="mb-2" />
           <Controller
@@ -101,6 +100,11 @@ const OrganizeForm = ({ form }: Props) => {
 
               return (
                 <NestedMultiselect
+                  placeholder={
+                    !!categoriesOptions?.length
+                      ? "Choose categories"
+                      : "No categories available"
+                  }
                   onSelect={onChange}
                   options={categoriesOptions}
                   initiallySelected={initiallySelected}

packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo, useState } from "react"
 import clsx from "clsx"
+import React, { useEffect, useMemo, useState } from "react"
 
-import useToggleState from "../../../../hooks/use-toggle-state"
+import { sum } from "lodash"
-import useOutsideClick from "../../../../hooks/use-outside-click"
+import Tooltip from "../../../../components/atoms/tooltip"
 import CheckIcon from "../../../../components/fundamentals/icons/check-icon"
 import ChevronDownIcon from "../../../../components/fundamentals/icons/chevron-down"
 import ChevronRightIcon from "../../../../components/fundamentals/icons/chevron-right-icon"
-import UTurnIcon from "../../../../components/fundamentals/icons/u-turn-icon"
 import CrossIcon from "../../../../components/fundamentals/icons/cross-icon"
-import Tooltip from "../../../../components/atoms/tooltip"
+import UTurnIcon from "../../../../components/fundamentals/icons/u-turn-icon"
-import { sum } from "lodash"
+import useOutsideClick from "../../../../hooks/use-outside-click"
+import useToggleState from "../../../../hooks/use-toggle-state"
 
 /**
  * Types
@@ -34,6 +34,8 @@ const ToolTipContent = (props: { list: string[] }) => {
 }
 
 type InputProps = {
+  placeholder?: string
+  disabled?: boolean
   isOpen: boolean
   selected: Record<string, true>
   options: NestedMultiselectOption[]
@@ -45,7 +47,15 @@ type InputProps = {
  * Multiselect input area
  */
 function Input(props: InputProps) {
-  const { isOpen, selected, openPopup, resetSelected, options } = props
+  const {
+    placeholder,
+    isOpen,
+    selected,
+    openPopup,
+    resetSelected,
+    options,
+    disabled,
+  } = props
   const selectedCount = Object.keys(selected).length
 
   const selectedOption = useMemo(() => {
@@ -65,7 +75,11 @@ function Input(props: InputProps) {
   return (
     <div
       onClick={openPopup}
-      className="rounded-rounded border-grey-20 bg-grey-5 px-small focus-within:border-violet-60 focus-within:shadow-cta flex h-10 items-center justify-between border"
+      className={clsx(
+        "rounded-rounded border-grey-20 bg-grey-5 px-small focus-within:border-violet-60 focus-within:shadow-cta flex h-10 items-center justify-between border",
+        { "opacity-50": disabled },
+        { "pointer-events-none": disabled }
+      )}
     >
       <div className="flex items-center gap-1">
         {!!selectedCount && (
@@ -84,7 +98,11 @@ function Input(props: InputProps) {
             </span>
           </Tooltip>
         )}
-        <span>Categories</span>
+        {selectedCount === 0 ? (
+          <span className="text-grey-50">
+            {placeholder ? placeholder : "Choose categories"}
+          </span>
+        ) : null}
       </div>
       <ChevronDownIcon
         size={16}
@@ -246,13 +264,14 @@ type NestedMultiselectProps = {
   options: NestedMultiselectOption[]
   onSelect: (values: string[]) => void
   initiallySelected?: Record<string, true>
+  placeholder?: string
 }
 
 /**
  * Nested multiselect container
  */
 function NestedMultiselect(props: NestedMultiselectProps) {
-  const { options, initiallySelected, onSelect } = props
+  const { options, initiallySelected, onSelect, placeholder } = props
   const [isOpen, openPopup, closePopup] = useToggleState(false)
 
   const rootRef = React.useRef<HTMLDivElement>(null)
@@ -353,8 +372,10 @@ function NestedMultiselect(props: NestedMultiselectProps) {
         resetSelected={resetSelected}
         selected={selected}
         options={options}
+        placeholder={placeholder}
+        disabled={!options?.length}
       />
-      {isOpen && (
+      {isOpen && !!options?.length && (
         <Popup
           pop={pop}
           selected={selected}

packages/admin-ui/ui/src/domain/product-categories/pages/index.tsx

@@ -3,10 +3,10 @@ import { createContext, useState } from "react"
 import { ProductCategory } from "@medusajs/medusa"
 import { useAdminProductCategories } from "medusa-react"
 
-import useToggleState from "../../../hooks/use-toggle-state"
 import BodyCard from "../../../components/organisms/body-card"
-import CreateProductCategory from "../modals/add-product-category"
+import useToggleState from "../../../hooks/use-toggle-state"
 import ProductCategoriesList from "../components/product-categories-list"
+import CreateProductCategory from "../modals/add-product-category"
 import EditProductCategoriesSideModal from "../modals/edit-product-category"
 import { flattenCategoryTree } from "../utils"