diff --git a/src/renderer/src/components/steps/PrepareFolder.jsx b/src/renderer/src/components/steps/PrepareFolder.jsx index 6e0e22c9..7bbcd63e 100644 --- a/src/renderer/src/components/steps/PrepareFolder.jsx +++ b/src/renderer/src/components/steps/PrepareFolder.jsx @@ -4,8 +4,8 @@ import PropTypes from 'prop-types' import styles from './PrepareFolder.module.css' import commonStyles from '~/styles/CommonStyles.module.css' import typographyStyles from '~/styles/Typography.module.css' -import { WHITE, RICH_BLACK } from '@platformatic/ui-components/src/components/constants' -import { Button } from '@platformatic/ui-components' +import { WHITE, RICH_BLACK, TRANSPARENT, OPACITY_30 } from '@platformatic/ui-components/src/components/constants' +import { BorderedBox, Button } from '@platformatic/ui-components' import useStackablesStore from '~/useStackablesStore' import EditableTitle from '~/components/ui/EditableTitle' import '~/components/component.animation.css' @@ -15,6 +15,8 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { const globalState = useStackablesStore() const { formData, addFormData, services, setTemplate } = globalState const [folderPrepared, setFolderPrepared] = useState(false) + const [folderPreparedError, setFolderPreparedError] = useState(false) + const [folderPreparedSuccess, setFolderPreparedSuccess] = useState(false) const [npmLogs, setNpmLogs] = useState([]) const [logValue, setLogValue] = useState(null) @@ -31,9 +33,12 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { envVars = response[tmpTemplate.name] || [] setTemplate(service.name, { ...tmpTemplate, envVars }) }) - setFolderPrepared(true) + setFolderPreparedSuccess(true) } catch (error) { console.error(`Error on prepareFolder ${error}`) + setFolderPreparedError(true) + } finally { + setFolderPrepared(true) } } prepareFolder() @@ -41,14 +46,11 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { useEffect(() => { if (logValue) { - setNpmLogs([...npmLogs, { ...logValue }]) + const str = [new Date().toISOString(), logValue.level.toUpperCase(), logValue.message] + setNpmLogs([...npmLogs, { level: logValue.level, message: str.join(' - ') }]) } }, [logValue]) - useEffect(() => { - // call your increment function here - }, []) - function onClickConfigureServices () { onNext() } @@ -65,9 +67,19 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { function renderLog (log, index) { let className = `${typographyStyles.desktopOtherCliTerminalSmall} ` - const str = [new Date().toISOString(), log.level.toUpperCase(), log.message] className += log.level === 'info' ? `${typographyStyles.textWhite}` : `${typographyStyles.textErrorRed}` - return

{str.join(' - ')}

+ return

{log.message}

+ } + + function onClickCloseApp () { + // TODO: implement it + console.log('onClickCloseApp') + } + + function onClickCopyLogs () { + let str = '' + npmLogs.forEach(log => (str += `${log.message}\r\n`)) + navigator.clipboard.writeText(str) } return ( @@ -83,20 +95,39 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { />

Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.

-
- {npmLogs.map((log, index) => renderLog(log, index))} -
+ +
+ {npmLogs.map((log, index) => renderLog(log, index))} +
+
) diff --git a/src/renderer/src/components/steps/PrepareFolder.module.css b/src/renderer/src/components/steps/PrepareFolder.module.css index 07523139..2fe773bb 100644 --- a/src/renderer/src/components/steps/PrepareFolder.module.css +++ b/src/renderer/src/components/steps/PrepareFolder.module.css @@ -2,7 +2,7 @@ @apply flex flex-col min-h-[80vH] overflow-y-scroll justify-between } .buttonContainer { - @apply flex justify-end; + @apply flex justify-between; } .content {