init from gitlab

ui/src/routes/app/[name]/domains/+page.svelte

@@ -0,0 +1,75 @@
+<script>
+  import { page } from "$app/stores";
+  import {
+    useMutation,
+    useQuery,
+    useQueryClient,
+  } from "@sveltestack/svelte-query";
+  import { addAppDomain, getAppDomainsReport, removeAppDomain } from "$lib/api";
+
+  import QueryDataWrapper from "$common/QueryDataWrapper.svelte";
+  import Card from "$common/Card.svelte";
+  import Icon from "$common/Icon.svelte";
+
+  import AddDomainModal from "./AddDomainModal.svelte";
+  import DomainListItem from "./DomainListItem.svelte";
+
+  const appName = $page.params.name;
+
+  const queryClient = useQueryClient();
+  const queryKey = [{ appName }, "getAppDomainsReport"];
+  const domainsReport = useQuery(queryKey, () => getAppDomainsReport(appName));
+
+  let addDomainModalOpen = false;
+
+  const onSuccess = () => {
+    addDomainModalOpen = false;
+    queryClient.invalidateQueries(queryKey);
+  };
+
+  const addDomainMutation = useMutation(
+    (domain) => addAppDomain(appName, domain),
+    { onSuccess }
+  );
+
+  const removeDomainMutation = useMutation(
+    (domain) => removeAppDomain(appName, domain),
+    { onSuccess }
+  );
+
+  const addDomain = ({ detail }) => $addDomainMutation.mutate(detail.domain);
+  const removeDomain = ({ detail }) =>
+    $removeDomainMutation.mutate(detail.domain);
+
+  let domains = ["bleh.com"];
+  $: if ($domainsReport.isSuccess && $domainsReport.data) {
+    domains = $domainsReport.data["domains"] || [];
+  }
+</script>
+
+<QueryDataWrapper query={domainsReport} action="fetching domains">
+  <Card title="Domains">
+    {#if domains.length === 0}
+      <p>No domains configured</p>
+    {:else}
+      <div class="flex flex-col gap-3 w-60">
+        {#each domains as domain, i}
+          <DomainListItem {domain} on:removeDomain={removeDomain} />
+        {/each}
+      </div>
+    {/if}
+
+    <div slot="actions">
+      <button class="btn gap-3" on:click={() => (addDomainModalOpen = true)}>
+        Add Domain
+        <Icon type="add" />
+      </button>
+    </div>
+  </Card>
+</QueryDataWrapper>
+
+<AddDomainModal
+  loading={$addDomainMutation.isLoading}
+  bind:open={addDomainModalOpen}
+  on:addDomain={addDomain}
+/>

ui/src/routes/app/[name]/domains/AddDomainModal.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Modal from "$common/Modal.svelte";
+  import { createEventDispatcher } from "svelte";
+  import { page } from "$app/stores";
+
+  export let open;
+  export let loading;
+
+  const appName = $page.params.name;
+  const dispatch = createEventDispatcher();
+
+  let domain;
+  const signalAddDomain = () => dispatch("addDomain", { domain });
+</script>
+
+<Modal
+  name="add-domain"
+  title="Add a new domain for {appName}"
+  bind:open
+  preventClose={loading}
+>
+  <div class="form-control">
+    <label class="input-group">
+      <span>Domain</span>
+      <input
+        type="text"
+        placeholder="foo.example.com"
+        class="input input-bordered"
+        bind:value={domain}
+      />
+    </label>
+  </div>
+
+  <div class="mt-4">
+    <button class="btn" class:loading on:click={signalAddDomain}>
+      Confirm
+    </button>
+  </div>
+</Modal>

ui/src/routes/app/[name]/domains/DomainListItem.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { page } from "$app/stores";
+  import { removeAppDomain } from "$lib/api";
+  import { createEventDispatcher } from "svelte";
+
+  import Icon from "$common/Icon.svelte";
+  import ConfirmationModal from "$common/ConfirmationModal.svelte";
+  import Alert from "$common/Alert.svelte";
+
+  export let domain = "";
+  export let loading = false;
+
+  let domainHref = domain.startsWith("http") ? domain : `https://${domain}`;
+  const dispatch = createEventDispatcher();
+  const signalRemoved = () => dispatch("removeDomain", { domain });
+
+  let confirmationModalOpen = false;
+</script>
+
+<div
+  class="flex flex-row items-center gap-2 w-auto shadow-lg bg-base-100 p-2 rounded-lg"
+>
+  <div>
+    <a class="link link-hover" href={domainHref}
+      ><span class="text-lg">{domain}</span></a
+    >
+  </div>
+  <div class="flex-grow" />
+  <div class="">
+    <button
+      class="btn bg-base-100 hover:btn-error btn-sm btn-outline gap-2 btn-circle"
+      class:loading
+      on:click={() => (confirmationModalOpen = true)}
+    >
+      {#if !loading}
+        <Icon type="delete" size="sm" />
+      {/if}
+    </button>
+  </div>
+</div>
+
+<ConfirmationModal
+  name="remove-domain-modal"
+  title="Removing Domain"
+  action="remove domain {domain}"
+  on:accepted={signalRemoved}
+  bind:open={confirmationModalOpen}
+  doingAction={loading}
+/>