@medusajs/dashboard 2.12.3-preview-20251217123836 → 2.12.3-snapshot-20251216185234

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "2.12.3-preview-20251217123836",
+  "version": "2.12.3-snapshot-20251216185234",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "../../../node_modules/.bin/vite",
@@ -46,10 +46,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "2.12.3-preview-20251217123836",
-    "@medusajs/icons": "2.12.3-preview-20251217123836",
-    "@medusajs/js-sdk": "2.12.3-preview-20251217123836",
-    "@medusajs/ui": "4.0.31-preview-20251217123836",
+    "@medusajs/admin-shared": "2.12.3-snapshot-20251216185234",
+    "@medusajs/icons": "2.12.3-snapshot-20251216185234",
+    "@medusajs/js-sdk": "2.12.3-snapshot-20251216185234",
+    "@medusajs/ui": "4.0.31-snapshot-20251216185234",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -80,10 +80,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "2.12.3-preview-20251217123836",
-    "@medusajs/admin-vite-plugin": "2.12.3-preview-20251217123836",
-    "@medusajs/types": "2.12.3-preview-20251217123836",
-    "@medusajs/ui-preset": "2.12.3-preview-20251217123836"
+    "@medusajs/admin-shared": "2.12.3-snapshot-20251216185234",
+    "@medusajs/admin-vite-plugin": "2.12.3-snapshot-20251216185234",
+    "@medusajs/types": "2.12.3-snapshot-20251216185234",
+    "@medusajs/ui-preset": "2.12.3-snapshot-20251216185234"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/components/data-grid/hooks/use-data-grid-cell.tsx

@@ -128,7 +128,6 @@ export const useDataGridCell = <TData, TValue>({
         case "number":
           return numberCharacterRegex.test(key)
         case "text":
-        case "multiline-text":
           return textCharacterRegex.test(key)
         default:
           // KeyboardEvents should not be forwareded to other types of cells

package/src/components/data-grid/hooks/use-data-grid-form-handlers.tsx

@@ -228,7 +228,6 @@ export function convertArrayToPrimitive(
     case "boolean":
       return values.map(convertToBoolean)
     case "text":
-    case "multiline-text":
       return values.map(covertToString)
     default:
       throw new Error(`Unsupported target type "${type}".`)

package/src/components/data-grid/hooks/use-data-grid-keydown-event.tsx

@@ -211,22 +211,7 @@ export const useDataGridKeydownEvent = <
     [rangeEnd, matrix, getSelectionValues, setSelectionValues, execute]
   )
 
-  const handleSpaceKeyText = useCallback(
-    (anchor: DataGridCoordinates) => {
-      const field = matrix.getCellField(anchor)
-      const input = queryTool?.getInput(anchor)
-
-      if (!field || !input) {
-        return
-      }
-
-      createSnapshot(anchor)
-      input.focus()
-    },
-    [matrix, queryTool, createSnapshot]
-  )
-
-  const handleSpaceKeyNumber = useCallback(
+  const handleSpaceKeyTextOrNumber = useCallback(
     (anchor: DataGridCoordinates) => {
       const field = matrix.getCellField(anchor)
       const input = queryTool?.getInput(anchor)
@@ -318,12 +303,10 @@ export const useDataGridKeydownEvent = <
         case "togglable-number":
           handleSpaceKeyTogglableNumber(anchor)
           break
+        case "number":
         case "text":
         case "multiline-text":
-          handleSpaceKeyText(anchor)
-          break
-        case "number":
-          handleSpaceKeyNumber(anchor)
+          handleSpaceKeyTextOrNumber(anchor)
           break
       }
     },
@@ -332,8 +315,7 @@ export const useDataGridKeydownEvent = <
       isEditing,
       matrix,
       handleSpaceKeyBoolean,
-      handleSpaceKeyText,
-      handleSpaceKeyNumber,
+      handleSpaceKeyTextOrNumber,
       handleSpaceKeyTogglableNumber,
     ]
   )

package/src/dashboard-app/routes/get-route.map.tsx

@@ -1857,10 +1857,6 @@ export function getRouteMap({
                   lazy: () =>
                     import("../../routes/translations/translations-edit"),
                 },
-                {
-                  path: "add-locales",
-                  lazy: () => import("../../routes/translations/add-locales"),
-                },
               ],
             },
             ...(settingsRoutes?.[0]?.children || []),

package/src/hooks/api/translations.tsx

@@ -229,15 +229,6 @@ export const useTranslations = (
   return { ...data, ...rest }
 }
 
-const referenceInvalidationKeysMap = new Map<string, QueryKey>([
-  ["product", productsQueryKeys.lists()],
-  ["product_variant", productVariantQueryKeys.lists()],
-  ["product_category", categoriesQueryKeys.lists()],
-  ["product_collection", collectionsQueryKeys.lists()],
-  ["product_type", productTypesQueryKeys.lists()],
-  ["product_tag", productTagsQueryKeys.lists()],
-])
-
 export const useBatchTranslations = (
   reference: string,
   options?: UseMutationOptions<
@@ -246,30 +237,30 @@ export const useBatchTranslations = (
     HttpTypes.AdminBatchTranslations
   >
 ) => {
-  const mutation = useMutation({
+  const referenceInvalidationKeysMap = new Map<string, QueryKey>([
+    ["product", productsQueryKeys.lists()],
+    ["product_variant", productVariantQueryKeys.lists()],
+    ["product_category", categoriesQueryKeys.lists()],
+    ["product_collection", collectionsQueryKeys.lists()],
+    ["product_type", productTypesQueryKeys.lists()],
+    ["product_tag", productTagsQueryKeys.lists()],
+  ])
+
+  return useMutation({
     mutationFn: (payload: HttpTypes.AdminBatchTranslations) =>
       sdk.admin.translation.batch(payload),
-    ...options,
-  })
-
-  /**
-   * Useful to call the invalidation separately from the batch request and await the refetch finishes.
-   */
-  const invalidateQueries = async () => {
-    await Promise.all([
+    onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
         queryKey: referenceInvalidationKeysMap.get(reference),
-      }),
+      })
       queryClient.invalidateQueries({
         queryKey: translationStatisticsQueryKeys.lists(),
-      }),
-    ])
-  }
+      })
 
-  return {
-    ...mutation,
-    invalidateQueries,
-  }
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
 }
 
 export const useTranslationSettings = (

package/src/i18n/translations/en.json

@@ -2538,7 +2538,7 @@
     "completion": {
       "heading": "Translated fields",
       "translated": "Translated",
-      "toTranslate": "Missing",
+      "toTranslate": "To be translated",
       "footer": "Languages"
     }
   },

package/src/i18n/translations/es.json

@@ -2477,7 +2477,7 @@
     "completion": {
       "heading": "Textos traducidos",
       "translated": "Traducidos",
-      "toTranslate": "Faltantes",
+      "toTranslate": "Por traducir",
       "footer": "Idiomas"
     }
   },

package/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx

@@ -1,16 +1,9 @@
 import { PencilSquare, Language } from "@medusajs/icons"
-import {
-  Container,
-  Heading,
-  IconButton,
-  InlineTip,
-  Text,
-  Tooltip,
-} from "@medusajs/ui"
+import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { IconAvatar } from "../../../../../components/common/icon-avatar"
 import { HttpTypes } from "@medusajs/types"
