From 3e01dee1ac9afa31b42a987e58b700438ec24792 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Sun, 3 Dec 2023 23:11:25 +0100
Subject: [PATCH 1/3] feat: removing service name

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 package-lock.json                             | 24 ++++++++-
 package.json                                  |  1 +
 .../components/steps/CreateApplication.jsx    | 50 +------------------
 src/renderer/src/useStackablesStore.js        |  7 +--
 4 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6cb53463..05610506 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@fastify/error": "^3.4.1",
         "@platformatic/ui-components": "^0.1.126",
         "autoprefixer": "^10.4.16",
+        "boring-name-generator": "^1.0.3",
         "electron-updater": "^6.1.1",
         "execa": "^8.0.1",
         "mkdirp": "^3.0.1",
@@ -2522,6 +2523,26 @@
       "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
       "optional": true
     },
+    "node_modules/boring-name-generator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/boring-name-generator/-/boring-name-generator-1.0.3.tgz",
+      "integrity": "sha512-1wEo1pNahY9js7Vkp1RQa/VWdWrXYJnVAmsHV3Pw/0YzspjABLw7dcekjukOMTIYWr8ir/aG0GX1eoEkYhpnUg==",
+      "dependencies": {
+        "commander": "^6.1.0",
+        "lodash": "^4.17.20"
+      },
+      "bin": {
+        "boring-name-generator": "src/generator-bin.js"
+      }
+    },
+    "node_modules/boring-name-generator/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -6583,8 +6604,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.escaperegexp": {
       "version": "4.1.2",
diff --git a/package.json b/package.json
index ac71b85a..f4b7908c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@fastify/error": "^3.4.1",
     "@platformatic/ui-components": "^0.1.126",
     "autoprefixer": "^10.4.16",
+    "boring-name-generator": "^1.0.3",
     "electron-updater": "^6.1.1",
     "execa": "^8.0.1",
     "mkdirp": "^3.0.1",
diff --git a/src/renderer/src/components/steps/CreateApplication.jsx b/src/renderer/src/components/steps/CreateApplication.jsx
index 5e08688b..5fbe15ae 100644
--- a/src/renderer/src/components/steps/CreateApplication.jsx
+++ b/src/renderer/src/components/steps/CreateApplication.jsx
@@ -13,9 +13,8 @@ import Title from '~/components/ui/Title'
 const CreateApplication = React.forwardRef(({ onNext }, ref) => {
   const globalState = useStackablesStore()
   const { addFormData, addService, formData } = globalState
-  const [inputOnServiceField, setInputOnServiceField] = useState(false)
-  const [form, setForm] = useState({ application: '', service: '', folder: '' })
-  const [validations, setValidations] = useState({ applicationValid: false, serviceValid: false, folderValid: false, formErrors: { application: '', service: '', folder: '' } })
+  const [form, setForm] = useState({ application: '', folder: '' })
+  const [validations, setValidations] = useState({ applicationValid: false, folderValid: false, formErrors: { application: '', folder: '' } })
   const [validForm, setValidForm] = useState(false)
   const [callAddService, setCallAddService] = useState(true)
   const mockUse = import.meta.env.RENDERER_VITE_USE_MOCKS === 'true'
@@ -23,7 +22,6 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
   useEffect(() => {
     if (formData?.createApplication) {
       validateField('application', formData.createApplication.application, setForm(form => ({ ...form, application: formData.createApplication.application })))
-      validateField('service', formData.createApplication.service, setForm(form => ({ ...form, service: formData.createApplication.service })))
       validateField('folder', formData.createApplication.path, setForm(form => ({ ...form, folder: formData.createApplication.path })))
       setValidForm(true)
       setCallAddService(false)
@@ -35,7 +33,6 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
     addFormData({
       createApplication: {
         application: form.application,
-        service: form.service,
         path: form.folder
       }
     })
@@ -46,38 +43,6 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
   }
 
   function handleChangeApplication (event) {
-    if (inputOnServiceField) {
-      handleChange(event)
-    } else {
-      handleChangeBoth(event)
-    }
-  }
-
-  function handleChangeBoth (event) {
-    const value = event.target.value
-    validateBothField(value, setForm(form => ({ ...form, application: value, service: value })))
-  }
-
-  function validateBothField (fieldValue, callback = () => {}) {
-    let applicationValid = validations.applicationValid
-    const formErrors = { ...validations.formErrors }
-    applicationValid = fieldValue.length > 0 && /^[\w-]+$/g.test(fieldValue)
-    formErrors.application = fieldValue.length > 0 ? (applicationValid ? '' : 'The field is not valid, make sure you are using regular characters') : ''
-    formErrors.service = fieldValue.length > 0 ? (applicationValid ? '' : 'The field is not valid, make sure you are using regular characters') : ''
-    const nextValidation = { ...validations, formErrors }
-    nextValidation.applicationValid = applicationValid
-    nextValidation.serviceValid = applicationValid
-    setValidations(nextValidation)
-    validateForm(nextValidation, callback())
-  }
-
-  function handleChangeService (event) {
-    if (event.target.value !== '' && inputOnServiceField === false) {
-      setInputOnServiceField(true)
-    }
-    if (event.target.value === '' && inputOnServiceField === true) {
-      setInputOnServiceField(false)
-    }
     handleChange(event)
   }
 
@@ -137,17 +102,6 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
               backgroundTransparent
             />
           </Forms.Field>
-          <Forms.Field title='Service name' titleColor={WHITE} required>
-            <Forms.Input
-              placeholder='Enter the name of your service'
-              name='service'
-              borderColor={WHITE}
-              value={form.service}
-              onChange={handleChangeService}
-              errorMessage={validations.formErrors.service}
-              backgroundTransparent
-            />
-          </Forms.Field>
           <Forms.Field title='Select destination folder' titleColor={WHITE} required>
             <Button
               type='button'
diff --git a/src/renderer/src/useStackablesStore.js b/src/renderer/src/useStackablesStore.js
index 1ddf6bf0..dabf5caa 100644
--- a/src/renderer/src/useStackablesStore.js
+++ b/src/renderer/src/useStackablesStore.js
@@ -1,9 +1,9 @@
 import { create } from 'zustand'
+import { generateName } from '../../main/client.mjs'
 
 const useStackablesStore = create((set, get) => ({
   formData: {},
   services: [],
-  servicesAddedOnHistory: 0,
   addFormData: (newValue) => set((state) => {
     return {
       ...state,
@@ -12,13 +12,10 @@ const useStackablesStore = create((set, get) => ({
   }),
   addService: () => set((state) => {
     const currentServices = get().services
-    const serviceName = get().formData.createApplication.service
-    const servicesAddedOnHistory = get().servicesAddedOnHistory + 1
     return {
       ...state,
-      servicesAddedOnHistory,
       services: [...currentServices, {
-        name: `${serviceName}-${servicesAddedOnHistory}`,
+        name: generateName({ words: 1 }),
         template: {},
         plugins: []
       }]

From 75fe5733829985cc94639f3208ddafe42364ae4a Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Sun, 3 Dec 2023 23:31:56 +0100
Subject: [PATCH 2/3] feat: adding index stuff

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 src/main/index.mjs                                         | 6 ++++++
 src/preload/index.js                                       | 3 ++-
 src/renderer/src/components/steps/CreateApplication.jsx    | 5 +++--
 .../steps/compose-application/ComposeApplication.jsx       | 7 ++++++-
 src/renderer/src/useStackablesStore.js                     | 5 ++---
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/main/index.mjs b/src/main/index.mjs
index ccd029e7..f10da6cd 100644
--- a/src/main/index.mjs
+++ b/src/main/index.mjs
@@ -6,6 +6,7 @@ import icon from '../../resources/icon.png?asset'
 import setupMenu from './menu.mjs'
 import { getTemplates, getPlugins } from './client.mjs'
 import { prepareFolder, createApp } from './generate.mjs'
+const generate = require('boring-name-generator')
 
 // eslint-disable-next-line no-unused-vars
 const isMac = process.platform === 'darwin'
@@ -116,6 +117,11 @@ app.whenReady().then(() => {
   ipcMain.handle('quit-app', () => {
     app.quit()
   })
+
+  ipcMain.handle('generate-name', async () => {
+    const val = await generate({ words: 1 }).dashed
+    return val
+  })
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
diff --git a/src/preload/index.js b/src/preload/index.js
index 961ad3e2..757dd347 100644
--- a/src/preload/index.js
+++ b/src/preload/index.js
@@ -20,7 +20,8 @@ if (process.contextIsolated) {
       prepareFolder: (folder, templates, appName) => (ipcRenderer.invoke('prepare-folder', folder, templates, appName)),
       onLog: callback => ipcRenderer.on('log', callback),
       createApp: (folder, project) => (ipcRenderer.invoke('create-app', folder, project)),
-      quitApp: () => (ipcRenderer.invoke('quit-app'))
+      quitApp: () => (ipcRenderer.invoke('quit-app')),
+      getServiceName: () => (ipcRenderer.invoke('generate-name'))
     })
   } catch (error) {
     console.error(error)
diff --git a/src/renderer/src/components/steps/CreateApplication.jsx b/src/renderer/src/components/steps/CreateApplication.jsx
index 5fbe15ae..b1cf1545 100644
--- a/src/renderer/src/components/steps/CreateApplication.jsx
+++ b/src/renderer/src/components/steps/CreateApplication.jsx
@@ -28,7 +28,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
     }
   }, [formData])
 
-  function handleSubmit (event) {
+  async function handleSubmit (event) {
     event.preventDefault()
     addFormData({
       createApplication: {
@@ -37,7 +37,8 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
       }
     })
     if (callAddService) {
-      addService()
+      const serviceName = await window.api.getServiceName()
+      addService(serviceName)
     }
     onNext()
   }
diff --git a/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx b/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
index e4145103..e2a6e042 100644
--- a/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
+++ b/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
@@ -106,6 +106,11 @@ const ComposeApplication = React.forwardRef(({ onNext, onBack }, ref) => {
     setShowModalViewAll(false)
   }
 
+  async function onClickAddService () {
+    const serviceName = await window.api.getServiceName()
+    addService(serviceName)
+  }
+
   function handleEditApplicationName (newName) {
     addFormData({
       createApplication: {
@@ -181,7 +186,7 @@ const ComposeApplication = React.forwardRef(({ onNext, onBack }, ref) => {
                     <h5 className={`${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite}`}>&nbsp;</h5>
                   </div>
                   <AddService
-                    onClick={() => addService()}
+                    onClick={() => onClickAddService()}
                     enabled={services.find(service => Object.keys(service.template).length === 0) === undefined || currentView === GRID_VIEW}
                   />
                 </div>
diff --git a/src/renderer/src/useStackablesStore.js b/src/renderer/src/useStackablesStore.js
index dabf5caa..442e53e3 100644
--- a/src/renderer/src/useStackablesStore.js
+++ b/src/renderer/src/useStackablesStore.js
@@ -1,5 +1,4 @@
 import { create } from 'zustand'
-import { generateName } from '../../main/client.mjs'
 
 const useStackablesStore = create((set, get) => ({
   formData: {},
@@ -10,12 +9,12 @@ const useStackablesStore = create((set, get) => ({
       formData: { ...get().formData, ...newValue }
     }
   }),
-  addService: () => set((state) => {
+  addService: (serviceName) => set((state) => {
     const currentServices = get().services
     return {
       ...state,
       services: [...currentServices, {
-        name: generateName({ words: 1 }),
+        name: serviceName,
         template: {},
         plugins: []
       }]

From 95352dc7369e73f64944d441dbbd20236f4bf979 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Sun, 3 Dec 2023 23:39:18 +0100
Subject: [PATCH 3/3] feat: adding data attributes for posthog

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 src/renderer/src/components/steps/ConfigureApplication.jsx    | 1 +
 src/renderer/src/components/steps/CreateApplication.jsx       | 1 +
 src/renderer/src/components/steps/GeneratingApplication.jsx   | 4 +++-
 src/renderer/src/components/steps/PrepareFolder.jsx           | 1 +
 .../steps/compose-application/ComposeApplication.jsx          | 1 +
 .../components/steps/configure-services/ConfigureServices.jsx | 1 +
 6 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/steps/ConfigureApplication.jsx b/src/renderer/src/components/steps/ConfigureApplication.jsx
index 774af44a..9ffef234 100644
--- a/src/renderer/src/components/steps/ConfigureApplication.jsx
+++ b/src/renderer/src/components/steps/ConfigureApplication.jsx
@@ -242,6 +242,7 @@ const ConfigureApplication = React.forwardRef(({ onNext, onBack }, ref) => {
           bordered={false}
           backgroundColor={WHITE}
           classes={`${commonStyles.buttonPadding} cy-action-next`}
+          data-posthog='configure_application_done'
         />
       </div>
     </div>
diff --git a/src/renderer/src/components/steps/CreateApplication.jsx b/src/renderer/src/components/steps/CreateApplication.jsx
index b1cf1545..561bee82 100644
--- a/src/renderer/src/components/steps/CreateApplication.jsx
+++ b/src/renderer/src/components/steps/CreateApplication.jsx
@@ -135,6 +135,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
           bordered={false}
           backgroundColor={WHITE}
           classes={`${commonStyles.buttonPadding} cy-action-next`}
+          data-posthog='create_application_done'
         />
       </div>
     </form>
diff --git a/src/renderer/src/components/steps/GeneratingApplication.jsx b/src/renderer/src/components/steps/GeneratingApplication.jsx
index 9f9ac2a2..ea10565e 100644
--- a/src/renderer/src/components/steps/GeneratingApplication.jsx
+++ b/src/renderer/src/components/steps/GeneratingApplication.jsx
@@ -103,7 +103,8 @@ const GeneratingApplication = React.forwardRef(({ onClickComplete, onRestartProc
             onClick={() => onClickRestart()}
             color={WHITE}
             backgroundColor={TRANSPARENT}
-            classes={`${commonStyles.buttonPadding} cy-action-next`}
+            classes={`${commonStyles.buttonPadding} cy-action-restart`}
+            data-posthog='generating_restart'
           />
           <Button
             disabled={!appGenerated}
@@ -113,6 +114,7 @@ const GeneratingApplication = React.forwardRef(({ onClickComplete, onRestartProc
             bordered={false}
             backgroundColor={WHITE}
             classes={`${commonStyles.buttonPadding} cy-action-next`}
+            data-posthog='generating_complete'
           />
         </div>
       </div>
diff --git a/src/renderer/src/components/steps/PrepareFolder.jsx b/src/renderer/src/components/steps/PrepareFolder.jsx
index 1f26ca05..737d05f0 100644
--- a/src/renderer/src/components/steps/PrepareFolder.jsx
+++ b/src/renderer/src/components/steps/PrepareFolder.jsx
@@ -135,6 +135,7 @@ const PrepareFolder = React.forwardRef(({ onNext, onBack }, ref) => {
               bordered={false}
               backgroundColor={WHITE}
               classes={`${commonStyles.buttonPadding} cy-action-next`}
+              data-posthog='prepare_folder_done'
             />}
       </div>
     </div>
diff --git a/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx b/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
index e2a6e042..48923563 100644
--- a/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
+++ b/src/renderer/src/components/steps/compose-application/ComposeApplication.jsx
@@ -215,6 +215,7 @@ const ComposeApplication = React.forwardRef(({ onNext, onBack }, ref) => {
           bordered={false}
           backgroundColor={WHITE}
           classes={`${commonStyles.buttonPadding} cy-action-next`}
+          data-posthog='compose_application_done'
         />
       </div>
       {showModalTemplate && (
diff --git a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
index e9ea106e..e39746e4 100644
--- a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
+++ b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
@@ -149,6 +149,7 @@ const ConfigureServices = React.forwardRef(({ onNext, onBack }, ref) => {
           bordered={false}
           backgroundColor={WHITE}
           classes={`${commonStyles.buttonPadding} cy-action-next`}
+          data-posthog='configure_services_done'
         />
       </div>
     </div>