From d98c742aff79e22596b3aa8c7b075c7340c47cc8 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 18 Jul 2024 14:20:22 +0200
Subject: [PATCH] chore: update general page of apps

---
 .../project/application/general.blade.php     | 243 +++++++++++-------
 .../livewire/source/github/create.blade.php   |   2 +-
 2 files changed, 144 insertions(+), 101 deletions(-)

diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 4f68b6d8e..232900a5d 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -30,13 +30,7 @@
                             </x-forms.select>
                         @endif
                     </div>
-                    @if ($application->could_set_build_commands())
-                        <div class="w-64">
-                            <x-forms.checkbox instantSave id="application.settings.is_static"
-                                label="Is it a static site?"
-                                helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
-                        </div>
-                    @endif
+
                     @if ($application->build_pack === 'dockercompose')
                         @if (
                             !is_null($parsedServices) &&
@@ -57,6 +51,7 @@
                             @endforeach
                         @endif
                     @endif
+
                 </div>
             @endif
             @if ($application->build_pack !== 'dockercompose')
@@ -129,104 +124,152 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                     @endif
                 </div>
             @endif
-
-            @if ($application->build_pack !== 'dockerimage')
-                <h3 class="pt-8">Build</h3>
-                @if ($application->build_pack !== 'dockercompose')
-                    <div class="max-w-96">
-                        <x-forms.checkbox
-                            helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
-                            instantSave id="application.settings.is_build_server_enabled"
-                            label="Use a Build Server? (experimental)" />
-                    </div>
-                @endif
-                @if ($application->could_set_build_commands())
-                    @if ($application->build_pack === 'nixpacks')
-                        <div class="flex flex-col gap-2 xl:flex-row">
-                            <x-forms.input placeholder="If you modify this, you probably need to have a nixpacks.toml"
-                                id="application.install_command" label="Install Command" />
-                            <x-forms.input placeholder="If you modify this, you probably need to have a nixpacks.toml"
-                                id="application.build_command" label="Build Command" />
-                            <x-forms.input placeholder="If you modify this, you probably need to have a nixpacks.toml"
-                                id="application.start_command" label="Start Command" />
-                        </div>
-                        <div class="pb-4 text-xs">Nixpacks will detect the required configuration automatically.
-                            <a class="underline" href="https://coolify.io/docs/resources/introduction">Framework
-                                Specific Docs</a>
-                        </div>
-                    @endif
-                @endif
-                @if ($application->build_pack === 'dockercompose')
-                    <div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
-                        <div class="flex gap-2">
-                            <x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/"
-                                id="application.base_directory" label="Base Directory"
-                                helper="Directory to use as root. Useful for monorepos." />
-                            <x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/docker-compose.yaml"
-                                id="application.docker_compose_location" label="Docker Compose Location"
-                                helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>" />
-                        </div>
-                        <div class="w-96">
-                            <x-forms.checkbox instantSave id="application.settings.is_preserve_repository_enabled"
-                                label="Preserve Repository During Deployment"
-                                helper="Git repository (based on the base directory settings) will be copied to the deployment directory." />
-                        </div>
-                        <div class="pt-4">The following commands are for advanced use cases. Only modify them if you
-                            know what are
-                            you doing.</div>
-                        <div class="flex gap-2">
-                            <x-forms.input placeholder="docker compose build" x-bind:disabled="initLoadingCompose"
-                                id="application.docker_compose_custom_build_command"
-                                helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} build</span>"
-                                label="Custom Build Command" />
-                            <x-forms.input placeholder="docker compose up -d" x-bind:disabled="initLoadingCompose"
-                                id="application.docker_compose_custom_start_command"
-                                helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} up -d</span>"
-                                label="Custom Start Command" />
-                        </div>
-                    </div>
-                @else
-                    <div class="flex flex-col gap-2 xl:flex-row">
-                        <x-forms.input placeholder="/" id="application.base_directory" label="Base Directory"
-                            helper="Directory to use as root. Useful for monorepos." />
-                        @if ($application->build_pack === 'dockerfile' && !$application->dockerfile)
-                            <x-forms.input placeholder="/Dockerfile" id="application.dockerfile_location"
-                                label="Dockerfile Location"
-                                helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>" />
-                        @endif
-
-                        @if ($application->build_pack === 'dockerfile')
-                            <x-forms.input id="application.dockerfile_target_build" label="Docker Build Stage Target"
-                                helper="Useful if you have multi-staged dockerfile." />
-                        @endif
-                        @if ($application->could_set_build_commands())
-                            @if ($application->settings->is_static)
-                                <x-forms.input placeholder="/dist" id="application.publish_directory"
-                                    label="Publish Directory" required />
-                            @else
-                                <x-forms.input placeholder="/" id="application.publish_directory"
-                                    label="Publish Directory" />
-                            @endif
-                        @endif
-
-                    </div>
-                    @if ($this->application->is_github_based() && !$this->application->is_public_repository())
-                        <div class="pb-4">
-                            <x-forms.textarea helper="Gitignore-style rules to filter Git based webhook deployments."
-                                placeholder="src/pages/**" id="application.watch_paths" label="Watch Paths" />
-                        </div>
-                    @endif
+            <div class="py-4 border-b dark:border-coolgray-200">
+                <h3>Build</h3>
+                @if ($application->build_pack === 'dockerimage')
                     <x-forms.input
                         helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
                         placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
                         id="application.custom_docker_run_options" label="Custom Docker Options" />
