feat(ui): add 'Add Docker Host' button and dialog

ui/src/components/Containers/ContainerAdd.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-btn
+    @click="dialog = !dialog"
+    color="primary"
+    tabindex="0"
+    variant="elevated"
+    aria-label="Dialog Add Docker"
+    @keypress.enter="dialog = !dialog"
+    data-test="device-add-btn"
+    :size="props.size"
+  >
+    Add Docker Host
+  </v-btn>
+
+  <v-dialog v-model="dialog" width="800" transition="dialog-bottom-transition" data-test="dialog">
+    <v-card class="bg-v-theme-surface">
+      <v-card-title class="text-h5 pa-4 bg-primary" data-test="dialog-title">
+        Registering a Docker host
+      </v-card-title>
+
+      <v-card-text class="mt-4 mb-0 pb-1" data-test="dialog-text">
+        <p class="text-body-2 mb-2">
+          In order to add Docker containers to ShellHub, you need to install the
+          ShellHub Connector on the Docker host.
+        </p>
+
+        <p class="text-body-2 mb-2">
+          The easiest way to install the ShellHub Connector is with our automatic
+          one-line installation script, which connects to the Docker API and exposes
+          the running containers within ShellHub.
+        </p>
+
+        <p class="text-body-2 font-weight-bold mt-4">
+          Run the following command on your Docker host:
+        </p>
+
+        <v-text-field
+          :model-value="command()"
+          @click:append="copyCommand"
+          class="code mt-1"
+          variant="outlined"
+          append-icon="mdi-content-copy"
+          readonly
+          active
+          data-test="command-field"
+          density="compact"
+        />
+
+        <v-divider />
+
+        <p class="text-caption mt-2 mb-0">
+          Check the
+          <a
+            :href="'https://docs.shellhub.io/overview/supported-platforms/docker'"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-test="documentation-link"
+          >documentation</a
+          >
+          for more information about integration with Docker host.
+        </p>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" data-test="close-btn" @click="dialog = !dialog">
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useStore } from "../../store";
+import { INotificationsCopy } from "@/interfaces/INotifications";
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: "default",
+    required: false,
+  },
+});
+const store = useStore();
+
+const dialog = ref(false);
+
+const tenant = computed(() => store.getters["auth/tenant"]);
+
+const command = () => {
+  const port = window.location.port ? `:${window.location.port}` : "";
+  const { hostname } = window.location;
+
+  // eslint-disable-next-line vue/max-len
+  return `curl -sSf ${window.location.protocol}//${hostname}${port}/install.sh | TENANT_ID=${tenant.value} SERVER_ADDRESS=${window.location.protocol}//${hostname}${port} sh -s connector`;
+};
+
+const copyCommand = () => {
+  navigator.clipboard.writeText(command());
+  store.dispatch("snackbar/showSnackbarCopy", INotificationsCopy.command);
+};
+</script>
+
+<style lang="scss" scoped>
+.code {
+  font-family: monospace;
+  font-size: 85%;
+  font-weight: normal;
+}
+</style>

ui/src/views/Containers.vue

@@ -22,7 +22,9 @@
 
     <div class="d-flex" data-test="device-header-component-group">
       <TagSelector variant="container" v-if="isContainerList" />
+      <ContainerAdd />
     </div>
+
   </div>
   <div class="mt-2" v-if="show" data-test="device-table-component">
     <Containers />
@@ -51,6 +53,7 @@ import Containers from "../components/Containers/Container.vue";
 import TagSelector from "../components/Tags/TagSelector.vue";
 import BoxMessage from "../components/Box/BoxMessage.vue";
 import handleError from "@/utils/handleError";
+import ContainerAdd from "../components/Containers/ContainerAdd.vue";
 
 const store = useStore();
 const router = useRouter();

ui/tests/components/Containers/ContainerAdd.spec.ts

