Merge pull request #30 from BjornDCode/feature/import-flow

Feature/import flow

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.3.1]
+
+-   Add Serve logo
+-   Remove 7.2 from PHP selector
+-   Split import flow into small steps
+-   Fix import issue with projects without a .env file
+-   Add support for cloning repositories in the import flow
+
 ## [0.3.0]
 
 -   Revamped the app menu

README.md

@@ -55,6 +55,52 @@ serve redis
 serve redis-cli
 ```
 
+## Advanced
+
+### Customising Docker images
+
+If you need to customise the Docker images for custom behavior you can do so with the following steps:
+
+1. Create a `docker` folder
+2. Create a `Dockerfile` inside the `docker folder
+3. Add changes to the `Dockerfile`
+
+```
+FROM bjornlindholm/laravel:7.4
+
+// Add changes here
+
+CMD ["supervisord"]
+```
+
+4. Update `docker-compose.yml`
+
+Replace the following snippet
+
+```
+image: bjornlindholm/laravel:7.4
+```
+
+To build your own docker image
+
+```
+build:
+  context: ./docker
+```
+
+### Installing PHP extensions
+
+If you need to install PHP extensions that aren't included in the base docker image you can do that by creating your own docker image. (See steps above)
+
+```
+FROM bjornlindholm/laravel:7.4
+
+RUN apt-get update
+RUN apt-get install -y php7.4-gmp
+
+CMD ["supervisord"]
+```
+
 ## Roadmap
 
 Please see [ROADMAP](ROADMAP.md) for more planned features.

ROADMAP.md

@@ -4,11 +4,12 @@ This document contains the currently planned features for Serve. It's meant to b
 
 ## Short-term
 
--   [] CLI tool to run commands inside containers
+-   [x] CLI tool to run commands inside containers
+-   [x] Add command palette
+-   [] Read log files (Laravel specific)
+-   [] Handle queues
 -   [] Compile assets with Node
 -   [] Execute terminal commands
--   [] Add command palette
--   [] Read log files (Laravel specific)
 -   [] GUI for Artisan + other actions (Laravel specific)
 
 ## Long-term

package.json

@@ -7,7 +7,7 @@
     "name": "Bjørn Lindholm",
     "email": "[email protected]"
   },
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/ActionBar.vue

@@ -0,0 +1,44 @@
+<template>
+    <Stack
+        width="full"
+        position="fixed"
+        :left="0"
+        :right="0"
+        :bottom="0"
+        color="white"
+    >
+        <Box
+            :spaceX="8"
+            :spaceY="4"
+            width="full"
+            :borderWidthT="2"
+            borderColor="gray"
+            borderShade="300"
+        >
+            <Inline justify="between" width="full" :space="4">
+                <Inline>
+                    <slot name="left" />
+                </Inline>
+
+                <Inline>
+                    <slot />
+                    <slot name="right" />
+                </Inline>
+            </Inline>
+        </Box>
+    </Stack>
+</template>
+
+<script>
+    import Box from '@/components/Box'
+    import Stack from '@/components/Stack'
+    import Inline from '@/components/Inline'
+
+    export default {
+        components: {
+            Box,
+            Stack,
+            Inline,
+        },
+    }
+</script>

src/components/ConditionalText.vue

@@ -0,0 +1,34 @@
+<script>
+    import TextNode from '@/components/TextNode'
+
+    export default {
+        props: {
+            condition: {
+                type: Boolean,
+                required: true,
+            },
+            true: {
+                type: String,
+                required: true,
+            },
+            false: {
+                type: String,
+                required: true,
+            },
+        },
+
+        computed: {
+            text() {
+                return this.condition ? this.true : this.false
+            },
+        },
+
+        render(createElement) {
+            return createElement(TextNode, {
+                props: {
+                    text: this.text,
+                },
+            })
+        },
+    }
+</script>

src/components/Logo.vue

@@ -0,0 +1,20 @@
+<template>
+    <svg
+        width="60"
+        height="60"
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z"
+            fill="#3C366B"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M55.8139 36.4341C55.8139 33.2231 53.2108 30.6201 49.9999 30.6201C46.789 30.6201 44.1859 33.2231 44.1859 36.4341V37.4031C44.1859 41.1492 41.1491 44.186 37.403 44.186H36.434C33.223 44.186 30.6201 46.7891 30.6201 50C30.6201 53.2109 33.223 55.814 36.434 55.814H37.403C41.1491 55.814 44.1859 58.8508 44.1859 62.5969V63.5659C44.1859 66.7769 46.789 69.3799 49.9999 69.3799C53.2108 69.3799 55.8139 66.7769 55.8139 63.5659V62.5969C55.8139 58.8508 58.8507 55.814 62.5968 55.814H63.5658C66.7768 55.814 69.3798 53.2109 69.3798 50C69.3798 46.7891 66.7768 44.186 63.5658 44.186H62.5968C58.8507 44.186 55.8139 41.1492 55.8139 37.4031V36.4341Z"
+            fill="#ED64A6"
+        />
+    </svg>
+</template>

