Add plumbing for template explorer to modal plugin

Author: ci-bot

apps/remix-ide/src/app/plugins/notification.tsx

@@ -1,23 +1,26 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import { Plugin } from '@remixproject/engine'
 import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-utils'
 import { AppModal } from '@remix-ui/app'
 import { AlertModal } from '@remix-ui/app'
 import { dispatchModalInterface } from '@remix-ui/app'
+import { TemplateExplorerModal } from 'libs/remix-ui/app/src/lib/remix-app/interface'
 
 interface INotificationApi {
   events: StatusEvents
   methods: {
     modal: (args: AppModal) => void
     alert: (args: AlertModal) => void
     toast: (message: string) => void
+    templateExplorer: (args: TemplateExplorerModal) => void
   }
 }
 
 const profile: LibraryProfile<INotificationApi> = {
   name: 'notification',
   displayName: 'Notification',
   description: 'Displays notifications',
-  methods: ['modal', 'alert', 'toast']
+  methods: ['modal', 'alert', 'toast', 'templateExplorer']
 }
 
 export class NotificationPlugin extends Plugin implements MethodApi<INotificationApi> {
@@ -34,6 +37,10 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
     return this.dispatcher.modal(args)
   }
 
+  async templateExplorer(args: TemplateExplorerModal) {
+    return this.dispatcher.templateExplorer(args)
+  }
+
   async alert(args: AlertModal) {
     return this.dispatcher.alert(args)
   }

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -1,4 +1,4 @@
-import { AppModal } from '../interface'
+import { AppModal, TemplateExplorerModal } from '../interface'
 
 type ActionMap<M extends { [index: string]: any }> = {
     [Key in keyof M]: M[Key] extends undefined
@@ -13,6 +13,7 @@ type ActionMap<M extends { [index: string]: any }> = {
 
 export const enum modalActionTypes {
   setModal = 'SET_MODAL',
+  setTemplateExplorer = 'SET_TEMPLATE_EXPLORER',
   setToast = 'SET_TOAST',
   processQueue = 'PROCESS_QUEUEU',
   handleHideModal = 'HANDLE_HIDE_MODAL',
@@ -21,6 +22,7 @@ export const enum modalActionTypes {
 
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
+  [modalActionTypes.setTemplateExplorer]: TemplateExplorerModal
   [modalActionTypes.handleHideModal]: any
   [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number }
   [modalActionTypes.handleToaster]: any,

libs/remix-ui/app/src/lib/remix-app/context/context.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AlertModal, AppModal, AppState } from '../interface'
+import { AlertModal, AppModal, AppState, TemplateExplorerModal } from '../interface'
 import { ModalInitialState } from '../state/modals'
 import { AppAction } from '../actions/app'
 
@@ -26,6 +26,7 @@ export interface dispatchModalInterface {
   modal: (data: AppModal) => void
   toast: (message: string | JSX.Element) => void
   alert: (data: AlertModal) => void
+  templateExplorer: (data: TemplateExplorerModal) => void
   handleHideModal: () => void
   handleToaster: () => void
 }
@@ -34,6 +35,7 @@ export const dispatchModalContext = React.createContext<dispatchModalInterface>(
   modal: (data: AppModal) => {},
   toast: (message: string | JSX.Element) => {},
   alert: (data: AlertModal) => {},
+  templateExplorer: (data: TemplateExplorerModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}
 })

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer } from 'react'
 import { useIntl, IntlShape } from 'react-intl'
 import { modalActionTypes } from '../actions/modals'
-import { AlertModal, AppModal } from '../interface'
+import { AlertModal, AppModal, TemplateExplorerModal } from '../interface'
 import { modalReducer } from '../reducer/modals'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
@@ -51,6 +51,38 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
     })
   }
 
+  const templateExplorer = (modalData: TemplateExplorerModal) => {
+    dispatch({
+      type: modalActionTypes.setTemplateExplorer,
+      payload: {
+        id: modalData.id,
+        title: modalData.title,
+        message: modalData.message,
+        okLabel: modalData.okLabel,
+        okFn: modalData.okFn,
+        cancelLabel: modalData.cancelLabel,
+        cancelFn: modalData.cancelFn,
+        timestamp: modalData.timestamp,
+        hide: modalData.hide,
+        validationFn: modalData.validationFn,
+        resolve: modalData.resolve,
+        next: modalData.next,
+        data: modalData.data,
+        showCancelIcon: modalData.showCancelIcon,
+        preventBlur: modalData.preventBlur,
+        placeholderText: modalData.placeholderText,
+        workspaceTemplateGroup: modalData.workspaceTemplateGroup,
+        workspaceTemplate: modalData.workspaceTemplate,
+        workspaceTemplateOptions: modalData.workspaceTemplateOptions,
+        workspaceName: modalData.workspaceName,
+        modifyWorkspaceName: modalData.modifyWorkspaceName,
+        workspaceDescription: modalData.workspaceDescription,
+        workspaceTags: modalData.workspaceTags,
+        modifyWorkspace: modalData.modifyWorkspace
+      }
+    })
+  }
+
   const alert = (modalData: AlertModal) => {
     return modal({
       id: modalData.id,
@@ -85,7 +117,7 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
   }
 
   return (
-    <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster }}>
+    <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster, templateExplorer }}>
       <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster }}>{children}</modalContext.Provider>
     </dispatchModalContext.Provider>
   )

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import { branch, desktopConnection, GitHubUser } from '@remix-api'
 import { AppModalCancelTypes, ModalTypes } from '../types'
+import { Template, TemplateGroup, TemplateOption } from 'libs/remix-ui/workspace/src/lib/utils/constants'
 
 export type ValidationResult = {
     valid: boolean,
@@ -49,6 +51,39 @@ export interface forceChoiceModal {
   message: string | JSX.Element,
 }
 
+export interface TemplateExplorerModal {
+  id: string
+  title?: string,
+  message: JSX.Element,
+  workspaceName: string,
+  modifyWorkspaceName: boolean,
+  workspaceDescription: string,
+  workspaceTemplateOptions: TemplateOption,
+  workspaceTemplateGroup: TemplateGroup,
+  workspaceTemplate: Template,
+  timestamp?: number
+  hide?: boolean
+  validationFn?: (value: string) => ValidationResult
+  // eslint-disable-next-line no-undef
+  okLabel: string | JSX.Element
+  okFn?: (value?:any) => void
+  cancelLabel?: string | JSX.Element
+  cancelFn?: (reason?: AppModalCancelTypes) => void,
+  modalType?: ModalTypes,
+  modalParentClass?: string
+  defaultValue?: string
+  hideFn?: () => void,
+  resolve?: (value?:any) => void,
+  next?: () => void,
+  data?: any,
+  showCancelIcon?: boolean,
+  preventBlur?: boolean
+  placeholderText?: string
+  searchTerm?: string
+  workspaceTags?: string[]
+  modifyWorkspace?: boolean
+}
+
 export interface AppState {
     gitHubUser: GitHubUser
     currentBranch: branch