feat(ui): tag search/dropdown menu (#523)

Introduces a UI component that improves the UX experience when adding or
creating workspace tags.

internal/http/html/static/css/input.css

@@ -9,14 +9,14 @@
   [x-cloak] {
     display: none !important;
   }
-  button {
+  .btn {
     @apply font-bold py-1 px-3 bg-gray-200 shadow-sm shadow-slate-500;
   }
-  button:hover {
+  .btn:hover {
     @apply bg-gray-300;
   }
   .btn-danger {
-    @apply text-red-400;
+    @apply font-bold py-1 px-3 bg-gray-200 shadow-sm shadow-slate-500 text-red-400;
   }
   .btn-danger:hover {
     @apply bg-red-400 text-white;
@@ -37,7 +37,7 @@
     @apply border-2 border-red-400 shadow-sm shadow-red-200;
   }
   select {
-    @apply py-2 px-4 bg-gray-200 shadow-sm shadow-slate-500;
+    @apply py-2 px-4 bg-gray-200 shadow-sm shadow-slate-500 cursor-pointer;
   }
   #content-header-title a {
     @apply text-blue-600

internal/http/html/static/css/output.css

@@ -444,7 +444,7 @@ a:hover {
   display: none !important;
 }
 
-button {
+.btn {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
   padding-top: 0.25rem;
@@ -459,14 +459,26 @@ button {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-button:hover {
+.btn:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
 .btn-danger {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: #64748b;
+  --tw-shadow: var(--tw-shadow-colored);
 }
 
 .btn-danger:hover {
@@ -515,6 +527,7 @@ input.error {
 }
 
 select {
+  cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
   padding-top: 0.5rem;
@@ -716,6 +729,14 @@ select {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -765,6 +786,10 @@ select {
   margin-bottom: 1.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -837,6 +862,10 @@ select {
   max-width: 56rem;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -913,6 +942,14 @@ select {
   word-break: break-all;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1013,6 +1050,11 @@ select {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-\[size\:14px\] {
   background-size: 14px;
 }
@@ -1042,6 +1084,11 @@ select {
   padding-right: 0.25rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1057,6 +1104,11 @@ select {
   padding-bottom: 0.125rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1166,6 +1218,31 @@ select {
   text-decoration-line: underline;
 }
 
+.shadow-transparent {
+  --tw-shadow-color: transparent;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
+.focus\:bg-gray-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .peer:checked ~ .peer-checked\:block {
   display: block;
 }

internal/http/html/static/js/search_dropdown.js

@@ -0,0 +1,21 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('search_dropdown', (existing = [], available = []) => ({
+    open: false,
+    close(focusAfter) {
+      if (! this.open) return
+      this.open = false
+      focusAfter && focusAfter.focus()
+    },
+    search: '',
+    existing: existing,
+    available: available,
+    get filterAvailable() {
+      return this.available?.filter(
+        i => i.includes(this.search)
+      ).slice(0, 3)
+    },
+    get isNew() {
+      return this.search !== '' && !this.available?.includes(this.search) && !this.existing?.includes(this.search)
+    },
+  }))
+})

internal/http/html/static/templates/content/agent_token_list.tmpl

@@ -4,7 +4,7 @@
 
 {{ define "content-header-actions" }}
   <form action="{{ newAgentTokenPath .Organization }}" method="GET">
-    <button>New Agent Token</button>
+    <button class="btn">New Agent Token</button>
   </form>
 {{ end }}
 
@@ -21,7 +21,7 @@
     <div>
       {{ template "identifier" . }}
       <form action="{{ deleteAgentTokenPath .ID }}" method="POST">
-        <button onclick="return confirm('Are you sure you want to delete?')">delete</button>
+        <button class="btn-danger" onclick="return confirm('Are you sure you want to delete?')">delete</button>
       </form>
     </div>
   </div>

internal/http/html/static/templates/content/agent_token_new.tmpl

@@ -11,7 +11,7 @@
       <textarea class="text-input w-96" rows="3" type="text" name="description" id="description" required></textarea>
     </div>
     <div class="field">
-      <button class="w-40">Create token</button>
+      <button class="btn w-40">Create token</button>
     </div>
   </form>
 {{ end }}

internal/http/html/static/templates/content/consent.tmpl

@@ -11,7 +11,7 @@
       </span>
       <form method="POST">
         <button class="btn-danger" name="consented" value="false">Decline</button>
-        <button name="consented" value="true">Accept</button>
+        <button class="btn" name="consented" value="true">Accept</button>
       </form>
     </div>
   </div>

internal/http/html/static/templates/content/module_list.tmpl

@@ -4,7 +4,7 @@
 
 {{ define "content-header-actions" }}
   <form action="{{ newModulePath .Organization }}" method="GET">
-    <button id="list-module-vcs-providers-button">Publish</button>
+    <button class="btn" id="list-module-vcs-providers-button">Publish</button>
   </form>
 {{ end }}
 

internal/http/html/static/templates/content/module_new.tmpl

@@ -35,7 +35,7 @@
             <form action="{{ newModulePath $.Organization }}" method="GET">
               <input type="hidden" name="step" id="select-repo-step" value="select-repo">
               <input type="hidden" name="vcs_provider_id" id="vcs_provider_id" value="{{ .ID }}">
-              <button>connect</button>
+              <button class="btn">connect</button>
             </form>
           </div>
         </div>
@@ -52,7 +52,7 @@
       <input type="hidden" name="vcs_provider_id" id="vcs_provider_id" value="{{ .VCSProviderID }}">
       <input type="hidden" name="step" id="select-repo-step" value="confirm-selection">
       <input class="text-input" type="text" name="identifier" id="identifier" value="" placeholder="{owner}/{repository}" required>
-      <button>connect</button>
+      <button class="btn">connect</button>
     </form>
 
     <div id="content-list" class="content-list">
@@ -64,7 +64,7 @@
               <input type="hidden" name="vcs_provider_id" id="vcs_provider_id" value="{{ $.VCSProviderID }}">
               <input type="hidden" name="step" id="select-repo-step" value="confirm-selection">
               <input type="hidden" name="identifier" id="identifier" value="{{ . }}">
-              <button>connect</button>
+              <button class="btn">connect</button>
             </form>
           </div>
         </div>
@@ -86,7 +86,7 @@
       <form action="{{ createModulePath $.Organization }}" method="POST">
         <input type="hidden" name="vcs_provider_id" id="vcs_provider_id" value="{{ .VCSProvider.ID }}">
         <input type="hidden" name="identifier" id="identifier" value="{{ .Repo }}">
-        <button>connect</button>
+        <button class="btn">connect</button>
       </form>
     </div>
   {{ end }}

internal/http/html/static/templates/content/organization_edit.tmpl

@@ -12,7 +12,7 @@
       <input class="text-input w-80" type="text" name="new_name" id="name" value="{{ .Name }}" required>
     </div>
     <div class="field">
-      <button class="w-72" {{ insufficient $canDelete }}>Update organization name</button>
+      <button class="btn w-72" {{ insufficient $canDelete }}>Update organization name</button>
     </div>
   </form>
   <hr class="my-4">

internal/http/html/static/templates/content/organization_list.tmpl

@@ -4,7 +4,7 @@
 
 {{ define "content-header-actions" }}
   <form action="{{ newOrganizationPath }}" method="GET">
-    <button {{ if not .CanCreate }}disabled title="organization creation has been restricted to site admins"{{ end }} id="new-organization-button">New Organization</button>
+    <button class="btn" {{ if not .CanCreate }}disabled title="organization creation has been restricted to site admins"{{ end }} id="new-organization-button">New Organization</button>
   </form>
 {{ end }}
 

internal/http/html/static/templates/content/organization_new.tmpl

@@ -11,7 +11,7 @@
       <input type="text" name="name" id="name" required>
     </div>
     <div>
-      <button id="create-organization-button">Create organization</button>
+      <button class="btn" id="create-organization-button">Create organization</button>
     </div>
   </form>
 {{ end }}

internal/http/html/static/templates/content/profile.tmpl

@@ -8,6 +8,6 @@
   <p>You are logged in as <span class="bg-gray-200">{{ .User.Username }}</span></p>
   <br>
   <form action="{{ logoutPath }}" method="POST">
-    <button id="logout">logout</button>
+    <button class="btn" id="logout">logout</button>
   </form>
 {{ end }}

internal/http/html/static/templates/content/site_admin_login.tmpl

@@ -9,7 +9,7 @@
         <input class="text-input w-80" type="password" name="token" id="token" required>
       </div>
       <div>
-        <button>Login</button>
+        <button class="btn">Login</button>
       </div>
     </form>
   </div>

internal/http/html/static/templates/content/team_get.tmpl

@@ -49,7 +49,7 @@
       <span for="manage_modules">Allows members to publish and delete modules within the organization.</span>
     </div>
     <div class="field">
-      <button class="w-40"
+      <button class="btn w-40"
         {{ if .Team.IsOwners }}
           title="cannot edit permissions of owners team" disabled
         {{ else }}
@@ -69,7 +69,7 @@
         <option value="">No users found</option>
       {{ end }}
     </select>
-    <button {{ insufficient $canAddMember }}>Add member</button>
+    <button class="btn" {{ insufficient $canAddMember }}>Add member</button>
   </form>
   <div id="content-list">
     {{ range .Members }}

internal/http/html/static/templates/content/team_list.tmpl

@@ -5,7 +5,7 @@
 {{ define "content-header-actions" }}
   {{ $canCreate := .CurrentUser.CanAccessOrganization .CreateTeamAction .Organization }}
   <form action="{{ newTeamPath .Organization }}" method="GET">
-    <button id="new-team-button" {{ insufficient $canCreate }}>
+    <button class="btn" id="new-team-button" {{ insufficient $canCreate }}>
       New Team
     </button>
   </form>

internal/http/html/static/templates/content/team_new.tmpl

@@ -11,7 +11,7 @@
       <input type="text" name="name" id="name" required>
     </div>
     <div>
-      <button id="create-team-button">Create team</button>
+      <button class="btn" id="create-team-button">Create team</button>
     </div>
   </form>
 {{ end }}