From ec66c5ad423a1d22aa42200fcc645b220d64a251 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Thu, 30 Nov 2023 15:37:41 +0100
Subject: [PATCH] feat: handling better logs and copy logs

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 .../src/components/steps/PrepareFolder.jsx    | 67 ++++++++++++++-----
 .../components/steps/PrepareFolder.module.css |  2 +-
 2 files changed, 50 insertions(+), 19 deletions(-)

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 <p key={index} className={className}>{str.join(' - ')}</p>
+    return <p key={index} className={className}>{log.message}</p>
+  }
+
+  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) => {
           />
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
         </div>
-        <div className={`${commonStyles.flexBlockNoGap} ${commonStyles.fullWidth} ${styles.content}`}>
-          {npmLogs.map((log, index) => renderLog(log, index))}
-        </div>
+        <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>
+          <div className={`${commonStyles.flexBlockNoGap} `}>
+            {npmLogs.map((log, index) => renderLog(log, index))}
+          </div>
+        </BorderedBox>
       </div>
       <div className={`${styles.buttonContainer} ${commonStyles.fullWidth}`}>
         <Button
           disabled={!folderPrepared}
-          label='Next - Configure Services'
-          onClick={() => onClickConfigureServices()}
-          color={RICH_BLACK}
-          bordered={false}
-          backgroundColor={WHITE}
+          label='Copy Logs'
+          onClick={() => onClickCopyLogs()}
+          color={WHITE}
+          backgroundColor={RICH_BLACK}
           classes={`${commonStyles.buttonPadding} cy-action-next`}
         />
+        {folderPreparedError
+          ? <Button
+              label='Close'
+              onClick={() => onClickCloseApp()}
+              color={RICH_BLACK}
+              bordered={false}
+              backgroundColor={WHITE}
+              classes={`${commonStyles.buttonPadding} cy-action-close`}
+            />
+          : <Button
+              disabled={!folderPreparedSuccess}
+              label='Next - Configure Services'
+              onClick={() => onClickConfigureServices()}
+              color={RICH_BLACK}
+              bordered={false}
+              backgroundColor={WHITE}
+              classes={`${commonStyles.buttonPadding} cy-action-next`}
+            />}
       </div>
     </div>
   )
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 {