Apps

The Apps view allows the user to select an app to start in a cloud workstation. It is one of the sub-views the overview page can display.

Architecture

The Apps view follows the same architecture as the Browsers view. For more information, please see the Architecture section on the Browsers page of this guide.

Tests

E2E Test

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

Automated Tests

We already added an automated test for verifying that the workstation launch view is displayed when the user selects a workstation. Please see the Launch Workstation page of this guide for more information.

There is no need to add separate tests for the app selection since it is already covered by the generic workstation selection test.

Production Code

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

app_live.ex

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

Furthermore add a handler for the new event select_overview_view:

app_live.ex

@impl true
def handle_event("select_overview_view", %{"view" => view}, socket) do
  socket =
    socket
    |> assign(overview_view: view)
    |> Phoenix.LiveView.clear_flash()

  {:noreply, socket}
end

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

app_live.html.heex

<%= if @view == "overview" do %>
  <DesktermWeb.Views.overview
    apps={@apps}
    browsers={@browsers}
    overview_view={@overview_view}
  />
<% end %>

Update workstations.ex to include a list of available apps:

workstations.ex

  @apps [
    "Altus",
    "Audacity",
    "Discord",
    "FileZilla",
    "GIMP",
    "IDEA",
    "KeePassXC",
    "Obsidian",
    "Pidgin",
    "PyCharm",
    "Signal",
    "Steam",
    "Telegram",
    "Thunderbird",
    "VS Code",
    "WeChat"
  ]

  def get_apps do
    @apps
  end

Now modify overview.html.heex to display the apps sub-view in the content section when the user has selected the Apps overview sub-view:

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">
      <%= if @overview_view == "apps" do %>
        <DesktermWeb.Views.workstations workstations={@apps} />
      <% end %>

      <%= if @overview_view == "browsers" do %>
        <DesktermWeb.Views.workstations workstations={@browsers} />
      <% end %>

      <%= if @overview_view == "launch" do %>
        <DesktermWeb.Views.launch />
      <% end %>
    </div>
  </div>
</div>

Additionally update all navigation related buttons in overview.html.heex to invoke the new select_overview_view event when the button is clicked:

overview.html.heex

phx-click="select_overview_view"
phx-value-view="browsers"

Naturally adjust the phx-value-view value depending on the button. For the full code please see overview.html.heex.

Furthermore we will do some refactoring to simplify the workstation naming logic and to improve readability of the workstation labels. For the naming logic, we will stop capitalizing the workstation name and instead from the beginning already use the workstation name to display (also for the icon names). For the readability improvements we will reduce the number of workstation columns displayed on certain screen sizes.

Update workstations.ex to have the list of browsers capitalized already:

workstations.ex

@browsers [
  "Chrome",
  "Chromium",
  "Edge",
  "Firefox",
  "LibreWolf",
  "Mullvad",
  "Opera",
  "Vivaldi"
]

Next update workstations.html.heex to adjust the number of workstation columns shown to the user:

workstations.html.heex

<ul
  id="workstations"
  class="
    grid
    grid-cols-3
    sm:grid-cols-5
    md:grid-cols-6
    xl:grid-cols-9
    2xl:grid-cols-11
    gap-4
    bg-gray-900/50
    rounded-2xl
    p-4
    border
    border-white/10"
>

Furthermore remove the capitaliztion logic:

workstations.html.heex

<img
  src={"/images/logos/workstations/#{workstation}.svg"}
  alt={workstation}
  class="w-full"
/>
<span class="text-white text-sm">{workstation}</span>

In line with these changes, naturally also adjust the logo names in priv/static/images/logos/workstations. For example, rename chrome.svg to Chrome.svg.

We will now add the necessary logos. Copy the necessary app logos to the directory priv/static/images/logos/workstations. 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 apps.

Now the apps view should look something like the below:

On mobile, the view should look something like this: