Skip to content

ui/migrate device dialogs #5255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gustavosbarreto merged 5 commits into from
Sep 19, 2025
Merged

ui/migrate device dialogs #5255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5671d7e
refactor(ui): migrate DeviceDelete to MessageDialog
gustavosbarreto Sep 19, 2025
acdc4ed
refactor(ui): migrate DeviceAcceptWarning to MessageDialog
gustavosbarreto Sep 19, 2025
52bd236
refactor(ui): migrate DeviceActionButton to MessageDialog
gustavosbarreto Sep 19, 2025
659c66e
refactor(ui): migrate DeviceRename to FormDialog
gustavosbarreto Sep 19, 2025
bf42430
refactor(ui): migrate DeviceChooser to FormDialog
gustavosbarreto Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 11 additions & 23 deletions ui/src/components/Devices/DeviceAcceptWarning.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
<template>
<BaseDialog
<MessageDialog
v-if="canSubscribeToBilling"
v-model="showDialog"
@close="close"
transition="dialog-bottom-transition"
@cancel="close"
title="You already have a device using the same name"
:description="`${duplicatedDeviceName} name is already taken by another accepted device, please choose another name.`"
icon="mdi-alert"
icon-color="warning"
cancel-text="Close"
cancel-data-test="close-btn"
:show-footer="true"
data-test="device-accept-warning-dialog"
>
<v-card class="bg-v-theme-surface" data-test="card-dialog">
<v-card-title class="pa-3 bg-primary" data-test="card-title">
You already have a device using the same name
</v-card-title>

<v-card-text class="mt-4 mb-3 pb-1">
<p class="mb-2" data-test="card-text">
<strong>{{ duplicatedDeviceName }} </strong> name is already taken by another accepted device,
please choose another name.
</p>
</v-card-text>

<v-card-actions>
<v-spacer />

<v-btn variant="text" data-test="close-btn" @click="close"> Close </v-btn>
</v-card-actions>
</v-card>
</BaseDialog>
/>
</template>

<script setup lang="ts">
import { computed } from "vue";
import hasPermission from "@/utils/permission";
import BaseDialog from "../BaseDialog.vue";
import MessageDialog from "../MessageDialog.vue";
import useDevicesStore from "@/store/modules/devices";

const devicesStore = useDevicesStore();
Expand Down
47 changes: 24 additions & 23 deletions ui/src/components/Devices/DeviceActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,29 @@
<span data-test="tooltip-text"> You don't have this kind of authorization. </span>
</v-tooltip>
</v-list-item>
<BaseDialog v-model="showDialog" @close="close" data-test="device-action-dialog">
<v-card class="bg-v-theme-surface">
<v-card-title class="text-h5 pa-5 bg-primary">
{{ capitalizeText(variant) }} {{ capitalizeText(action) }}
</v-card-title>
<v-divider />
<v-container>
<v-alert
v-if="isBillingActive"
type="warning"
text="Accepted devices in ShellHub become active in your account and are billed for the entire billing period." />
<v-card-text class="mt-4 mb-0 pb-1">
<p class="mb-2"> Do you want to {{ action }} this {{ variant }}? </p>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="close()" data-test="close-btn"> Close </v-btn>
<v-btn variant="text" @click="handleClick()" data-test="action-btn"> {{ action }} </v-btn>
</v-card-actions>
</v-container>
</v-card>
</BaseDialog>
<MessageDialog
v-model="showDialog"
@close="close"
@confirm="handleClick"
@cancel="close"
:title="`${capitalizeText(variant)} ${capitalizeText(action)}`"
:description="`Do you want to ${action} this ${variant}?`"
icon="mdi-help-circle"
:icon-color="action === 'accept' ? 'primary' : action === 'reject' ? 'warning' : 'error'"
:confirm-text="capitalizeText(action)"
:confirm-color="action === 'accept' ? 'primary' : action === 'reject' ? 'warning' : 'error'"
cancel-text="Close"
confirm-data-test="action-btn"
cancel-data-test="close-btn"
data-test="device-action-dialog"
>
<v-alert
v-if="isBillingActive"
type="warning"
class="mx-4 mb-4"
text="Accepted devices in ShellHub become active in your account and are billed for the entire billing period."
/>
</MessageDialog>
</div>
</template>

Expand All @@ -56,7 +57,7 @@ import hasPermission from "@/utils/permission";
import { capitalizeText } from "@/utils/string";
import handleError from "@/utils/handleError";
import useSnackbar from "@/helpers/snackbar";
import BaseDialog from "../BaseDialog.vue";
import MessageDialog from "../MessageDialog.vue";
import useBillingStore from "@/store/modules/billing";
import useDevicesStore from "@/store/modules/devices";
import useNotificationsStore from "@/store/modules/notifications";
Expand Down
164 changes: 65 additions & 99 deletions ui/src/components/Devices/DeviceChooser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,76 @@
<template>
<BaseDialog
<FormDialog
v-if="canChooseDevices"
v-model="showDialog"
@close="close"
@confirm="accept"
@cancel="close"
title="Update account or select three devices"
icon="mdi-devices"
confirm-text="Accept"
cancel-text="Close"
:confirm-disabled="disableButton"
confirm-data-test="accept-btn"
cancel-data-test="close-btn"
threshold="md"
data-test="device-chooser-dialog"
>
<v-card
class="bg-v-theme-surface"
data-test="device-chooser-card"
>
<v-card-title
class="text-headline bg-primary"
data-test="title"
>
Update account or select three devices
</v-card-title>

