Skip to content

Browsers

The Browsers view allows the user to select a web browser to start in a cloud workstation. It is one of the sub-views the overview page can display. It is shown as the default sub-view when the user navigates to the overview view.

Architecture

To display a list of available web browsers in the view, we have two options:

  • Hardcode the list of available web browsers in the web app
  • Retrieve the list of available web browsers from our database

The first option was chosen as it is simpler. It means though that when we want to add a new web browser we need to make a new web release. In my opinion however this is the better option as the list of available web browsers is in version control in this way. We can look up what was the list in the past for example.

I also didn't like the idea of having to modify the production database by hand to add a new web browser. This may be prone to human error.

Tests

E2E Test

Before implementing the browsers view we will create an E2E test in Qase. Add a new test case to the Common suite named Browsers:

Browsers Test 1

Browsers Test 2

Automated Tests

For the time being, no automated tests will be added for the browsers view.

We do not yet add code to display the Start Workstation view when the user clicks on a browser. So for now there isn't any logic to test. However in future once we create the Start Workstation view we can add automated tests to verify the Start Workstation view is displayed when the user clicks on a browser.

Production Code

Modify app_live.ex to include the list of available browsers in the state:

app_live.ex
  alias DesktermWeb.Workstations

  @allowed_providers ~w(gitlab github google apple azure discord)
  @error_message "Login failed"
  @path "/app"

  @modal_positive_event Authentication.modal_positive_event()
  @modal_negative_event Authentication.modal_negative_event()

  @impl true
  def mount(_params, session, socket) do
    {:ok,
     assign(socket,
       browsers: Workstations.get_browsers(),
       email: nil,
       is_verifying: false,
       loading: nil,
       modal: Authentication.get_modal(),
       otp_code: %{},
       session_data: session,
       should_show_modal: false,
       view: "login"
     )}
  end

Now modify app_live.html.heex to pass the list of available browsers into the overview view:

app_live.html.heex
<%= if @view == "overview" do %>
  <DesktermWeb.Views.overview browsers={@browsers} />
<% end %>

In the lib/deskterm_web/live/utilities directory of your Phoenix project, add a new file named workstations.ex and populate it with the below content:

workstations.ex
defmodule DesktermWeb.Workstations do
  @browsers ~w(chrome chromium edge firefox librewolf mullvad opera vivaldi)

  def get_browsers do
    @browsers
  end
end

Modify overview.html.heex to display the browsers sub-view in the content section:

overview.html.heex
<!-- Content -->
    <div class="flex flex-col overflow-hidden ml-4 mb-[120px] lg:ml-0 lg:mb-4">
      <div class="
          flex-1
          min-h-0
          w-full
          rounded-2xl
          shadow-sm
          py-0
          pl-0
          pr-4
          flex
          flex-col
          overflow-hidden">
        <div class="
            flex-1
            min-h-0
            overflow-y-auto
            no-scrollbar">
          <DesktermWeb.Views.workstations workstations={@browsers} />
        </div>
      </div>
    </div>

In the lib/deskterm_web/views/templates directory, create a new file named workstations.html.heex and populate it with the below content:

workstations.html.heex
<ul class="
    grid
    grid-cols-3
    sm:grid-cols-6
    gap-4
    bg-gray-900/50
    rounded-2xl
    p-4
    border
    border-white/10">
  <li
    :for={workstation <- @workstations}
    class="
      flex
      flex-col
      items-center
      gap-2
      rounded-2xl
      py-4
      px-4
      cursor-pointer
      transition-transform
      duration-200
      hover:scale-110"
  >
    <img
      src={"/images/logos/workstations/#{workstation}.svg"}
      alt={String.capitalize(workstation)}
      class="w-full"
    />
    <span class="text-white text-sm">{String.capitalize(workstation)}</span>
  </li>
</ul>

The above view is generic and can later also be used to display available apps and desktops, not just browsers.

We will now add the necessary logos to our repository. In the directory priv/static/images/logos create a new directory named workstations. Inside this new directory copy the necessary browser logos. You can find them from priv/static/images/home where the logos for our home page are stored. The home page already includes some logos for the web browsers.

Now the browsers view should look something like the below:

Browsers View Desktop

On mobile, the view should look something like this:

Browsers View Mobile