@@ -0,0 +1,194 @@
+import { DOMWrapper, mount, VueWrapper } from "@vue/test-utils";
+import { createVuetify } from "vuetify";
+import MockAdapter from "axios-mock-adapter";
+import { expect, describe, it, beforeEach, vi } from "vitest";
+import { store, key } from "@/store";
+import ContainerAdd from "@/components/Containers/ContainerAdd.vue";
+import { router } from "@/router";
+import { namespacesApi, billingApi, devicesApi } from "@/api/http";
+import { SnackbarPlugin } from "@/plugins/snackbar";
+
+const node = document.createElement("div");
+node.setAttribute("id", "app");
+document.body.appendChild(node);
+
+const devices = [
+  {
+    uid: "a582b47a42d",
+    name: "39-5e-2a",
+    identity: {
+      mac: "00:00:00:00:00:00",
+    },
+    info: {
+      id: "linuxmint",
+      pretty_name: "Linux Mint 19.3",
+      version: "",
+    },
+    public_key: "----- PUBLIC KEY -----",
+    tenant_id: "fake-tenant-data",
+    last_seen: "2020-05-20T18:58:53.276Z",
+    online: false,
+    namespace: "user",
+    status: "accepted",
+  },
+  {
+    uid: "a582b47a42e",
+    name: "39-5e-2b",
+    identity: {
+      mac: "00:00:00:00:00:00",
+    },
+    info: {
+      id: "linuxmint",
+      pretty_name: "Linux Mint 19.3",
+      version: "",
+    },
+    public_key: "----- PUBLIC KEY -----",
+    tenant_id: "fake-tenant-data",
+    last_seen: "2020-05-20T19:58:53.276Z",
+    online: true,
+    namespace: "user",
+    status: "accepted",
+  },
+];
+
+const members = [
+  {
+    id: "xxxxxxxx",
+    username: "test",
+    role: "owner",
+  },
+];
+
+const billingData = {
+  active: false,
+  status: "canceled",
+  customer_id: "cus_test",
+  subscription_id: "sub_test",
+  current_period_end: 2068385820,
+  created_at: "",
+  updated_at: "",
+  invoices: [],
+};
+
+const namespaceData = {
+  name: "test",
+  owner: "xxxxxxxx",
+  tenant_id: "fake-tenant-data",
+  members,
+  max_devices: 3,
+  devices_count: 3,
+  devices: 2,
+  created_at: "",
+  billing: billingData,
+};
+
+const authData = {
+  status: "",
+  token: "",
+  user: "test",
+  name: "test",
+  tenant: "fake-tenant-data",
+  email: "[email protected]",
+  id: "xxxxxxxx",
+  role: "owner",
+};
+
+const customerData = {
+  id: "cus_test",
+  name: "test",
+  email: "[email protected]",
+  payment_methods: [
+    {
+      id: "test_id",
+      number: "xxxxxxxxxxxx4242",
+      brand: "visa",
+      exp_month: 3,
+      exp_year: 2029,
+      cvc: "",
+      default: true,
+    },
+  ],
+};
+
+const stats = {
+  registered_devices: 3,
+  online_devices: 1,
+  active_sessions: 0,
+  pending_devices: 0,
+  rejected_devices: 0,
+};
+
+describe("ContainerAdd", () => {
+  let wrapper: VueWrapper<InstanceType<typeof ContainerAdd>>;
+
+  const vuetify = createVuetify();
+
+  let mockNamespace: MockAdapter;
+  let mockBilling: MockAdapter;
+  let mockDevices: MockAdapter;
+
+  beforeEach(async () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    vi.useFakeTimers();
+    localStorage.setItem("tenant", "fake-tenant-data");
+
+    mockBilling = new MockAdapter(billingApi.getAxios());
+    mockNamespace = new MockAdapter(namespacesApi.getAxios());
+    mockDevices = new MockAdapter(devicesApi.getAxios());
+
+    mockNamespace.onGet("http://localhost:3000/api/namespaces/fake-tenant-data").reply(200, namespaceData);
+    mockBilling.onGet("http://localhost:3000/api/billing/customer").reply(200, customerData);
+    mockBilling.onGet("http://localhost:3000/api/billing/subscription").reply(200, billingData);
+    mockBilling.onGet("http://localhost:3000/api/billing/devices-most-used").reply(200, devices);
+    mockDevices.onGet("http://localhost:3000/api/devices?filter=&page=1&per_page=10&status=accepted").reply(200, devices);
+    mockDevices.onGet("http://localhost:3000/api/stats").reply(200, stats);
+
+    store.commit("auth/authSuccess", authData);
+    store.commit("namespaces/setNamespace", namespaceData);
+    store.commit("billing/setSubscription", billingData);
+    store.commit("customer/setCustomer", customerData);
+    store.commit("devices/setDeviceChooserStatus", true);
+
+    wrapper = mount(ContainerAdd, {
+      global: {
+        plugins: [[store, key], vuetify, router, SnackbarPlugin],
+      },
+      attachTo: el,
+    });
+  });
+
+  it("Is a Vue instance", () => {
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("Renders the component", () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("Data is defined", () => {
+    expect(wrapper.vm.$data).toBeDefined();
+  });
+
+  it("Renders the component data table", async () => {
+    expect(wrapper.find('[data-test="device-add-btn"]').exists()).toBe(true);
+    await wrapper.findComponent('[data-test="device-add-btn"]').trigger("click");
+    const dialog = new DOMWrapper(document.body);
+    expect(dialog.find('[data-test="dialog"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="dialog-title"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="dialog-text"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="command-field"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="documentation-link"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="close-btn"]').exists()).toBe(true);
+  });
+
+  it("Opens the dialog when add device button is clicked", async () => {
+    const dialog = new DOMWrapper(document.body);
+    expect(dialog.find('[data-test="dialog"]').exists()).toBe(true);
+
+    await wrapper.find('[data-test="device-add-btn"]').trigger("click");
+
+    expect(dialog.find('[data-test="dialog"]').exists()).toBe(true);
+  });
+});

ui/tests/components/Containers/__snapshots__/ContainerAdd.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContainerAdd > Renders the component 1`] = `
+"<button data-v-b6b1870d="" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" tabindex="0" aria-label="Dialog Add Docker" data-test="device-add-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+  <!----><span class="v-btn__content" data-no-activator=""> Add Docker Host </span>
+  <!---->
+  <!---->
+</button>"
+`;