@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/components/table/save-view-dropdown/save-view-dropdown.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react"
+import {
+  DropdownMenu,
+  Button,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  Plus,
+  CloudArrowUp,
+  SquarePlusMicro,
+} from "@medusajs/icons"
+
+interface SaveViewDropdownProps {
+  isDefaultView: boolean
+  currentViewId?: string | null
+  currentViewName?: string | null
+  onSaveAsDefault?: () => void
+  onUpdateExisting?: () => void
+  onSaveAsNew?: () => void
+}
+
+export const SaveViewDropdown: React.FC<SaveViewDropdownProps> = ({
+  isDefaultView,
+  currentViewId,
+  currentViewName,
+  onSaveAsDefault,
+  onUpdateExisting,
+  onSaveAsNew,
+}) => {
+  const prompt = usePrompt()
+
+  const handleSaveAsDefault = async () => {
+    const result = await prompt({
+      title: "Save as system default",
+      description: "This will save the current configuration as the system default. All users will see this configuration by default unless they have their own personal views. Are you sure?",
+      confirmText: "Save as default",
+      cancelText: "Cancel",
+    })
+
+    if (result && onSaveAsDefault) {
+      onSaveAsDefault()
+    }
+  }
+
+  const handleUpdateExisting = async () => {
+    const result = await prompt({
+      title: "Update existing view",
+      description: `Update "${currentViewName}" with the current configuration?`,
+      confirmText: "Update",
+      cancelText: "Cancel",
+    })
+
+    if (result && onUpdateExisting) {
+      onUpdateExisting()
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="secondary" size="small">
+          Save
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {isDefaultView && onSaveAsDefault && (
+          <DropdownMenu.Item onClick={handleSaveAsDefault}>
+            <CloudArrowUp className="h-4 w-4" />
+            Save as system default
+          </DropdownMenu.Item>
+        )}
+        {!isDefaultView && currentViewId && onUpdateExisting && (
+          <DropdownMenu.Item onClick={handleUpdateExisting}>
+            <CloudArrowUp className="h-4 w-4" />
+            Update "{currentViewName}"
+          </DropdownMenu.Item>
+        )}
+        {onSaveAsNew && (
+          <DropdownMenu.Item onClick={onSaveAsNew}>
+            <SquarePlusMicro className="h-4 w-4" />
+            Save as new view
+          </DropdownMenu.Item>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

package/src/components/table/view-selector/index.ts

@@ -0,0 +1,2 @@
+export * from "./view-selector"
+export * from "./view-pills"

package/src/components/table/view-selector/view-pills.tsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useState, useRef } from "react"
+import {
+  Badge,
+  usePrompt,
+  toast,
+  DropdownMenu,
+} from "@medusajs/ui"
+import {
+  Trash,
+  PencilSquare,
+  ArrowUturnLeft,
+} from "@medusajs/icons"
+import { useViewConfigurations, useViewConfiguration } from "../../../hooks/use-view-configurations"
+import type { ViewConfiguration } from "../../../hooks/use-view-configurations"
+import { SaveViewDialog } from "../save-view-dialog"
+
+interface ViewPillsProps {
+  entity: string
+  currentColumns?: {
+    visible: string[]
+    order: string[]
+  }
+  currentConfiguration?: {
+    filters?: Record<string, unknown>
+    sorting?: { id: string; desc: boolean } | null
+    search?: string
+  }
+}
+
+export const ViewPills: React.FC<ViewPillsProps> = ({
+  entity,
+  currentColumns,
+  currentConfiguration,
+}) => {
+  const {
+    listViews,
+    activeView,
+    setActiveView,
+    isDefaultViewActive,
+  } = useViewConfigurations(entity)
+
+  const views = listViews?.view_configurations || []
+
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [editingView, setEditingView] = useState<ViewConfiguration | null>(null)
+  const [contextMenuOpen, setContextMenuOpen] = useState<string | null>(null)
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+  const [deletingViewId, setDeletingViewId] = useState<string | null>(null)
+  const prompt = usePrompt()
+
+  const currentActiveView = activeView?.view_configuration || null
+
+  // Get delete mutation for the current deleting view
+  const { deleteView } = useViewConfiguration(entity, deletingViewId || '')
+
+  const handleViewSelect = async (viewId: string | null) => {
+    try {
+      if (viewId === null) {
+        // Select default view - clear the active view
+        await setActiveView.mutateAsync(null)
+        return
+      }
+
+      const view = views.find(v => v.id === viewId)
+      if (view) {
+        await setActiveView.mutateAsync(viewId)
+      }
+    } catch (error) {
+      console.error("Error in handleViewSelect:", error)
+    }
+  }
+
+  const handleDeleteView = async (view: ViewConfiguration) => {
+    const result = await prompt({
+      title: "Delete view",
+      description: `Are you sure you want to delete "${view.name}"? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      setDeletingViewId(view.id)
+      // The actual deletion will happen in the effect below
+    }
+  }
+
+  // Handle deletion when deletingViewId is set
+  useEffect(() => {
+    if (deletingViewId && deleteView.mutateAsync) {
+      deleteView.mutateAsync().then(() => {
+        setDeletingViewId(null)
+      }).catch(() => {
+        setDeletingViewId(null)
+        // Error is handled by the hook
+      })
+    }
+  }, [deletingViewId, deleteView.mutateAsync])
+
+  const handleEditView = (view: ViewConfiguration) => {
+    setEditingView(view)
+    setSaveDialogOpen(true)
+  }
+
+  const handleResetSystemDefault = async (systemDefaultView: ViewConfiguration) => {
+    const result = await prompt({
+      title: "Reset system default",
+      description: "This will delete the saved system default and revert to the original code-level defaults. All users will be affected. Are you sure?",
+      confirmText: "Reset",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      setDeletingViewId(systemDefaultView.id)
+      // The actual deletion will happen in the effect above
+    }
+  }
+
+  const systemDefaultView = views.find(v => v.is_system_default)
+  const personalViews = views.filter(v => !v.is_system_default)
+
+  // Determine if we're showing default
+  const isDefaultActive = isDefaultViewActive
+  const defaultLabel = "Default"
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {/* Default view badge (either code-level or system default) */}
+        <div className="relative inline-block">
+          <Badge
+            color={isDefaultActive ? "blue" : "grey"}
+            size="xsmall"
+            className="cursor-pointer"
+            onClick={() => handleViewSelect(null)}
+            onContextMenu={(e) => {
+              e.preventDefault()
+              if (systemDefaultView) {
+                setContextMenuPosition({ x: e.clientX, y: e.clientY })
+                setContextMenuOpen('default')
+              }
+            }}
+          >
+            {defaultLabel}
+          </Badge>
+          {systemDefaultView && contextMenuOpen === 'default' && (
+            <DropdownMenu
+              open={true}
+              onOpenChange={(open) => {
+                if (!open) setContextMenuOpen(null)
+              }}
+            >
+              <DropdownMenu.Trigger asChild>
+                <div
+                  style={{
+                    position: 'fixed',
+                    left: contextMenuPosition.x,
+                    top: contextMenuPosition.y,
+                    width: 0,
+                    height: 0
+                  }}
+                />
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content align="start" sideOffset={0}>
+                <DropdownMenu.Item
+                  onClick={() => {
+                    handleResetSystemDefault(systemDefaultView)
+                    setContextMenuOpen(null)
+                  }}
+                  className="flex items-center gap-x-2"
+                >
+                  <ArrowUturnLeft className="text-ui-fg-subtle" />
+                  <span>Reset to code defaults</span>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu>
+          )}
+        </div>
+
+        {/* Separator */}
+        {personalViews.length > 0 && <div className="text-ui-fg-muted">|</div>}
+
+        {/* Personal view badges */}
+        {personalViews.map((view) => (
+          <div key={view.id} className="relative inline-block">
+            <Badge
+              color={currentActiveView?.id === view.id ? "blue" : "grey"}
+              size="xsmall"
+              className="cursor-pointer"
+              onClick={() => handleViewSelect(view.id)}
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setContextMenuPosition({ x: e.clientX, y: e.clientY })
+                setContextMenuOpen(view.id)
+              }}
+            >
+              {view.name}
+            </Badge>
+            {contextMenuOpen === view.id && (
+              <DropdownMenu
+                open={true}
+                onOpenChange={(open) => {
+                  if (!open) setContextMenuOpen(null)
+                }}
+              >
+                <DropdownMenu.Trigger asChild>
+                  <div
+                    style={{
+                      position: 'fixed',
+                      left: contextMenuPosition.x,
+                      top: contextMenuPosition.y,
+                      width: 0,
+                      height: 0
+                    }}
+                  />
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="start" sideOffset={0}>
+                  <DropdownMenu.Item
+                    onClick={() => {
+                      handleEditView(view)
+                      setContextMenuOpen(null)
+                    }}
+                    className="flex items-center gap-x-2"
+                  >
+                    <PencilSquare className="text-ui-fg-subtle" />
+                    <span>Edit name</span>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    onClick={() => {
+                      handleDeleteView(view)
+                      setContextMenuOpen(null)
+                    }}
+                    className="flex items-center gap-x-2 text-ui-fg-error"
+                  >
+                    <Trash />
+                    <span>Delete</span>
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu>
+            )}
+          </div>
+        ))}
+
+      </div>
+
+      {saveDialogOpen && (
+        <SaveViewDialog
+          entity={entity}
+          currentColumns={currentColumns}
+          currentConfiguration={currentConfiguration}
+          editingView={editingView}
+          onClose={() => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+          }}
+          onSaved={async (newView) => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+            toast.success(`View "${newView.name}" saved successfully`)
+            // The view is already set as active in SaveViewDialog
+          }}
+        />
+      )}
+    </>
+  )
+}

package/src/components/table/view-selector/view-selector.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from "react"
+import { 
+  Select,
+  Button,
+  Tooltip,
+  DropdownMenu,
+  Badge,
+  usePrompt,
+  toast,
+} from "@medusajs/ui"
+import { 
+  Eye,
+  EyeSlash,
+  Plus,
+  Trash,
+  PencilSquare,
+  Star,
+  CheckCircleSolid,
+  ArrowUturnLeft,
+} from "@medusajs/icons"
+import { useViewConfigurations, useViewConfiguration } from "../../../hooks/use-view-configurations"
+import type { ViewConfiguration } from "../../../hooks/use-view-configurations"
+import { SaveViewDialog } from "../save-view-dialog"
+
+interface ViewSelectorProps {
+  entity: string
+  onViewChange?: (view: ViewConfiguration | null) => void
+  currentColumns?: {
+    visible: string[]
+    order: string[]
+  }
+}
+
+export const ViewSelector: React.FC<ViewSelectorProps> = ({
+  entity,
+  onViewChange,
+  currentColumns,
+}) => {
+  const {
+    listViews,
+    activeView,
+    setActiveView,
+    isDefaultViewActive,
+  } = useViewConfigurations(entity)
+
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [editingView, setEditingView] = useState<ViewConfiguration | null>(null)
+  const [deletingViewId, setDeletingViewId] = useState<string | null>(null)
+  const prompt = usePrompt()
+
+  const views = listViews.data?.view_configurations || []
+  const currentActiveView = activeView.data?.view_configuration || null
+
+  // Get delete mutation for the current deleting view
+  const { deleteView } = useViewConfiguration(entity, deletingViewId || '')
+
+  // Load views and active view
+  useEffect(() => {
+    if (activeView.isSuccess && onViewChange) {
+      onViewChange(currentActiveView)
+    }
+  }, [activeView.isSuccess, currentActiveView, onViewChange])
+
+  const handleViewSelect = async (viewId: string) => {
+    const view = views.find(v => v.id === viewId)
+    if (view) {
+      await setActiveView.mutateAsync(viewId)
+      if (onViewChange) {
+        onViewChange(view)
+      }
+    }
+  }
+
+  const handleDeleteView = async (view: ViewConfiguration) => {
+    const result = await prompt({
+      title: "Delete view",
+      description: `Are you sure you want to delete "${view.name}"? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      setDeletingViewId(view.id)
+    }
+  }
+
+  // Handle deletion when deletingViewId is set
+  useEffect(() => {
+    if (deletingViewId && deleteView.mutateAsync) {
+      deleteView.mutateAsync().then(() => {
+        if (currentActiveView?.id === deletingViewId) {
+          if (onViewChange) {
+            onViewChange(null)
+          }
+        }
+        setDeletingViewId(null)
+      }).catch(() => {
+        setDeletingViewId(null)
+      })
+    }
+  }, [deletingViewId, deleteView.mutateAsync, currentActiveView?.id, onViewChange])
+
+  const handleSaveView = () => {
+    setSaveDialogOpen(true)
+    setEditingView(null)
+  }
+
+  const handleEditView = (view: ViewConfiguration) => {
+    setEditingView(view)
+    setSaveDialogOpen(true)
+  }
+
+  const handleResetSystemDefault = async (systemDefaultView: ViewConfiguration) => {
+    const result = await prompt({
+      title: "Reset system default",
+      description: "This will delete the saved system default and revert to the original code-level defaults. All users will be affected. Are you sure?",
+      confirmText: "Reset",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      setDeletingViewId(systemDefaultView.id)
+    }
+  }
+
+  const systemDefaultView = views.find(v => v.is_system_default)
+  const personalViews = views.filter(v => !v.is_system_default)
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button variant="secondary" size="small">
+              <Eye className="h-4 w-4" />
+              {currentActiveView ? currentActiveView.name : "Default View"}
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content className="w-[260px]">
+            {systemDefaultView && (
+              <>
+                <DropdownMenu.Label>System Default</DropdownMenu.Label>
+                <DropdownMenu.Item
+                  onClick={() => handleViewSelect(systemDefaultView.id)}
+                  className="justify-between group"
+                >
+                  <span className="flex items-center gap-2">
+                    <Star className="h-4 w-4" />
+                    {systemDefaultView.name || "System Default"}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    {currentActiveView?.id === systemDefaultView.id && (
+                      <CheckCircleSolid className="h-4 w-4 text-ui-fg-positive" />
+                    )}
+                    <div className="opacity-0 group-hover:opacity-100">
+                      <Tooltip content="Reset to code defaults">
+                        <Button
+                          variant="transparent"
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            handleResetSystemDefault(systemDefaultView)
+                          }}
+                        >
+                          <ArrowUturnLeft className="h-3 w-3" />
+                        </Button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </DropdownMenu.Item>
+                {personalViews.length > 0 && <DropdownMenu.Separator />}
+              </>
+            )}
+
+            {personalViews.length > 0 && (
+              <>
+                <DropdownMenu.Label>Personal Views</DropdownMenu.Label>
+                {personalViews.map((view) => (
+                  <DropdownMenu.Item
+                    key={view.id}
+                    onClick={() => handleViewSelect(view.id)}
+                    className="justify-between group"
+                  >
+                    <span className="flex-1">{view.name}</span>
+                    <div className="flex items-center gap-1">
+                      {currentActiveView?.id === view.id && (
+                        <CheckCircleSolid className="h-4 w-4 text-ui-fg-positive" />
+                      )}
+                      <div className="opacity-0 group-hover:opacity-100 flex items-center gap-1">
+                        <Tooltip content="Edit view">
+                          <Button
+                            variant="transparent"
+                            size="small"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleEditView(view)
+                            }}
+                          >
+                            <PencilSquare className="h-3 w-3" />
+                          </Button>
+                        </Tooltip>
+                        <Tooltip content="Delete view">
+                          <Button
+                            variant="transparent"
+                            size="small"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleDeleteView(view)
+                            }}
+                          >
+                            <Trash className="h-3 w-3" />
+                          </Button>
+                        </Tooltip>
+                      </div>
+                    </div>
+                  </DropdownMenu.Item>
+                ))}
+              </>
+            )}
+
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item
+              onClick={handleSaveView}
+              className="text-ui-fg-interactive"
+            >
+              <Plus className="h-4 w-4" />
+              Save current view
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </div>
+
+      {saveDialogOpen && (
+        <SaveViewDialog
+          entity={entity}
+          currentColumns={currentColumns}
+          editingView={editingView}
+          onClose={() => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+          }}
+          onSaved={(newView) => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+            if (onViewChange) {
+              onViewChange(newView)
+            }
+          }}
+        />
+      )}
+    </>
+  )
+}

package/src/components/utilities/i18n/i18n.tsx

@@ -3,12 +3,16 @@ import LanguageDetector from "i18next-browser-languagedetector"
 import { initReactI18next } from "react-i18next"
 
 import { defaultI18nOptions } from "../../../i18n/config"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const I18n = () => {
+  const { getI18nResources } = useExtension()
+
   if (i18n.isInitialized) {
     return null
   }
 
+  const resources = getI18nResources()
   i18n
     .use(
       new LanguageDetector(null, {
@@ -17,7 +21,11 @@ export const I18n = () => {
       })
     )
     .use(initReactI18next)
-    .init(defaultI18nOptions)
+    .init({
+      ...defaultI18nOptions,
+      resources,
+      supportedLngs: Object.keys(resources),
+    })
 
   return null
 }