-import { useCallback, useState } from "react"
+import { useCallback } from "react"
 import { useNavigate } from "react-router-dom"
 
 type ActiveLocalesSectionProps = {
@@ -22,10 +15,9 @@ export const ActiveLocalesSection = ({
 }: ActiveLocalesSectionProps) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const [isHovered, setIsHovered] = useState(false)
 
   const handleManageLocales = useCallback(() => {
-    navigate("/settings/translations/add-locales")
+    navigate("/settings/store/locales")
   }, [navigate])
 
   const renderLocales = useCallback(() => {
@@ -45,43 +37,26 @@ export const ActiveLocalesSection = ({
   return (
     <Container className="flex flex-col p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("translations.activeLocales.heading")}</Heading>
+        <Heading>{t("translations.activeLocales.heading")}</Heading>
         <IconButton variant="transparent" onClick={handleManageLocales}>
           <PencilSquare></PencilSquare>
         </IconButton>
       </div>
       <div className="px-1 pb-1">
         {hasLocales ? (
-          <Tooltip
-            open={isHovered}
-            content={
-              <div className="flex flex-col gap-y-1 p-1">
-                {locales.map((locale) => (
-                  <Text key={locale.code} size="small" weight="plus">
-                    {locale.name}
-                  </Text>
-                ))}
-              </div>
-            }
-          >
-            <Container
-              className="bg-ui-bg-component border-r-1 flex items-center gap-x-4 px-[19px] py-2"
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-            >
-              <IconAvatar className="border-ui-border-base border">
-                <Language />
-              </IconAvatar>
-              <div className="flex flex-col">
-                <Text size="small" weight="plus">
-                  {t("translations.activeLocales.subtitle")}
-                </Text>
-                <Text className="text-ui-fg-subtle" size="small">
-                  {renderLocales()}
-                </Text>
-              </div>
-            </Container>
-          </Tooltip>
+          <Container className="bg-ui-bg-component flex items-center gap-x-4 px-6 py-2">
+            <IconAvatar>
+              <Language />
+            </IconAvatar>
+            <div className="flex flex-col">
+              <Text size="small" weight="plus">
+                {t("translations.activeLocales.subtitle")}
+              </Text>
+              <Text className="text-ui-fg-subtle" size="small">
+                {renderLocales()}
+              </Text>
+            </div>
+          </Container>
         ) : (
           <InlineTip label="Tip">
             {t("translations.activeLocales.noLocalesTip")}

package/src/routes/translations/translation-list/components/translation-list-section/translation-list-section.tsx

@@ -33,11 +33,7 @@ export const TranslationListSection = ({
           <Link
             to={`/settings/translations/edit?reference=${entity.reference}`}
           >
-            <Button
-              variant="secondary"
-              size="small"
-              disabled={!hasLocales || !entity.totalCount}
-            >
+            <Button variant="secondary" size="small" disabled={!hasLocales}>
               Edit
             </Button>
           </Link>

package/src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx

@@ -1,5 +1,5 @@
 import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
-import { Container, Divider, Heading, Text, Tooltip } from "@medusajs/ui"
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -75,210 +75,149 @@ export const TranslationsCompletionSection = ({
     [localeStats]
   )
 
-  const localeStatsCount = useMemo(() => localeStats.length, [localeStats])
-
   return (
-    <Container className="p-0">
-      <div className="flex flex-col gap-y-4 px-6 py-4">
-        <div className="flex items-center justify-between">
-          <Heading level="h2">{t("translations.completion.heading")}</Heading>
-          <Text size="small" weight="plus" className="text-ui-fg-subtle">
-            {translatedCount.toLocaleString()} {t("general.of")}{" "}
-            {totalCount.toLocaleString()}
-          </Text>
-        </div>
+    <Container className="flex flex-col gap-y-3 px-6 py-4">
+      <div className="flex items-center justify-between">
+        <Heading>{t("translations.completion.heading")}</Heading>
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {translatedCount.toLocaleString()} {t("general.of")}{" "}
+          {totalCount.toLocaleString()}
+        </Text>
+      </div>
 
-        <div className="flex h-3 w-full overflow-hidden">
-          {percentage > 0 ? (
-            <>
-              <div
-                className="mr-0.5 h-full rounded-sm transition-all"
-                style={{
-                  width: `${percentage}%`,
-                  backgroundColor: "var(--tag-blue-icon)",
-                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                }}
-              />
-              <div
-                className="h-full flex-1 rounded-sm"
-                style={{
-                  backgroundColor: "var(--tag-blue-border)",
-                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                }}
-              />
-            </>
-          ) : (
+      <div className="flex h-3 w-full overflow-hidden">
+        {percentage > 0 ? (
+          <>
             <div
-              className="h-full w-full rounded-sm"
+              className="mr-0.5 h-full rounded-sm transition-all"
               style={{
-                backgroundColor: "var(--tag-blue-border)",
-                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                width: `${percentage}%`,
+                backgroundColor: "var(--bg-interactive)",
               }}
             />
-          )}
-        </div>
+            <div
+              className="h-full flex-1 rounded-sm"
+              style={{
+                backgroundColor: "var(--bg-interactive)",
+                opacity: 0.3,
+              }}
+            />
+          </>
+        ) : (
+          <div
+            className="h-full w-full rounded-full"
+            style={{
+              backgroundColor: "var(--bg-interactive)",
+              opacity: 0.3,
+            }}
+          />
+        )}
+      </div>
 
-        <div className="flex items-center justify-between">
-          <Text size="small" weight="plus" className="text-ui-fg-subtle">
-            {percentage.toFixed(1)}%
-          </Text>
-          <Text size="small" weight="plus" className="text-ui-fg-subtle">
-            {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
-          </Text>
-        </div>
+      <div className="flex items-center justify-between">
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {percentage.toFixed(1)}%
+        </Text>
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
+        </Text>
       </div>
 
       {localeStats.length > 0 && (
-        <>
-          <Divider variant="dashed" />
-          <div className="flex flex-col gap-y-3 px-6 pb-6 pt-4">
-            <div className="flex h-32 w-full items-end gap-1">
-              {localeStats.map((locale) => {
-                const heightPercent = (locale.total / maxTotal) * 100
-                const translatedPercent =
-                  locale.total > 0
-                    ? (locale.translated / locale.total) * 100
-                    : 0
-
-                return (
-                  <Tooltip
-                    key={locale.code}
-                    open={hoveredLocale === locale.code}
-                    content={
-                      <div className="flex min-w-[150px] flex-col gap-y-1 p-1">
-                        <Text size="small" weight="plus">
-                          {locale.name}
-                        </Text>
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-x-2">
-                            <div
-                              className="h-2 w-2 rounded-full"
-                              style={{
-                                backgroundColor: "var(--tag-blue-icon)",
-                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                              }}
-                            />
-                            <Text
-                              size="small"
-                              weight="plus"
-                              className="text-ui-fg-base"
-                            >
-                              {t("translations.completion.translated")}
-                            </Text>
-                          </div>
-                          <Text
-                            size="small"
-                            weight="plus"
-                            className="text-ui-fg-base"
-                          >
-                            {locale.translated}
-                          </Text>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-x-2">
-                            <div
-                              className="h-2 w-2 rounded-full"
-                              style={{
-                                backgroundColor: "var(--tag-blue-border)",
-                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                              }}
-                            />
-                            <Text
-                              size="small"
-                              weight="plus"
-                              className="text-ui-fg-base"
-                            >
-                              {t("translations.completion.toTranslate")}
-                            </Text>
-                          </div>
+        <div className="mt-4 flex flex-col gap-y-2">
+          <div className="flex h-32 w-full items-end gap-1">
+            {localeStats.map((locale) => {
+              const heightPercent = (locale.total / maxTotal) * 100
+              const translatedPercent =
+                locale.total > 0 ? (locale.translated / locale.total) * 100 : 0
+
+              return (
+                <Tooltip
+                  key={locale.code}
+                  open={hoveredLocale === locale.code}
+                  content={
+                    <div className="flex flex-col gap-y-1 p-1">
+                      <Text size="small" weight="plus">
+                        {locale.name}
+                      </Text>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-x-2">
+                          <div
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: "var(--bg-interactive)" }}
+                          />
                           <Text
                             size="small"
                             weight="plus"
-                            className="text-ui-fg-base"
+                            className="text-ui-fg-subtle"
                           >
-                            {locale.toTranslate}
+                            {t("translations.completion.translated")}
                           </Text>
                         </div>
+                        <Text size="small" weight="plus">
+                          {locale.translated}
+                        </Text>
                       </div>
-                    }
-                  >
-                    <div className="flex h-full flex-1 items-end justify-center">
-                      <div
-                        className="flex w-full min-w-2 max-w-[96px] flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
-                        style={{ height: `${heightPercent}%` }}
-                        onMouseEnter={() => setHoveredLocale(locale.code)}
-                        onMouseLeave={() => setHoveredLocale(null)}
-                      >
-                        {translatedPercent === 0 ? (
-                          <div
-                            className="w-full rounded-sm"
-                            style={{
-                              height: "100%",
-                              backgroundColor: "var(--tag-neutral-bg)",
-                              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                            }}
-                          />
-                        ) : (
-                          <>
-                            <div
-                              className="w-full rounded-sm"
-                              style={{
-                                height: `${100 - translatedPercent}%`,
-                                backgroundColor: "var(--tag-blue-border)",
-                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
-                                minHeight: locale.toTranslate > 0 ? "2px" : "0",
-                              }}
-                            />
-                            {translatedPercent > 0 && (
-                              <div
-                                className="mt-0.5 w-full rounded-sm"
-                                style={{
-                                  height: `${translatedPercent}%`,
-                                  backgroundColor: "var(--tag-blue-icon)",
-                                  boxShadow:
-                                    "inset 0 0 0 0.5px var(--alpha-250)",
-                                  minHeight:
-                                    locale.translated > 0 ? "2px" : "0",
-                                }}
-                              />
-                            )}
-                          </>
-                        )}
+                      <div className="flex items-center gap-x-2">
+                        <div
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: "var(--bg-interactive)",
+                            opacity: 0.3,
+                          }}
+                        />
+                        <Text
+                          size="small"
+                          weight="plus"
+                          className="text-ui-fg-subtle"
+                        >
+                          {t("translations.completion.toTranslate")}
+                        </Text>
+                        <Text size="small" weight="plus">
+                          {locale.toTranslate}
+                        </Text>
                       </div>
                     </div>
-                  </Tooltip>
-                )
-              })}
-            </div>
-            {localeStatsCount < 9 && (
-              <div className="flex w-full gap-1">
-                {localeStats.map((locale) => (
+                  }
+                >
                   <div
-                    key={locale.code}
-                    className="flex flex-1 items-center justify-center"
+                    className="flex min-w-2 flex-1 cursor-pointer flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
+                    style={{ height: `${heightPercent}%` }}
+                    onMouseEnter={() => setHoveredLocale(locale.code)}
+                    onMouseLeave={() => setHoveredLocale(null)}
                   >
-                    <Text
-                      size="xsmall"
-                      weight="plus"
-                      className="text-ui-fg-subtle min-w-2 whitespace-normal break-words text-center leading-tight"
-                    >
-                      {localeStatsCount < 6 ? locale.name : locale.code}
-                    </Text>
+                    <div
+                      className="w-full rounded-t-sm"
+                      style={{
+                        height: `${100 - translatedPercent}%`,
+                        backgroundColor: "var(--bg-interactive)",
+                        opacity: 0.3,
+                        minHeight: locale.toTranslate > 0 ? "2px" : "0",
+                      }}
+                    />
+                    {translatedPercent > 0 && (
+                      <div
+                        className="mt-0.5 w-full rounded-sm"
+                        style={{
+                          height: `${translatedPercent}%`,
+                          backgroundColor: "var(--bg-interactive)",
+                          minHeight: locale.translated > 0 ? "2px" : "0",
+                        }}
+                      />
+                    )}
                   </div>
-                ))}
-              </div>
-            )}
-            {localeStatsCount > 9 && (
-              <Text
-                weight="plus"
-                size="xsmall"
-                className="text-ui-fg-subtle text-center"
-              >
-                {t("translations.completion.footer")}
-              </Text>
-            )}
+                </Tooltip>
+              )
+            })}
           </div>
-        </>
+          <Text
+            size="small"
+            weight="plus"
+            className="text-ui-fg-muted text-center"
+          >
+            {t("translations.completion.footer")}
+          </Text>
+        </div>
       )}
     </Container>
   )