src/components/Paragraph.vue

@@ -0,0 +1,15 @@
+<template>
+    <Copy component="p" color="gray" shade="700">
+        <slot />
+    </Copy>
+</template>
+
+<script>
+    import Copy from '@/components/Copy'
+
+    export default {
+        components: {
+            Copy,
+        },
+    }
+</script>

src/components/PathField.vue

@@ -19,6 +19,7 @@
                 tabindex="-1"
                 :value="displayValue"
                 :focused="focused"
+                v-bind="$attrs"
                 @click="onClick"
                 @focus.prevent="onInputFocus"
             />

src/components/ProjectSettings.vue

@@ -62,7 +62,7 @@
                 <Stack align="stretch" width="2/5" :space="8">
                     <SelectField
                         label="Version"
-                        :options="['7.4', '7.3', '7.2']"
+                        :options="['7.4', '7.3']"
                         :value="values.php.version"
                         @input="onInput('php.version', $event)"
                     />

src/components/TextField.vue

@@ -16,6 +16,7 @@
             :value="value"
             :focused="focused"
             :error="hasError"
+            v-bind="$attrs"
             @focus="onFocus"
             @blur="onBlur"
             @input="$emit('input', $event.target.value)"

src/components/TextNode.vue

@@ -0,0 +1,14 @@
+<script>
+    export default {
+        props: {
+            text: {
+                type: String,
+                required: true,
+            },
+        },
+
+        render() {
+            return this._v(this.text)
+        },
+    }
+</script>

src/config/files.js

@@ -68,7 +68,9 @@ export const generateDockerConfig = options => {
 }
 
 export const generateServeConfig = options => {
-    return toml.stringify(removeKeys(options, ['id', 'path', 'name', 'status']))
+    return toml.stringify(
+        removeKeys(options, ['id', 'path', 'name', 'status', 'last_used']),
+    )
 }
 
 export const generateEnvConfig = (defaults, options) => {

src/router/index.js

@@ -7,6 +7,7 @@ import ProjectOverview from '@/views/project/Overview'
 import ProjectSettings from '@/views/project/Settings'
 
 import ImportLaravel from '@/views/import/Laravel'
+import importChildRoutes from '@/views/import'
 
 import CreateLaravel from '@/views/create/Laravel'
 
@@ -22,6 +23,10 @@ const routes = [
         path: '/import/laravel',
         name: 'import.laravel',
         component: ImportLaravel,
+        redirect: {
+            name: 'import.laravel.source',
+        },
+        children: [...importChildRoutes],
     },
     {
         path: '/create/laravel',

src/shell/Filesystem.js

@@ -23,9 +23,34 @@ class Filesystem {
                 status: 'success',
             }
         } catch (error) {
-            throw new ReadFileError(
+            const message =
+                this.command.error ||
                 `There was a problem reading: ${this.command.path}`
+
+            throw new ReadFileError(message)
+        }
+    }
+
+    async readStub() {
+        try {
+            /* eslint-disable */
+            const contents = fs.readFileSync(
+                `${__static}/stubs/${this.command.path}`,
+                'utf8',
             )
+            /* eslint-enable */
+
+            return {
+                type: this.command.type,
+                value: contents,
+                status: 'success',
+            }
+        } catch (error) {
+            const message =
+                this.command.error ||
+                `There was a problem reading: ${this.command.path}`
+
+            throw new ReadFileError(message)
         }
     }
 
@@ -34,7 +59,7 @@ class Filesystem {
             fs.writeFileSync(this.command.path, this.command.value)
         } catch (error) {
             throw new WriteFileError(
-                `There was a problem writing: ${this.command.path}`
+                `There was a problem writing: ${this.command.path}`,
             )
         }
     }

src/shell/Git.js

@@ -24,6 +24,17 @@ class Git {
             return
         }
     }
+
+    async clone() {
+        await simpleGit(this.command.path).clone(
+            this.command.url,
+            this.command.name,
+        )
+
+        return {
+            status: 'success',
+        }
+    }
 }
 
 export default Git

src/store/projects.js

@@ -186,6 +186,7 @@ export default {
                         id,
                         type: 'read',
                         path: `${settings.path}/.env`,
+                        error: `No .env file in '${settings.name}'`,
                     })
                     .then(response => {
                         window.ipc.invoke('filesystem', {