Add a non_dismissable option to the AutoClosingModal component and enable it for checkpoint restoration success messages

- when showing 'auto closing modal' from checkpoint restoration, make it non-dismissable (on_close is not provided)
- when showing 'auto closing modal' from checkpoint restoration, make it non-dismissable (on_close is not provided)
- rename 'disable_close' to 'non-dismissable'
- on `packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.tsx`make on_close required, add optinal prop "non_dismissable". When true, remove footer button and on background click. Just close as the duration finishes.

Author: robertpiosik

apps/editor/src/commands/checkpoints-command/actions/restore-checkpoint.ts

@@ -549,7 +549,8 @@ export const restore_checkpoint = async (params: {
       params.panel_provider.send_message({
         command: 'SHOW_AUTO_CLOSING_MODAL',
         title: message.slice(0, -1),
-        type: 'success'
+        type: 'success',
+        non_dismissable: true
       })
     } else if (temp_checkpoint) {
       const action = await vscode.window.showInformationMessage(

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -866,9 +866,8 @@ export const Panel = () => {
               title={auto_closing_modal_data.title}
               type={auto_closing_modal_data.type}
               duration={3000}
-              on_close={() => {
-                set_auto_closing_modal_data(undefined)
-              }}
+              on_close={() => set_auto_closing_modal_data(undefined)}
+              non_dismissable={auto_closing_modal_data.non_dismissable}
             />
           </div>
         )}

apps/editor/src/views/panel/frontend/hooks/use-modal-manager.ts

@@ -27,7 +27,11 @@ export const use_modal_manager = () => {
   >({})
 
   const [auto_closing_modal_data, set_auto_closing_modal_data] = useState<
-    | { title: string; type: 'success' | 'warning' | 'error' | 'info' }
+    | {
+        title: string
+        type: 'success' | 'warning' | 'error' | 'info'
+        non_dismissable?: boolean
+      }
     | undefined
   >()
 
@@ -77,7 +81,8 @@ export const use_modal_manager = () => {
       } else if (message.command == 'SHOW_AUTO_CLOSING_MODAL') {
         set_auto_closing_modal_data({
           title: message.title,
-          type: message.type
+          type: message.type,
+          non_dismissable: message.non_dismissable
         })
       } else if (message.command == 'SHOW_PREVIEW_ONGOING_MODAL') {
         set_is_preview_ongoing_modal_visible(true)

apps/editor/src/views/panel/types/messages.ts

@@ -878,7 +878,8 @@ export interface HideApiManagerProgressMessage extends BaseMessage {
 export interface ShowAutoClosingModalMessage extends BaseMessage {
   command: 'SHOW_AUTO_CLOSING_MODAL'
   title: string
-  type: 'success' | 'warning' | 'error'
+  type: 'success' | 'warning' | 'error' | 'info'
+  non_dismissable?: boolean
 }
 
 export interface UpdateFileInPreviewMessage extends BaseMessage {

packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.tsx

@@ -7,7 +7,8 @@ type Props = {
   title: string
   duration: number
   type: ModalIconType
-  on_close?: () => void
+  on_close: () => void
+  non_dismissable?: boolean
 }
 
 export const AutoClosingModal: React.FC<Props> = (props) => {
@@ -16,7 +17,7 @@ export const AutoClosingModal: React.FC<Props> = (props) => {
   useEffect(() => {
     set_is_filling(true)
     const timeout = setTimeout(() => {
-      props.on_close?.()
+      props.on_close()
     }, props.duration)
 
     return () => {
@@ -27,9 +28,9 @@ export const AutoClosingModal: React.FC<Props> = (props) => {
   return (
     <div
       onKeyDown={(e) => {
-        if (e.key == 'Escape') {
+        if (e.key == 'Escape' && !props.non_dismissable) {
           e.stopPropagation()
-          props.on_close?.()
+          props.on_close()
         }
       }}
     >
@@ -47,9 +48,11 @@ export const AutoClosingModal: React.FC<Props> = (props) => {
             />
           </div>
         }
-        on_background_click={props.on_close}
+        on_background_click={
+          !props.non_dismissable ? props.on_close : undefined
+        }
         footer_slot={
-          props.on_close ? (
+          !props.non_dismissable ? (
             <Button on_click={props.on_close} is_focused={true}>
               Close
             </Button>