ui: fix welcome third screen to show the first device added

Author: AntonyRafael

ui/src/components/Welcome/WelcomeThirdScreen.vue

@@ -14,6 +14,7 @@
         <v-card class="pa-2" tile :elevation="0">
           <strong>Hostname</strong>
         </v-card>
+        <v-divider />
         <v-card
           class="pa-2"
           tile
@@ -27,6 +28,7 @@
         <v-card class="pa-2" tile :elevation="0">
           <strong>Operation System</strong>
         </v-card>
+        <v-divider />
         <v-card
           class="pa-2"
           tile

ui/src/store/modules/devices.ts

@@ -232,9 +232,9 @@ export const devices: Module<DevicesState, State> = {
         const res = await apiDevice.fetchDevices(
           1,
           1,
-          null,
+          undefined,
           "pending",
-          null,
+          undefined,
           "",
         );
         context.commit("setDevice", res.data[0]);

ui/tests/components/Welcome/WelcomeThirdScreen.spec.ts

@@ -1,8 +1,8 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import WelcomeThirdScreen from "../../../src/components/Welcome/WelcomeThirdScreen.vue";
 import { createStore } from "vuex";
+import WelcomeThirdScreen from "../../../src/components/Welcome/WelcomeThirdScreen.vue";
 import { key } from "../../../src/store";
 import routes from "../../../src/router";
 
@@ -66,14 +66,14 @@ describe("WelcomeThirdScreen", () => {
   it("Data is defined", () => {
     expect(wrapper.vm.$data).toBeDefined();
   });
-  it('Process data in the computed', () => {
+  it("Process data in the computed", () => {
     expect(wrapper.vm.getPendingDevice).toEqual(device);
   });
-    //////
+  //////
   // HTML validation
   //////
 
-  it('Renders the template with data', () => {
+  it("Renders the template with data", () => {
     expect(wrapper.find('[data-test="deviceName-field"]').text()).toEqual(device.name);
     expect(wrapper.find('[data-test="devicePrettyName-field"]').text()).toEqual(device.info.pretty_name);
   });

ui/tests/components/Welcome/__snapshots__/WelcomeThirdScreen.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`WelcomeThirdScreen > Renders the component 1`] = `
       <div class=\\"v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-2\\" tile=\\"\\">
         <!---->
         <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light\\" style=\\"height: 0px; --v-progress-linear-height: 2px;\\" role=\\"progressbar\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+          <div class=\\"v-progress-linear v-theme--light\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
             <!---->
             <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
             <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
@@ -26,10 +26,11 @@ exports[`WelcomeThirdScreen > Renders the component 1`] = `
         <!---->
         <!----><span class=\\"v-card__underlay\\"></span>
       </div>
+      <hr class=\\"v-divider v-theme--light\\" aria-orientation=\\"horizontal\\" role=\\"separator\\">
       <div class=\\"v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-2\\" tile=\\"\\" data-test=\\"deviceName-field\\">
         <!---->
         <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light\\" style=\\"height: 0px; --v-progress-linear-height: 2px;\\" role=\\"progressbar\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+          <div class=\\"v-progress-linear v-theme--light\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
             <!---->
             <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
             <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
@@ -51,7 +52,7 @@ exports[`WelcomeThirdScreen > Renders the component 1`] = `
       <div class=\\"v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-2\\" tile=\\"\\">
         <!---->
         <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light\\" style=\\"height: 0px; --v-progress-linear-height: 2px;\\" role=\\"progressbar\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+          <div class=\\"v-progress-linear v-theme--light\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
             <!---->
             <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
             <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
@@ -68,10 +69,11 @@ exports[`WelcomeThirdScreen > Renders the component 1`] = `
         <!---->
         <!----><span class=\\"v-card__underlay\\"></span>
       </div>
+      <hr class=\\"v-divider v-theme--light\\" aria-orientation=\\"horizontal\\" role=\\"separator\\">
       <div class=\\"v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-2\\" tile=\\"\\" data-test=\\"devicePrettyName-field\\">
         <!---->
         <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light\\" style=\\"height: 0px; --v-progress-linear-height: 2px;\\" role=\\"progressbar\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+          <div class=\\"v-progress-linear v-theme--light\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
             <!---->
             <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
             <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
@@ -85,7 +87,7 @@ exports[`WelcomeThirdScreen > Renders the component 1`] = `
         </div>
         <!---->
         <!---->
-        <div><i data-test=\\"type-icon\\" class=\\"fl-archlinux\\" style=\\"font-size: 20px;\\"></i> Linux</div>
+        <div><i data-test=\\"type-icon\\" class=\\"fl-archlinux mr-1\\" style=\\"font-size: 18px;\\"></i> Linux</div>
         <!---->
         <!----><span class=\\"v-card__underlay\\"></span>
       </div>