From f5c20ae9339e379ce398aca2d4d8b419708b614a Mon Sep 17 00:00:00 2001
From: olivermrbl <oliver@mrbltech.com>
Date: Fri, 31 Mar 2023 11:06:30 +0200
Subject: [PATCH 1/3] fix(admin-ui): Always show categories in product page

---
 .../forms/product/organize-form/index.tsx     | 12 +++++---
 .../components/multiselect/index.tsx          | 28 ++++++++++++-------
 .../domain/product-categories/pages/index.tsx |  4 +--
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/admin-ui/ui/src/components/forms/product/organize-form/index.tsx b/packages/admin-ui/ui/src/components/forms/product/organize-form/index.tsx
index 01145cafe1fbd..462b9c5ceb494 100644
--- a/packages/admin-ui/ui/src/components/forms/product/organize-form/index.tsx
+++ b/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) &&
-      categoriesOptions?.length ? (
+      {isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) ? (
         <>
           <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}
diff --git a/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx b/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx
index d943de88f1405..a5d01b93786ad 100644
--- a/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx
+++ b/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 useOutsideClick from "../../../../hooks/use-outside-click"
+import { sum } from "lodash"
+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 { sum } from "lodash"
+import UTurnIcon from "../../../../components/fundamentals/icons/u-turn-icon"
+import useOutsideClick from "../../../../hooks/use-outside-click"
+import useToggleState from "../../../../hooks/use-toggle-state"
 
 /**
  * Types
@@ -34,6 +34,7 @@ const ToolTipContent = (props: { list: string[] }) => {
 }
 
 type InputProps = {
+  placeholder?: string
   isOpen: boolean
   selected: Record<string, true>
   options: NestedMultiselectOption[]
@@ -45,7 +46,8 @@ type InputProps = {
  * Multiselect input area
  */
 function Input(props: InputProps) {
-  const { isOpen, selected, openPopup, resetSelected, options } = props
+  const { placeholder, isOpen, selected, openPopup, resetSelected, options } =
+    props
   const selectedCount = Object.keys(selected).length
 
   const selectedOption = useMemo(() => {
@@ -84,7 +86,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 +252,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 +360,9 @@ function NestedMultiselect(props: NestedMultiselectProps) {
         resetSelected={resetSelected}
         selected={selected}
         options={options}
+        placeholder={placeholder}
       />
-      {isOpen && (
+      {isOpen && !!options?.length && (
         <Popup
           pop={pop}
           selected={selected}
diff --git a/packages/admin-ui/ui/src/domain/product-categories/pages/index.tsx b/packages/admin-ui/ui/src/domain/product-categories/pages/index.tsx
index 7f8ee24fbc9f7..7d8afb9a5c1d6 100644
--- a/packages/admin-ui/ui/src/domain/product-categories/pages/index.tsx
+++ b/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"
 

From b3b1210daa4e04702e89a35bc821b5c7f5d19c09 Mon Sep 17 00:00:00 2001
From: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Date: Fri, 31 Mar 2023 11:44:42 +0200
Subject: [PATCH 2/3] Create .changeset/tasty-timers-drive.md

---
 .changeset/tasty-timers-drive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tasty-timers-drive.md

diff --git a/.changeset/tasty-timers-drive.md b/.changeset/tasty-timers-drive.md
new file mode 100644
index 0000000000000..890c4fe99eafa
--- /dev/null
+++ b/.changeset/tasty-timers-drive.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Always show categories in product page

From 308f0fe1c4c43143399c64bc0ba0f5d4a3caba02 Mon Sep 17 00:00:00 2001
From: olivermrbl <oliver@mrbltech.com>
Date: Fri, 31 Mar 2023 11:55:54 +0200
Subject: [PATCH 3/3] add disabled classes

---
 .../components/multiselect/index.tsx          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx b/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx
index a5d01b93786ad..4accd5a1f69d3 100644
--- a/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx
+++ b/packages/admin-ui/ui/src/domain/categories/components/multiselect/index.tsx
@@ -35,6 +35,7 @@ const ToolTipContent = (props: { list: string[] }) => {
 
 type InputProps = {
   placeholder?: string
+  disabled?: boolean
   isOpen: boolean
   selected: Record<string, true>
   options: NestedMultiselectOption[]
@@ -46,8 +47,15 @@ type InputProps = {
  * Multiselect input area
  */
 function Input(props: InputProps) {
-  const { placeholder, isOpen, selected, openPopup, resetSelected, options } =
-    props
+  const {
+    placeholder,
+    isOpen,
+    selected,
+    openPopup,
+    resetSelected,
+    options,
+    disabled,
+  } = props
   const selectedCount = Object.keys(selected).length
 
   const selectedOption = useMemo(() => {
@@ -67,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 && (
@@ -361,6 +373,7 @@ function NestedMultiselect(props: NestedMultiselectProps) {
         selected={selected}
         options={options}
         placeholder={placeholder}
+        disabled={!options?.length}
       />
       {isOpen && !!options?.length && (
         <Popup