<v-card-text>
<p
class="ml-2 text-body-2"
data-test="subtext"
>
You currently have no subscription to the
<router-link :to="billingUrl">premium plan</router-link> and the free version is limited to
3 devices. To unlock access to all devices, you can subscribe to the
<router-link :to="billingUrl">premium plan</router-link>. If you want to continue on
the free plan, you need to select three devices.
</p>
</v-card-text>
<div v-if="isAllDevicesTab && hasDevices" class="pa-5">
<v-row>
<v-col md="12" sm="12">
<v-text-field
label="Search by hostname"
variant="underlined"
color="primary"
single-line
hide-details
v-model.trim="filter"
v-on:keyup="searchDevices"
append-inner-icon="mdi-magnify"
density="comfortable"
data-test="search-text"
/>
</v-col>
</v-row>
</div>
<div class="mt-2">
<v-tabs
v-model="tab"
align-tabs="center"
<div class="px-6 pt-4">
<p class="text-body-2 mb-4" data-test="subtext">
You currently have no subscription to the
<router-link :to="billingUrl">premium plan</router-link> and the free version is limited to
3 devices. To unlock access to all devices, you can subscribe to the
<router-link :to="billingUrl">premium plan</router-link>. If you want to continue on
the free plan, you need to select three devices.
</p>

<div v-if="isAllDevicesTab && hasDevices" class="mb-4">
<v-text-field
label="Search by hostname"
variant="outlined"
color="primary"
data-test="v-tabs"
>
<v-tab
v-for="(item, id) in tabItems"
:key="id"
:value="id"
:disabled="item.disabled"
:data-test="item.title + '-tab'"
>
{{ item.title }} Devices
</v-tab>
</v-tabs>
single-line
hide-details
v-model.trim="filter"
v-on:keyup="searchDevices"
append-inner-icon="mdi-magnify"
density="comfortable"
data-test="search-text"
/>
</div>

<v-card-text class="mb-2 pb-0">
<v-window v-model="tab" @update:model-value="handleTabChange">
<v-window-item
v-for="(item, id) in tabItems"
:key="id"
:value="id"
>
<DeviceListChooser
:isSelectable="item.selectable"
data-test="device-list-chooser-component"
/>
</v-window-item>
</v-window>
</v-card-text>
<v-card-actions>
<v-spacer />

<v-btn
data-test="close-btn"
@click="close()"
> Close </v-btn>
<v-tooltip :disabled="!disableButton" top>
<template v-slot:activator="{ props }">
<span>
<v-btn
v-bind="props"
:disabled="disableButton"
@click="accept()"
data-test="accept-btn"
>
Accept
</v-btn>
</span>
</template>

<span> You can select 3 devices or less. </span>
</v-tooltip>
</v-card-actions>
</v-card>
</BaseDialog>
<v-tabs
v-model="tab"
align-tabs="center"
color="primary"
class="mb-4"
data-test="v-tabs"
>
<v-tab
v-for="(item, id) in tabItems"
:key="id"
:value="id"
:disabled="item.disabled"
:data-test="item.title + '-tab'"
>
{{ item.title }} Devices
</v-tab>
</v-tabs>

<v-window v-model="tab" @update:model-value="handleTabChange">
<v-window-item
v-for="(item, id) in tabItems"
:key="id"
:value="id"
>
<DeviceListChooser
:isSelectable="item.selectable"
data-test="device-list-chooser-component"
/>
</v-window-item>
</v-window>
</div>
</FormDialog>
</template>

<script setup lang="ts">
Expand All @@ -114,7 +80,7 @@ import DeviceListChooser from "./DeviceListChooser.vue";
import hasPermission from "@/utils/permission";
import handleError from "@/utils/handleError";
import useSnackbar from "@/helpers/snackbar";
import BaseDialog from "../BaseDialog.vue";
import FormDialog from "../FormDialog.vue";
import useDevicesStore from "@/store/modules/devices";
import { IDevice } from "@/interfaces/IDevice";

Expand Down
51 changes: 17 additions & 34 deletions ui/src/components/Devices/DeviceDelete.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,47 +14,30 @@
</div>
</v-list-item>

<BaseDialog v-model="showDialog" data-test="delete-device-dialog">
<v-card class="bg-v-theme-surface" data-test="device-delete-card">
<v-card-title class="text-h5 pa-5 bg-primary" data-test="dialog-title">
Are you sure?
</v-card-title>
<v-divider />

<v-card-text class="mt-4 mb-0 pb-1" data-test="dialog-text">
<p class="text-body-2 mb-2">You are about to remove this {{ variant }}.</p>

<p class="text-body-2 mb-2">
After confirming this action cannot be redone.
</p>
</v-card-text>

<v-card-actions>
<v-spacer />

<v-btn variant="text" @click="showDialog = false" data-test="close-btn">
Close
</v-btn>

<v-btn
color="red darken-1"
variant="text"
@click="removeDevice()"
data-test="confirm-btn"
>
Remove
</v-btn>
</v-card-actions>
</v-card>
</BaseDialog>
<MessageDialog
v-model="showDialog"
@close="showDialog = false"
@confirm="removeDevice"
@cancel="showDialog = false"
title="Are you sure?"
:description="`You are about to remove this ${variant}. After confirming this action cannot be redone.`"
icon="mdi-alert"
icon-color="error"
confirm-text="Remove"
confirm-color="error"
cancel-text="Close"
confirm-data-test="confirm-btn"
cancel-data-test="close-btn"
data-test="delete-device-dialog"
/>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import handleError from "@/utils/handleError";
import useSnackbar from "@/helpers/snackbar";
import BaseDialog from "../BaseDialog.vue";
import MessageDialog from "../MessageDialog.vue";
import useDevicesStore from "@/store/modules/devices";

const props = defineProps<{
Expand Down
Loading