Skip to content

Commit f849403

Browse files
SticksDevProspector
SticksDev
and
Prospector
authored
backup page fixes and new impls for new apis (#3437)
* wip: backup page fixes and new impls for new apis * wip: more progress on backup fixes, almost done * lint * Backups cleanup * Don't show create warning if creating * Fix ongoing state * Download support * Support ready * Disable auto backup button * Use auth param for download of backups * Disable install buttons when backup is in progress, add retrying * Make prepare button have immediate feedback, don't refresh backups in all cases * Intl:extract & rebase fixes * Updated changelog and fix lint --------- Co-authored-by: Prospector <[email protected]>
1 parent 817151e commit f849403

30 files changed

+1531
-1126
lines changed

‎apps/frontend/src/components/ui/servers/BackupCreateModal.vue

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
<template>
22
<NewModal ref="modal" header="Creating backup" @show="focusInput">
33
<div class="flex flex-col gap-2 md:w-[600px]">
4-
<div class="font-semibold text-contrast">Name</div>
4+
<label for="backup-name-input">
5+
<span class="text-lg font-semibold text-contrast"> Name </span>
6+
</label>
57
<input
8+
id="backup-name-input"
69
ref="input"
710
v-model="backupName"
811
type="text"
912
class="bg-bg-input w-full rounded-lg p-4"
10-
placeholder="e.g. Before 1.21"
11-
maxlength="64"
13+
:placeholder="`Backup #${newBackupAmount}`"
14+
maxlength="48"
1215
/>
13-
<div class="flex items-center gap-2">
14-
<InfoIcon class="hidden sm:block" />
15-
<span class="text-sm text-secondary">
16-
If left empty, the backup name will default to
17-
<span class="font-semibold"> Backup #{{ newBackupAmount }}</span>
16+
<div v-if="nameExists && !isCreating" class="flex items-center gap-1">
17+
<IssuesIcon class="hidden text-orange sm:block" />
18+
<span class="text-sm text-orange">
19+
You already have a backup named '<span class="font-semibold">{{ trimmedName }}</span
20+
>'
1821
</span>
1922
</div>
2023
<div v-if="isRateLimited" class="mt-2 text-sm text-red">
2124
You're creating backups too fast. Please wait a moment before trying again.
2225
</div>
2326
</div>
24-
<div class="mb-1 mt-4 flex justify-start gap-4">
27+
<div class="mt-2 flex justify-start gap-2">
2528
<ButtonStyled color="brand">
26-
<button :disabled="isCreating" @click="createBackup">
29+
<button :disabled="isCreating || nameExists" @click="createBackup">
2730
<PlusIcon />
2831
Create backup
2932
</button>
@@ -41,24 +44,30 @@
4144
<script setup lang="ts">
4245
import { ref, nextTick, computed } from "vue";
4346
import { ButtonStyled, NewModal } from "@modrinth/ui";
44-
import { PlusIcon, XIcon, InfoIcon } from "@modrinth/assets";
47+
import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
4548
4649
const props = defineProps<{
4750
server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
4851
}>();
4952
50-
const emit = defineEmits(["backupCreated"]);
51-
5253
const modal = ref<InstanceType<typeof NewModal>>();
5354
const input = ref<HTMLInputElement>();
5455
const isCreating = ref(false);
5556
const isRateLimited = ref(false);
56-
const backupError = ref<string | null>(null);
5757
const backupName = ref("");
5858
const newBackupAmount = computed(() =>
5959
props.server.backups?.data?.length === undefined ? 1 : props.server.backups?.data?.length + 1,
6060
);
6161
62+
const trimmedName = computed(() => backupName.value.trim());
63+
64+
const nameExists = computed(() => {
65+
if (!props.server.backups?.data) return false;
66+
return props.server.backups.data.some(
67+
(backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
68+
);
69+
});
70+
6271
const focusInput = () => {
6372
nextTick(() => {
6473
setTimeout(() => {
@@ -67,38 +76,46 @@ const focusInput = () => {
6776
});
6877
};
6978
79+
function show() {
80+
backupName.value = "";
81+
isCreating.value = false;
82+
modal.value?.show();
83+
}
84+
7085
const hideModal = () => {
7186
modal.value?.hide();
72-
backupName.value = "";
7387
};
7488
7589
const createBackup = async () => {
76-
if (!backupName.value.trim()) {
90+
if (backupName.value.trim().length === 0) {
7791
backupName.value = `Backup #${newBackupAmount.value}`;
7892
}
7993
8094
isCreating.value = true;
8195
isRateLimited.value = false;
8296
try {
83-
await props.server.backups?.create(backupName.value);
84-
await props.server.refresh();
97+
await props.server.backups?.create(trimmedName.value);
8598
hideModal();
86-
emit("backupCreated", { success: true, message: "Backup created successfully" });
99+
await props.server.refresh();
87100
} catch (error) {
88101
if (error instanceof PyroFetchError && error.statusCode === 429) {
89102
isRateLimited.value = true;
90-
backupError.value = "You're creating backups too fast.";
103+
addNotification({
104+
type: "error",
105+
title: "Error creating backup",
106+
text: "You're creating backups too fast.",
107+
});
91108
} else {
92-
backupError.value = error instanceof Error ? error.message : String(error);
93-
emit("backupCreated", { success: false, message: backupError.value });
109+
const message = error instanceof Error ? error.message : String(error);
110+
addNotification({ type: "error", title: "Error creating backup", text: message });
94111
}
95112
} finally {
96113
isCreating.value = false;
97114
}
98115
};
99116
100117
defineExpose({
101-
show: () => modal.value?.show(),
118+
show,
102119
hide: hideModal,
103120
});
104121
</script>

‎apps/frontend/src/components/ui/servers/BackupDeleteModal.vue

Lines changed: 30 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,45 @@
11
<template>
2-
<NewModal ref="modal" danger header="Deleting backup">
3-
<div class="flex flex-col gap-4">
4-
<div class="relative flex w-full flex-col gap-2 rounded-2xl bg-[#0e0e0ea4] p-6">
5-
<div class="text-2xl font-extrabold text-contrast">
6-
{{ backupName }}
7-
</div>
8-
<div class="flex gap-2 font-semibold text-contrast">
9-
<CalendarIcon />
10-
{{ formattedDate }}
11-
</div>
12-
</div>
13-
</div>
14-
<div class="mb-1 mt-4 flex justify-end gap-4">
15-
<ButtonStyled color="red">
16-
<button :disabled="isDeleting" @click="deleteBackup">
17-
<TrashIcon />
18-
Delete backup
19-
</button>
20-
</ButtonStyled>
21-
<ButtonStyled type="transparent">
22-
<button @click="hideModal">Cancel</button>
23-
</ButtonStyled>
24-
</div>
25-
</NewModal>
2+
<ConfirmModal
3+
ref="modal"
4+
danger
5+
title="Are you sure you want to delete this backup?"
6+
proceed-label="Delete backup"
7+
:confirmation-text="currentBackup?.name ?? 'null'"
8+
has-to-type
9+
@proceed="emit('delete', currentBackup)"
10+
>
11+
<BackupItem
12+
v-if="currentBackup"
13+
:backup="currentBackup"
14+
preview
15+
class="border-px border-solid border-button-border"
16+
/>
17+
</ConfirmModal>
2618
</template>
2719

2820
<script setup lang="ts">
2921
import { ref } from "vue";
30-
import { ButtonStyled, NewModal } from "@modrinth/ui";
31-
import { TrashIcon, CalendarIcon } from "@modrinth/assets";
22+
import { ConfirmModal } from "@modrinth/ui";
3223
import type { Server } from "~/composables/pyroServers";
24+
import BackupItem from "~/components/ui/servers/BackupItem.vue";
3325
34-
const props = defineProps<{
35-
server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
36-
backupId: string;
37-
backupName: string;
38-
backupCreatedAt: string;
26+
defineProps<{
27+
server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
3928
}>();
4029
41-
const emit = defineEmits(["backupDeleted"]);
42-
43-
const modal = ref<InstanceType<typeof NewModal>>();
44-
const isDeleting = ref(false);
45-
const backupError = ref<string | null>(null);
46-
47-
const formattedDate = computed(() => {
48-
return new Date(props.backupCreatedAt).toLocaleString("en-US", {
49-
month: "numeric",
50-
day: "numeric",
51-
year: "2-digit",
52-
hour: "numeric",
53-
minute: "numeric",
54-
hour12: true,
55-
});
56-
});
57-
58-
const hideModal = () => {
59-
modal.value?.hide();
60-
};
30+
const emit = defineEmits<{
31+
(e: "delete", backup: Backup | undefined): void;
32+
}>();
6133
62-
const deleteBackup = async () => {
63-
if (!props.backupId) {
64-
emit("backupDeleted", { success: false, message: "No backup selected" });
65-
return;
66-
}
34+
const modal = ref<InstanceType<typeof ConfirmModal>>();
35+
const currentBackup = ref<Backup | undefined>(undefined);
6736
68-
isDeleting.value = true;
69-
try {
70-
await props.server.backups?.delete(props.backupId);
71-
await props.server.refresh();
72-
hideModal();
73-
emit("backupDeleted", { success: true, message: "Backup deleted successfully" });
74-
} catch (error) {
75-
backupError.value = error instanceof Error ? error.message : String(error);
76-
emit("backupDeleted", { success: false, message: backupError.value });
77-
} finally {
78-
isDeleting.value = false;
79-
}
80-
};
37+
function show(backup: Backup) {
38+
currentBackup.value = backup;
39+
modal.value?.show();
40+
}
8141
8242
defineExpose({
83-
show: () => modal.value?.show(),
84-
hide: hideModal,
43+
show,
8544
});
8645
</script>

0 commit comments

Comments
 (0)