Secrets modal - new layout (#1441)

* Secrets modal - new layout

* Layout adjustments

* Layout adjustments

* Applying suggestions

* Update lib/livebook_web/live/session_live/secrets_component.ex

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

lib/livebook_web/live/session_live/secrets_component.ex

@@ -22,9 +22,41 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
       <h3 class="text-2xl font-semibold text-gray-800">
         Add secret
       </h3>
+      <div class="flex flex-columns gap-4">
+        <%= if @select_secret_ref do %>
+          <div class="basis-1/2 grow-0 pr-4 border-r">
+            <div class="flex flex-col space-y-4">
               <p class="text-gray-700">
-        Enter the secret name and its value.
+                Choose a secret
               </p>
+              <div class="flex flex-wrap gap-4">
+                <%= for secret <- @secrets do %>
+                  <.choice_button
+                    active={secret.name == @preselect_name}
+                    value={secret.name}
+                    phx-target={@myself}
+                    phx-click="select_secret"
+                    class={
+                      if secret.name == @preselect_name,
+                        do: "text-xs rounded-full",
+                        else: "text-xs rounded-full text-gray-700 hover:bg-gray-200"
+                    }
+                  >
+                    <%= secret.name %>
+                  </.choice_button>
+                <% end %>
+                <%= if @secrets == [] do %>
+                  <div class="w-full text-center text-gray-400 border rounded-lg p-8">
+                    <.remix_icon icon="folder-lock-line" class="align-middle text-2xl" />
+                    <span class="mt-1 block text-sm text-gray-700">
+                      Secrets not found. <br /> Add to see them here.
+                    </span>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        <% end %>
         <.form
           let={f}
           for={:data}
@@ -33,8 +65,14 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
           autocomplete="off"
           phx-target={@myself}
           errors={data_errors(@data)}
+          class="basis-1/2 grow"
         >
           <div class="flex flex-col space-y-4">
+            <%= if @select_secret_ref do %>
+              <p class="text-gray-700">
+                Add new secret
+              </p>
+            <% end %>
             <.input_wrapper form={f} field={:name}>
               <div class="input-label">
                 Name <span class="text-xs text-gray-500">(alphanumeric and underscore)</span>
@@ -57,26 +95,14 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
             </.input_wrapper>
             <div class="flex space-x-2">
               <button class="button-base button-blue" type="submit" disabled={f.errors != []}>
-              Save
+                <.remix_icon icon="add-line" class="align-middle" />
+                <span class="font-normal">Add</span>
               </button>
               <%= live_patch("Cancel", to: @return_to, class: "button-base button-outlined-gray") %>
             </div>
           </div>
         </.form>
-      <%= if @select_secret_ref do %>
+      </div>
-        <h3 class="text-2xl font-semibold text-gray-800">
-          Select secret
-        </h3>
-        <.form
-          let={_}
-          for={:secrets}
-          phx-submit="save_secret"
-          phx-change="select_secret"
-          phx-target={@myself}
-        >
-          <.select name="secret" selected={@preselect_name} options={secret_options(@secrets)} />
-        </.form>
-      <% end %>
     </div>
     """
   end
@@ -96,7 +122,7 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
     end
   end
 
-  def handle_event("select_secret", %{"secret" => secret_name}, socket) do
+  def handle_event("select_secret", %{"value" => secret_name}, socket) do
     {:noreply,
      socket |> push_patch(to: socket.assigns.return_to) |> push_secret_selected(secret_name)}
   end
@@ -126,8 +152,6 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do
   defp data_error("value", ""), do: "can't be blank"
   defp data_error(_key, _value), do: nil
 
-  defp secret_options(secrets), do: [{"", ""} | Enum.map(secrets, &{&1.name, &1.name})]
-
   defp push_secret_selected(%{assigns: %{select_secret_ref: nil}} = socket, _), do: socket
 
   defp push_secret_selected(%{assigns: %{select_secret_ref: ref}} = socket, secret_name) do