+                @else
+                    @if ($application->could_set_build_commands())
+                        @if ($application->build_pack === 'nixpacks')
+                            <div class="flex flex-col gap-2 xl:flex-row">
+                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                    id="application.install_command" label="Install Command" />
+                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                    id="application.build_command" label="Build Command" />
+                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                    id="application.start_command" label="Start Command" />
+                            </div>
+                            <div class="pt-1 text-xs">Nixpacks will detect the required configuration
+                                automatically.
+                                <a class="underline"
+                                    href="https://coolify.io/docs/resources/applications/index">Framework
+                                    Specific Docs</a>
+                            </div>
+                        @endif
+                    @endif
+                    <div x-data="{
+                        activeAccordion: '',
+                        setActiveAccordion(id) {
+                            this.activeAccordion = (this.activeAccordion == id) ? '' : id
+                        }
+                    }"
+                        class="relative w-full mx-auto mt-4 overflow-hidden text-sm font-normal">
+                        <div x-data="{ id: $id('accordion') }" class="cursor-pointer">
+                            <button @click="setActiveAccordion(id)"
+                                class="flex items-center justify-between w-full p-1 text-left select-none hover:dark:text-white hover:bg-white/5"
+                                type="button">
+                                <h4>Advanced</h4>
+                                <svg class="w-4 h-4 duration-200 ease-out"
+                                    :class="{ 'rotate-180': activeAccordion == id }" viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="6 9 12 15 18 9"></polyline>
+                                </svg>
+                            </button>
+                            <div x-show="activeAccordion==id" x-collapse x-cloak class="px-2">
+                                <div class="flex flex-col gap-2 pt-6 pb-10">
+                                    @if ($application->build_pack === 'dockercompose')
+                                        <div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
+                                            <div class="flex gap-2">
+                                                <x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/"
+                                                    id="application.base_directory" label="Base Directory"
+                                                    helper="Directory to use as root. Useful for monorepos." />
+                                                <x-forms.input x-bind:disabled="initLoadingCompose"
+                                                    placeholder="/docker-compose.yaml"
+                                                    id="application.docker_compose_location"
+                                                    label="Docker Compose Location"
+                                                    helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>" />
+                                            </div>
+                                            <div class="w-96">
+                                                <x-forms.checkbox instantSave
+                                                    id="application.settings.is_preserve_repository_enabled"
+                                                    label="Preserve Repository During Deployment"
+                                                    helper="Git repository (based on the base directory settings) will be copied to the deployment directory." />
+                                            </div>
+                                            <div class="pt-4">The following commands are for advanced use cases. Only
+                                                modify them if you
+                                                know what are
+                                                you doing.</div>
+                                            <div class="flex gap-2">
+                                                <x-forms.input placeholder="docker compose build"
+                                                    x-bind:disabled="initLoadingCompose"
+                                                    id="application.docker_compose_custom_build_command"
+                                                    helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} build</span>"
+                                                    label="Custom Build Command" />
+                                                <x-forms.input placeholder="docker compose up -d"
+                                                    x-bind:disabled="initLoadingCompose"
+                                                    id="application.docker_compose_custom_start_command"
+                                                    helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} up -d</span>"
+                                                    label="Custom Start Command" />
+                                            </div>
+                                        </div>
+                                    @else
+                                        <div class="flex flex-col gap-2 xl:flex-row">
+                                            <x-forms.input placeholder="/" id="application.base_directory"
+                                                label="Base Directory"
+                                                helper="Directory to use as root. Useful for monorepos." />
+                                            @if ($application->build_pack === 'dockerfile' && !$application->dockerfile)
+                                                <x-forms.input placeholder="/Dockerfile"
+                                                    id="application.dockerfile_location" label="Dockerfile Location"
+                                                    helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>" />
+                                            @endif
+
+                                            @if ($application->build_pack === 'dockerfile')
+                                                <x-forms.input id="application.dockerfile_target_build"
+                                                    label="Docker Build Stage Target"
+                                                    helper="Useful if you have multi-staged dockerfile." />
+                                            @endif
+                                            @if ($application->could_set_build_commands())
+                                                @if ($application->settings->is_static)
+                                                    <x-forms.input placeholder="/dist"
+                                                        id="application.publish_directory" label="Publish Directory"
+                                                        required />
+                                                @else
+                                                    <x-forms.input placeholder="/" id="application.publish_directory"
+                                                        label="Publish Directory" />
+                                                @endif
+                                            @endif
+
+                                        </div>
+                                        @if ($this->application->is_github_based() && !$this->application->is_public_repository())
+                                            <div class="pb-4">
+                                                <x-forms.textarea
+                                                    helper="Gitignore-style rules to filter Git based webhook deployments."
+                                                    placeholder="src/pages/**" id="application.watch_paths"
+                                                    label="Watch Paths" />
+                                            </div>
+                                        @endif
+                                        <x-forms.input
+                                            helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
+                                            placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
+                                            id="application.custom_docker_run_options"
+                                            label="Custom Docker Options" />
+
+                                        @if ($application->build_pack !== 'dockercompose')
+                                            <div class="pt-2 w-96">
+                                                <x-forms.checkbox
+                                                    helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
+                                                    instantSave id="application.settings.is_build_server_enabled"
+                                                    label="Use a Build Server? (experimental)" />
+                                            </div>
+                                        @endif
+                                        @if ($application->could_set_build_commands())
+                                            <div class="w-96">
+                                                <x-forms.checkbox instantSave id="application.settings.is_static"
+                                                    label="Is it a static site?"
+                                                    helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
+                                            </div>
+                                        @endif
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 @endif
-            @else
-                <x-forms.input
-                    helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
-                    placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
-                    id="application.custom_docker_run_options" label="Custom Docker Options" />
-            @endif
+            </div>
             @if ($application->build_pack === 'dockercompose')
                 <x-forms.button wire:target='initLoadingCompose'
                     x-on:click="$wire.dispatch('loadCompose', false)">Reload Compose File</x-forms.button>
diff --git a/resources/views/livewire/source/github/create.blade.php b/resources/views/livewire/source/github/create.blade.php
index 97942fbdb..e93b23b78 100644
--- a/resources/views/livewire/source/github/create.blade.php
+++ b/resources/views/livewire/source/github/create.blade.php
@@ -13,7 +13,7 @@
             this.activeAccordion = (this.activeAccordion == id) ? '' : id
         }
     }" class="relative w-full py-2 mx-auto overflow-hidden text-sm font-normal rounded-md">
-        <div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
+        <div x-data="{ id: $id('accordion') }" class="cursor-pointer">
             <button @click="setActiveAccordion(id)"
                 class="flex items-center justify-between w-full px-1 py-2 text-left select-none hover:dark:text-white hover:bg-white/5"
                 type="button">