meshery/meshery

[UI] Restructure Phase 5.b.3 - Migrate design modals to shared modal primitives

Open

#18,756 建立於 2026年4月15日

在 GitHub 查看
 (2 留言) (0 反應) (1 負責人)HTML (10,013 star) (3,101 fork)batch import
component/uiframework/reacthelp wantedkind/enhancementlanguage/javascript

描述

Current Behavior

Design-related modal flows are split across separate implementations in ui/components/ExportModal.tsx, ui/components/General/Modals/ImportModal.tsx, and ui/components/General/Modals/PublishModal.tsx.

Desired Behavior

Move design modal flows onto the shared modal foundation from #18751 and relocate them into their target design-domain homes without changing their user-facing behavior.

Implementation

  • Parent issue: #18661
  • Foundation issue: #18751
  • Companion tasks are tracked in the checklist on #18661.
  • Migrate and/or relocate:
    • ui/components/ExportModal.tsx → ui/components/designs/export/ExportDesignModal.tsx as a FormModal-based implementation
    • ui/components/General/Modals/ImportModal.tsx → ui/components/designs/ImportDesignModal.tsx
    • ui/components/General/Modals/PublishModal.tsx → ui/components/designs/PublishDesignModal.tsx
  • Update imports, helpers, and nearby callers so design flows depend on the shared modal API instead of legacy general-purpose modal wrappers.

Acceptance Tests

  • Design import, publish, and export flows render through the shared modal primitives from #18751.
  • The migrated files live under the design-domain locations called out in #18661.
  • Legacy implementations under ui/components/ and ui/components/General/Modals/ are removed after their replacements are wired.

Mockups

N/A. Reuse the behavior and structure described in #18661.

貢獻者指南

技術棧
typescriptreact
領域
frontend
議題類型
refactor
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
active
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
ReactTypeScriptModal componentsMeshery codebase
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
65
研究方向
First, examine the current modal implementations in `ui/components/ExportModal.tsx`, `ui/components/General/Modals/ImportModal.tsx`, and `ui/components/General/Modals/PublishModal.tsx`. Study the shared modal foundation introduced in #18751 to understand the API. Follow the migration plan from parent issue #18661, moving each file to its target location (e.g., `ExportModal.tsx` → `ui/components/designs/export/ExportDesignModal.tsx`) and converting them to use `FormModal` based implementations. Update imports and callers so design flows depend on the shared modal API. Finally, remove the legacy files after verification. No need to alter user facing behavior.