sync_form.go.html

{{/* Copyright (c) ClaceIO, LLC */}}
{{/* SPDX-License-Identifier: Apache-2.0 */}}
{{/* Sync create form (/syncs/create) with a Validate (dry run) option */}}
{{ template "page_open" (dict "Ctx" . "Main" "space-y-4 max-w-2xl") }}
          <!-- Header -->
          <div
            class="page-header flex items-center gap-2 flex-wrap mb-2 md:mb-6">
            {{ template "hamburger" . }}
            <div>
              {{ template "page_title" "Syncs" }}
              <nav
                aria-label="Breadcrumb"
                class="breadcrumbs text-xs text-base-content/70 p-0">
                <ul>
                  <li><a href="{{ .AppPath }}/syncs">Syncs</a></li>
                  <li>new source</li>
                </ul>
              </nav>
              <h2 class="text-xl font-semibold">Add sync source</h2>
              <p class="page-desc text-sm text-base-content/70">
                Apps declared in the source are created and kept updated
                automatically
              </p>
            </div>
          </div>

          {{ template "page_progress" }}


{{ block "op_form" . }}
          <div id="op-form-wrap" class="space-y-4">
          {{ template "error_alert" .Data.Error }}

          {{ template "validation_alert" (dict
            "Validated" .Data.Validated
            "Value" .Data.Values.path
            "Suffix" "can be applied"
            "BreakAll" true)
          }}


          <form
            method="post"
            action="{{ .AppPath }}/syncs/create"
            id="op-form"
            hx-post="{{ .AppPath }}/syncs/create"
            hx-target="#op-form-wrap"
            hx-swap="outerHTML show:top showTarget:#op-form-wrap"
            hx-indicator="#page-progress, #op-form"
            class="card bg-base-100 border border-base-300">
            <div class="card-body p-5 gap-5">
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium mb-1" for="sync-path"
                    >Source</label
                  >
                  <input
                    id="sync-path"
                    name="path"
                    type="text"
                    required
                    value="{{ .Data.Values.path }}"
                    placeholder="github.com/org/repo/apps.star"
                    class="input w-full font-mono text-sm" />
                  <p class="text-xs text-base-content/70 mt-1">
                    Git url (or server directory) of the apply file declaring
                    the apps
                  </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-[1fr_1.6fr_1fr] gap-4">
                  <div>
                    <label
                      class="block text-sm font-medium mb-1"
                      for="sync-branch"
                      >Git branch</label
                    >
                    <input
                      id="sync-branch"
                      name="git_branch"
                      type="text"
                      value="{{ .Data.Values.git_branch }}"
                      placeholder="main"
                      class="input w-full font-mono text-sm" />
                  </div>
                  <div>
                    <label
                      class="block text-sm font-medium mb-1"
                      for="sync-git-auth"
                      >Git auth</label
                    >
                    <select
                      id="sync-git-auth"
                      name="git_auth"
                      class="select w-full font-mono text-sm">
                      {{ $gitAuth := .Data.Values.git_auth }}
                      <option value="" {{ if not $gitAuth }}selected{{ end }}>
                        none (public repo)
                      </option>
                      {{ template "select_options" (dict "Options" .Data.GitAuthOptions "Current" $gitAuth) }}
                    </select>
                  </div>
                  <div>
                    <label
                      class="block text-sm font-medium mb-1"
                      for="sync-minutes"
                      >Schedule</label
                    >
                    <label class="input w-full">
                      <span class="text-xs text-base-content/70">every</span>
                      <input
                        id="sync-minutes"
                        name="minutes"
                        type="number"
                        min="1"
                        value="{{ .Data.Values.minutes }}"
                        placeholder="15"
                        class="text-sm tabular-nums" />
                      <span class="text-xs text-base-content/70">min</span>
                    </label>
                  </div>
                </div>

                <div class="flex flex-col gap-4 pt-1">
                  {{ $canApprove := or (index .Data.Perms "app:approve") (index .Data.Perms "admin") }}
                  <label
                    class="flex items-center gap-3 {{ if $canApprove }}
                      cursor-pointer
                    {{ else }}
                      tooltip tooltip-top
                    {{ end }}"
                    {{ if not $canApprove }}
                      data-tip="requires app:approve"
                    {{ end }}>
                    <input
                      type="checkbox"
                      name="approve"
                      class="checkbox checkbox-sm checkbox-primary"
                      {{ if .Data.Values.approve }}checked{{ end }}
                      {{ if not $canApprove }}disabled{{ end }} />
                    <span class="text-sm">
                      Approve
                      <span class="block text-xs text-base-content/70">
                        Automatically approve permissions the synced apps
                        request
                      </span>
                    </span>
                  </label>
                  {{ $canPromote := index .Data.Perms "app:promote" }}
                  {{ $mode := .Data.Values.promote_mode }}
                  <fieldset
                    class="border border-base-300 rounded-box px-4 pb-3 pt-1">
                    <legend class="text-sm font-medium px-1">Promotion</legend>
                    <div
                      class="flex flex-col gap-2 {{ if not $canPromote }}tooltip tooltip-top{{ end }}"
                      {{ if not $canPromote }}
                        data-tip="requires app:promote"
                      {{ end }}>
                      <label
                        class="flex items-center gap-3 {{ if $canPromote }}cursor-pointer{{ end }}">
                        <input
                          type="radio"
                          name="promote_mode"
                          value="none"
                          class="radio radio-sm radio-primary"
                          {{ if or (eq $mode "none") (not $mode) }}checked{{ end }}
                          {{ if not $canPromote }}disabled{{ end }} />
                        <span class="text-sm">
                          No promotion
                          <span class="block text-xs text-base-content/70">
                            Changes stay in staging for manual promotion
                          </span>
                        </span>
                      </label>
                      <label
                        class="flex items-center gap-3 {{ if $canPromote }}cursor-pointer{{ end }}">
                        <input
                          type="radio"
                          name="promote_mode"
                          value="noverify"
                          class="radio radio-sm radio-primary"
                          {{ if eq $mode "noverify" }}checked{{ end }}
                          {{ if not $canPromote }}disabled{{ end }} />
                        <span class="text-sm">
                          Promote without verification
                          <span class="block text-xs text-base-content/70">
                            Push changes from staging to prod on each sync run
                          </span>
                        </span>
                      </label>
                      <label
                        class="flex items-center gap-3 {{ if $canPromote }}cursor-pointer{{ end }}">
                        <input
                          type="radio"
                          name="promote_mode"
                          value="verify"
                          class="radio radio-sm radio-primary"
                          {{ if eq $mode "verify" }}checked{{ end }}
                          {{ if not $canPromote }}disabled{{ end }} />
                        <span class="text-sm">
                          Promote with verification
                          <span class="block text-xs text-base-content/70">
                            Reload app containers to verify staging before
                            promoting; a failed verification is rolled back
                          </span>
                        </span>
                      </label>
                    </div>
                  </fieldset>
                </div>
              </div>

              <div class="card-actions justify-end pt-2">
                <a href="{{ .AppPath }}/syncs" class="btn btn-ghost btn-sm"
                  >Cancel</a
                >
                <button
                  type="submit"
                  name="action"
                  value="validate"
                  {{ if index .Data.Perms "sync:create" }}
                    data-tip="Dry run: apply the source without committing any
                    changes"
                  {{ else }}
                    disabled data-tip="requires sync:create"
                  {{ end }}
                  class="btn btn-outline btn-sm transition-transform duration-150 active:scale-95 tooltip tooltip-top">
                  Validate
                </button>
                <button
                  type="submit"
                  name="action"
                  value="create"
                  {{ if not (index .Data.Perms "sync:create") }}
                    disabled data-tip="requires sync:create"
                  {{ end }}
                  class="btn btn-primary btn-sm transition-transform duration-150 active:scale-95 {{ if not (index .Data.Perms "sync:create") }}tooltip tooltip-top{{ end }}">
                  Add sync source
                </button>
              </div>
            </div>
          </form>
          </div>
          {{ end }}
{{ template "page_close" . }}