Skip to content
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.

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

Fix handling error in solution without tabs #2782

Merged
merged 6 commits into from
Jun 4, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
18 changes: 15 additions & 3 deletions packages/playground/src/components/weblet_layout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ function validateBeforeDeploy(fn: () => void) {
const inputs = form.inputs as unknown as InputValidatorService[];

for (const input of inputs) {
const status = input.status;
const status = typeof input.status === "string" ? input.status : (input.status as any)?.value;
if (status === ValidatorStatus.Invalid) {
errorInput = [i, input.$el];
break out;
Expand All @@ -217,7 +217,14 @@ function validateBeforeDeploy(fn: () => void) {
}

if (errorInput) {
const [tab, input] = errorInput;
const [tab, __input] = errorInput;

const input =
__input && typeof __input === "object" && "value" in __input && __input.value instanceof HTMLElement
? __input.value
: __input instanceof HTMLElement
? __input
: null;

if (!input || !__setTab) {
return;
Expand All @@ -227,7 +234,12 @@ function validateBeforeDeploy(fn: () => void) {

// Timeout so the ui gets render before scroll
setTimeout(() => {
const _input = input.querySelector("textarea") || input.querySelector("input") || input;
const _input = input.querySelector("textarea") || input.querySelector("input") || null;
if (!(_input instanceof HTMLElement)) {
return;
}

console.log({ errorInput });
MohamedElmdary marked this conversation as resolved.
Show resolved Hide resolved
document.addEventListener("scrollend", () => _input.focus(), { once: true });
_input.scrollIntoView({ behavior: "smooth", block: "center" });
}, 250);
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/freeflow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
>
<template #title>Deploy a Freeflow Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="threebotName"
:rules="[
Expand Down Expand Up @@ -72,7 +72,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -95,7 +95,6 @@ import { deployGatewayName, rollbackDeployment } from "../utils/gateway";
import { normalizeError } from "../utils/helpers";

const layout = useLayout();
const valid = ref(false);

const threebotName = ref<string>("");
const solution = ref() as Ref<SolutionFlavor>;
Expand Down
8 changes: 3 additions & 5 deletions packages/playground/src/weblets/tf_algorand.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
title-image="images/icons/algorand.png"
>
<template #title>Deploy a Algorand Instance </template>
<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -171,7 +171,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>
<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
</template>
Expand All @@ -184,15 +184,13 @@ import { computed, type Ref, ref, watch } from "vue";
import { manual } from "@/utils/manual";

import { useLayout } from "../components/weblet_layout.vue";
import { useGrid, useProfileManager } from "../stores";
import { useGrid } from "../stores";
import { type Flist, ProjectName, type Validators } from "../types";
import { deployVM } from "../utils/deploy_vm";
import { generateName } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const lastRoundInput = ref();
const profileManager = useProfileManager();
const flist: Flist = {
value: "https://hub.grid.tf/tf-official-apps/algorand-latest.flist",
entryPoint: "/sbin/zinit init",
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_casperlabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Casperlabs Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -62,7 +62,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -86,7 +86,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();

const name = ref(generateName({ prefix: "cl" }));
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_funkwhale.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Funkwhale Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -114,7 +114,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -138,7 +138,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName, generatePassword } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "fw" }));
const username = ref("admin");
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_nextcloud.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Nextcloud All-in-One Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -61,7 +61,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -85,7 +85,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();

const name = ref(generateName({ prefix: "nc" }));
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_node_pilot.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
title-image="images/icons/vm.png"
>
<template #title>Deploy a Node Pilot</template>
<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -58,7 +58,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -77,7 +77,6 @@ import { type Flist, ProjectName } from "../types";
import { deployVM } from "../utils/deploy_vm";
import { generateName } from "../utils/strings";
const layout = useLayout();
const valid = ref(false);
const name = ref(generateName({ prefix: "np" }));
const solution = ref() as Ref<SolutionFlavor>;
const flist: Flist = {
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_peertube.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
title-image="images/icons/peertube.png"
>
<template #title>Deploy a Peertube Instance</template>
<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -88,7 +88,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -111,7 +111,6 @@ import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/ga
import { generateName, generatePassword } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "pt" }));
const email = ref(profileManager.profile?.email || "");
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_staticwebsite.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Static Website Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -90,7 +90,7 @@
v-model="selectionDetails"
/>
<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -113,7 +113,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "sw" }));
const gitUrl = ref("");
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_subsquid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Subsquid Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -74,7 +74,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -98,7 +98,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "ss" }));
const endpoint = ref("");
Expand Down
8 changes: 3 additions & 5 deletions packages/playground/src/weblets/tf_umbrel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy an Umbrel Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -108,7 +108,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -123,7 +123,7 @@ import { manual } from "@/utils/manual";

import Network from "../components/networks.vue";
import { useLayout } from "../components/weblet_layout.vue";
import { useGrid, useProfileManager } from "../stores";
import { useGrid } from "../stores";
import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
import { ProjectName } from "../types";
import { deployVM } from "../utils/deploy_vm";
Expand All @@ -132,8 +132,6 @@ import rootFs from "../utils/root_fs";
import { generateName, generatePassword } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "um" }));
const username = ref("admin");
const password = ref(generatePassword());
Expand Down
5 changes: 2 additions & 3 deletions packages/playground/src/weblets/tf_wordpress.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<template #title>Deploy a Wordpress Instance </template>

<form-validator v-model="valid">
<d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
<input-validator
:value="name"
:rules="[
Expand Down Expand Up @@ -115,7 +115,7 @@
/>

<manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
</form-validator>
</d-tabs>

<template #footer-actions="{ validateBeforeDeploy }">
<v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
Expand All @@ -140,7 +140,6 @@ import { normalizeError } from "../utils/helpers";
import { generateName, generatePassword } from "../utils/strings";

const layout = useLayout();
const valid = ref(false);
const profileManager = useProfileManager();
const name = ref(generateName({ prefix: "wp" }));
const username = ref("admin");
Expand Down
Loading