diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx index 197f7b875b..ba7124ae00 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx @@ -38,8 +38,11 @@ function HomeTabFile({ plugin }: HomeTabFileProps) { if (!recents) { recents = [] } else { + const filtered = recents.filter((workspace) => { + return workspace !== null + }) setState((prevState) => { - return { ...prevState, recentWorkspaces: recents.slice(0, recents.length <= 3 ? recents.length : 3) } + return { ...prevState, recentWorkspaces: filtered.slice(0, filtered.length <= 3 ? filtered.length : 3) } }) } }) diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx index 3a20a43b5e..3faaf402a6 100644 --- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx +++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx @@ -4,7 +4,7 @@ import { Dropdown } from 'react-bootstrap' import { CustomIconsToggle, CustomMenu, CustomToggle, CustomTooltip, extractNameFromKey, extractParentFromKey } from '@remix-ui/helper' import { CopyToClipboard } from '@remix-ui/clipboard' import {FileExplorer} from './components/file-explorer' // eslint-disable-line -import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line +import {ModalDialog, ValidationResult} from '@remix-ui/modal-dialog' // eslint-disable-line import { FileSystemContext } from './contexts' import './css/remix-ui-workspace.css' import { ROOT_PATH, TEMPLATE_NAMES } from './utils/constants' @@ -109,6 +109,7 @@ export function Workspace() { const [modalState, setModalState] = useState<{ searchInput: string showModalDialog: boolean + // modalValidation?: ValidationResult modalInfo: { title: string loadItem: string @@ -117,15 +118,17 @@ export function Workspace() { } importSource: string toasterMsg: string - recentWorkspaces: Array }>({ searchInput: '', showModalDialog: false, + // modalValidation: {} as ValidationResult, modalInfo: { title: '', loadItem: '', examples: [], prefix: '' }, importSource: '', - toasterMsg: '', - recentWorkspaces: [], + toasterMsg: '' }) + + const [validationResult, setValidationResult] = useState({ valid: true, message: '' }) + const loadingInitialState = { tooltip: '', showModalDialog: false, @@ -186,6 +189,14 @@ export function Workspace() { setState((prevState) => { return { ...prevState, importSource: startsWith + modalState.importSource } }) + } else { + global.plugin.call('notification', 'alert', { id: 'homeTabAlert', message: 'The provided value is invalid!' }) + return + } + + if (!startsWith.startsWith('https://') || !startsWith.startsWith('http://')) { + global.plugin.call('notification', 'alert', { id: 'homeTabAlert', message: 'The provided value is invalid!' }) + return } contentImport.import( modalState.modalInfo.prefix + modalState.importSource, @@ -219,6 +230,20 @@ export function Workspace() { showFullMessage(title, loadItem, examples, prefix) } + /** + * Validate the url fed into the modal for ipfs and https imports + */ + const validateUrlForImport = (input: any) => { + if ((input.trim().startsWith('ipfs://') && input.length > 7) || input.trim().startsWith('https://') || input.trim() !== '') { + setValidationResult({ valid: true, message: '' }) + return validationResult + } else { + global.plugin.call('notification', 'alert', { id: 'homeTabAlert', message: 'The provided value is invalid!' }) + setValidationResult({ valid: false, message: 'The provided value is invalid!' }) + return validationResult + } + } + useEffect(() => { let workspaceName = localStorage.getItem('currentWorkspace') if (!workspaceName && global.fs.browser.workspaces.length) { @@ -1454,7 +1479,8 @@ export function Workspace() { )} hideFullMessage()} - okFn={() => processLoading(modalState.modalInfo.title)}> + okFn={() => processLoading(modalState.modalInfo.title)} validationFn={validateUrlForImport} + >
{modalState.modalInfo.loadItem !== '' && Enter the {modalState.modalInfo.loadItem} you would like to load.} {modalState.modalInfo.examples.length !== 0 && (