feat(dashboard): Regions domain (#6534)

**What**
- Implements new Region domain design
- Adds new SplitView component for managing adding nested relations in FocusModals, eg. adding countries to a region.
- Adds new Combobox component for multi select fields in forms

**medusajs/ui**
- Fix styling of RadioGroup.Choicebox component

CLOSES CORE-1650, CORE-1671

packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx

@@ -181,6 +181,7 @@ export const DataTableRoot = <TData,>({
             <Table.Body className="border-b-0">
               {table.getRowModel().rows.map((row) => {
                 const to = navigateTo ? navigateTo(row) : undefined
+                const isRowDisabled = hasSelect && !row.getCanSelect()
                 return (
                   <Table.Row
                     key={row.id}
@@ -192,6 +193,7 @@ export const DataTableRoot = <TData,>({
                         "cursor-pointer": !!to,
                         "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
                           row.getIsSelected(),
+                        "bg-ui-bg-subtle hover:bg-ui-bg-subtle": isRowDisabled,
                       }
                     )}
                     onClick={to ? () => navigate(to) : undefined}
@@ -220,6 +222,8 @@ export const DataTableRoot = <TData,>({
                               isStickyCell && hasSelect && !isSelectCell,
                             "after:bg-ui-border-base":
                               showStickyBorder && isStickyCell && !isSelectCell,
+                            "bg-ui-bg-subtle hover:bg-ui-bg-subtle":
+                              isRowDisabled,
                           })}
                         >
                           {flexRender(

packages/admin-next/dashboard/src/components/table/table-cells/region/countries-cell/countries-cell.tsx

@@ -1,5 +1,4 @@
 import { Country } from "@medusajs/medusa"
-import { Tooltip } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { PlaceholderCell } from "../../common/placeholder-cell"
 
@@ -19,28 +18,21 @@ export const CountriesCell = ({ countries }: CountriesCellProps) => {
     .map((c) => c.display_name)
     .join(", ")
 
-  const additionalCountries = countries.slice(2).map((c) => c.display_name)
+  const additionalCountries = countries
+    .slice(2)
+    .map((c) => c.display_name).length
+
+  const text = `${displayValue}${
+    additionalCountries > 0
+      ? ` ${t("general.plusCountMore", {
+          count: additionalCountries,
+        })}`
+      : ""
+  }`
 
   return (
-    <div className="flex size-full items-center gap-x-1">
-      <span>{displayValue}</span>
-      {additionalCountries.length > 0 && (
-        <Tooltip
-          content={
-            <ul>
-              {additionalCountries.map((c) => (
-                <li key={c}>{c}</li>
-              ))}
-            </ul>
-          }
-        >
-          <span>
-            {t("general.plusCountMore", {
-              count: additionalCountries.length,
-            })}
-          </span>
-        </Tooltip>
-      )}
+    <div className="flex size-full items-center overflow-hidden">
+      <span className="truncate">{text}</span>
     </div>
   )
 }

packages/admin-next/dashboard/src/components/table/table-cells/region/fulfillment-providers-cell/fulfillment-providers-cell.tsx

@@ -1,6 +1,6 @@
 import { FulfillmentProvider } from "@medusajs/medusa"
-import { Tooltip } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
+import { formatProvider } from "../../../../../lib/format-provider"
 import { PlaceholderCell } from "../../common/placeholder-cell"
 
 type FulfillmentProvidersCellProps = {
@@ -18,31 +18,22 @@ export const FulfillmentProvidersCell = ({
 
   const displayValue = fulfillmentProviders
     .slice(0, 2)
-    .map((p) => p.id)
+    .map((p) => formatProvider(p.id))
     .join(", ")
 
-  const additionalProviders = fulfillmentProviders.slice(2).map((c) => c.id)
+  const additionalProviders = fulfillmentProviders.slice(2).length
+
+  const text = `${displayValue}${
+    additionalProviders > 0
+      ? ` ${t("general.plusCountMore", {
+          count: additionalProviders,
+        })}`
+      : ""
+  }`
 
   return (
-    <div className="flex size-full items-center gap-x-1">
-      <span>{displayValue}</span>
-      {additionalProviders.length > 0 && (
-        <Tooltip
-          content={
-            <ul>
-              {additionalProviders.map((c) => (
-                <li key={c}>{c}</li>
-              ))}
-            </ul>
-          }
-        >
-          <span>
-            {t("general.plusCountMore", {
-              count: additionalProviders.length,
-            })}
-          </span>
-        </Tooltip>
-      )}
+    <div className="flex size-full items-center overflow-hidden">
+      <span className="truncate">{text}</span>
     </div>
   )
 }
@@ -51,8 +42,8 @@ export const FulfillmentProvidersHeader = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex size-full items-center">
-      <span>{t("fields.fulfillmentProviders")}</span>
+    <div className="flex size-full items-center overflow-hidden">
+      <span className="truncate">{t("fields.fulfillmentProviders")}</span>
     </div>
   )
 }

packages/admin-next/dashboard/src/components/table/table-cells/region/payment-providers-cell/payment-providers-cell.tsx

@@ -1,6 +1,6 @@
 import { PaymentProvider } from "@medusajs/medusa"
-import { Tooltip } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
+import { formatProvider } from "../../../../../lib/format-provider"
 import { PlaceholderCell } from "../../common/placeholder-cell"
 
 type PaymentProvidersCellProps = {
@@ -18,31 +18,22 @@ export const PaymentProvidersCell = ({
 
   const displayValue = paymentProviders
     .slice(0, 2)
-    .map((p) => p.id)
+    .map((p) => formatProvider(p.id))
     .join(", ")
 
-  const additionalProviders = paymentProviders.slice(2).map((c) => c.id)
+  const additionalProviders = paymentProviders.slice(2).length
+
+  const text = `${displayValue}${
+    additionalProviders > 0
+      ? ` ${t("general.plusCountMore", {
+          count: additionalProviders,
+        })}`
+      : ""
+  }`
 
   return (
-    <div className="flex size-full items-center gap-x-1">
-      <span>{displayValue}</span>
-      {additionalProviders.length > 0 && (
-        <Tooltip
-          content={
-            <ul>
-              {additionalProviders.map((c) => (
-                <li key={c}>{c}</li>
-              ))}
-            </ul>
-          }
-        >
-          <span>
-            {t("general.plusCountMore", {
-              count: additionalProviders.length,
-            })}
-          </span>
-        </Tooltip>
-      )}
+    <div className="flex size-full items-center overflow-hidden">
+      <span className="truncate">{text}</span>
     </div>
   )
 }
@@ -51,8 +42,8 @@ export const PaymentProvidersHeader = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex size-full items-center">
-      <span>{t("fields.paymentProviders")}</span>
+    <div className="flex size-full items-center overflow-hidden">
+      <span className="truncate">{t("fields.paymentProviders")}</span>
     </div>
   )
 }