mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-05 21:32:02 -06:00
fix: rollback merge
This commit is contained in:
pandeymangg
@@ -1,6 +1,11 @@
|
||||
---
|
||||
description: It should be used **only when the agent explicitly requests database schema-level, details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
|
||||
alwaysApply: false
|
||||
description: >
|
||||
This rule provides comprehensive knowledge about the Formbricks database structure, relationships,
|
||||
and data patterns. It should be used **only when the agent explicitly requests database schema-level
|
||||
details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models,
|
||||
investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
|
||||
globs: []
|
||||
alwaysApply: agent-requested
|
||||
---
|
||||
|
||||
# Formbricks Database Schema Reference
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
### Formbricks Monorepo Overview
|
||||
|
||||
- **Project**: Formbricks — open‑source survey and experience management platform. Repo: [formbricks/formbricks](https://github.com/formbricks/formbricks)
|
||||
- **Monorepo**: Turborepo + pnpm workspaces. Root configs: [package.json](mdc:package.json), [turbo.json](mdc:turbo.json)
|
||||
- **Core app**: Next.js app in `apps/web` with Prisma, Auth.js, TailwindCSS, Vitest, Playwright. Enterprise modules live in [apps/web/modules/ee](mdc:apps/web/modules/ee)
|
||||
- **Datastores**: PostgreSQL + Redis. Local dev via [docker-compose.dev.yml](mdc:docker-compose.dev.yml); Prisma schema at [packages/database/schema.prisma](mdc:packages/database/schema.prisma)
|
||||
- **Docs & Ops**: Docs in `docs/` (Mintlify), Helm in `helm-chart/`, IaC in `infra/`
|
||||
|
||||
### Apps
|
||||
|
||||
- **apps/web**: Next.js product application (API, UI, SSO, i18n, emails, uploads, integrations)
|
||||
- **apps/storybook**: Storybook for UI components; a11y addon + Vite builder
|
||||
|
||||
### Packages
|
||||
|
||||
- **@formbricks/database** (`packages/database`): Prisma schema, DB scripts, migrations, data layer
|
||||
- **@formbricks/js-core** (`packages/js-core`): Core runtime for web embed / async loader
|
||||
- **@formbricks/surveys** (`packages/surveys`): Embeddable survey rendering and helpers
|
||||
- **@formbricks/logger** (`packages/logger`): Shared logging (pino) + Zod types
|
||||
- **@formbricks/types** (`packages/types`): Shared types (Zod, Prisma clients)
|
||||
- **@formbricks/i18n-utils** (`packages/i18n-utils`): i18n helpers and build output
|
||||
- **@formbricks/eslint-config** (`packages/config-eslint`): Central ESLint config (Next, TS, Vitest, Prettier)
|
||||
- **@formbricks/config-typescript** (`packages/config-typescript`): Central TS config and types
|
||||
- **@formbricks/vite-plugins** (`packages/vite-plugins`): Internal Vite plugins
|
||||
- **packages/android, packages/ios**: Native SDKs (built with platform toolchains)
|
||||
|
||||
### Enterprise‑ready by design
|
||||
|
||||
- **Quality & safety**: Strict TypeScript, repo‑wide ESLint + Prettier, lint‑staged + Husky, CI checks, typed env validation
|
||||
- **Security‑first**: Auth.js, SSO/SAML/OIDC, session controls, rate limiting, Sentry, structured logging
|
||||
|
||||
### Accessible by design
|
||||
|
||||
- **UI foundations**: Radix UI, TailwindCSS, Storybook with `@storybook/addon-a11y`, keyboard and screen‑reader‑friendly components
|
||||
|
||||
### Root pnpm commands
|
||||
|
||||
```bash
|
||||
pnpm clean:all # Clean turbo cache, node_modules, lockfile, coverage, out
|
||||
pnpm clean # Clean turbo cache, node_modules, coverage, out
|
||||
pnpm build # Build all packages/apps (turbo)
|
||||
pnpm build:dev # Dev-optimized builds (where supported)
|
||||
pnpm dev # Run all dev servers in parallel
|
||||
pnpm start # Start built apps/services
|
||||
pnpm go # Start DB (docker compose) and run long-running dev tasks
|
||||
pnpm generate # Run generators (e.g., Prisma, API specs)
|
||||
pnpm lint # Lint all
|
||||
pnpm format # Prettier write across repo
|
||||
pnpm test # Unit tests
|
||||
pnpm test:coverage # Unit tests with coverage
|
||||
pnpm test:e2e # Playwright tests
|
||||
pnpm test-e2e:azure # Playwright tests with Azure config
|
||||
pnpm storybook # Run Storybook
|
||||
pnpm db:up # Start local Postgres/Redis via docker compose
|
||||
pnpm db:down # Stop local DB stack
|
||||
pnpm db:start # Project-level DB setup choreography
|
||||
pnpm db:push # Prisma db push (accept data loss in package script)
|
||||
pnpm db:migrate:dev # Apply dev migrations
|
||||
pnpm db:migrate:deploy # Apply prod migrations
|
||||
pnpm fb-migrate-dev # Create DB migration (database package) and prisma generate
|
||||
pnpm tolgee-pull # Pull translation keys for current branch and format
|
||||
```
|
||||
|
||||
### Essentials for every prompt
|
||||
|
||||
- **Tech stack**: Next.js, React 19, TypeScript, Prisma, Zod, TailwindCSS, Turborepo, Vitest, Playwright
|
||||
- **Environments**: See `.env.example`. Many tasks require DB up and env variables set
|
||||
- **Licensing**: Core under AGPLv3; Enterprise code in `apps/web/modules/ee` (included in Docker, unlocked via Enterprise License Key)
|
||||
|
||||
For deeper details, consult per‑package `package.json` and scripts (e.g., [apps/web/package.json](mdc:apps/web/package.json)).
|
||||
@@ -10,12 +10,8 @@ export const FormWrapper = ({ children }: FormWrapperProps) => {
|
||||
<div className="mx-auto flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
|
||||
<div className="mx-auto w-full max-w-sm rounded-xl bg-white p-8 shadow-xl lg:w-96">
|
||||
<div className="mb-8 text-center">
|
||||
<Link
|
||||
target="_blank"
|
||||
href="https://formbricks.com?utm_source=ce"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Formbricks website">
|
||||
<Logo className="mx-auto w-3/4" variant="wordmark" aria-hidden="true" />
|
||||
<Link target="_blank" href="https://formbricks.com?utm_source=ce" rel="noopener noreferrer">
|
||||
<Logo className="mx-auto w-3/4" />
|
||||
</Link>
|
||||
</div>
|
||||
{children}
|
||||
|
||||
@@ -149,10 +149,10 @@ describe("AddApiKeyModal", () => {
|
||||
|
||||
test("handles label input", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack");
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack") as HTMLInputElement;
|
||||
|
||||
await userEvent.type(labelInput, "Test API Key");
|
||||
expect((labelInput as HTMLInputElement).value).toBe("Test API Key");
|
||||
expect(labelInput.value).toBe("Test API Key");
|
||||
});
|
||||
|
||||
test("handles permission changes", async () => {
|
||||
@@ -184,120 +184,21 @@ describe("AddApiKeyModal", () => {
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Verify new permission row is added
|
||||
const deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
const deleteButtons = screen.getAllByRole("button", { name: "" }); // Trash icons
|
||||
expect(deleteButtons).toHaveLength(2);
|
||||
|
||||
// Remove the new permission
|
||||
await userEvent.click(deleteButtons[1]);
|
||||
|
||||
// Check that only the original permission row remains
|
||||
const remainingDeleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(remainingDeleteButtons).toHaveLength(1);
|
||||
});
|
||||
|
||||
test("removes permissions from middle of list without breaking indices", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add first permission
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Add second permission
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Add third permission
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Verify we have 3 permission rows
|
||||
let deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(3);
|
||||
|
||||
// Remove the middle permission (index 1)
|
||||
await userEvent.click(deleteButtons[1]);
|
||||
|
||||
// Verify we now have 2 permission rows
|
||||
deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(2);
|
||||
|
||||
// Try to remove the second remaining permission (this was previously index 2, now index 1)
|
||||
await userEvent.click(deleteButtons[1]);
|
||||
|
||||
// Verify we now have 1 permission row
|
||||
deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(1);
|
||||
|
||||
// Remove the last remaining permission
|
||||
await userEvent.click(deleteButtons[0]);
|
||||
|
||||
// Verify no permission rows remain
|
||||
expect(
|
||||
screen.queryAllByRole("button", { name: "environments.project.api_keys.delete_permission" })
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("can modify permissions after deleting items from list", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add multiple permissions
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton); // First permission
|
||||
await userEvent.click(addButton); // Second permission
|
||||
await userEvent.click(addButton); // Third permission
|
||||
|
||||
// Verify we have 3 permission rows
|
||||
let deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(3);
|
||||
|
||||
// Remove the first permission (index 0)
|
||||
await userEvent.click(deleteButtons[0]);
|
||||
|
||||
// Verify we now have 2 permission rows
|
||||
deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(2);
|
||||
|
||||
// Try to modify the first remaining permission (which was originally index 1, now index 0)
|
||||
const projectDropdowns = screen.getAllByRole("button", { name: /Project 1/i });
|
||||
expect(projectDropdowns.length).toBeGreaterThan(0);
|
||||
|
||||
await userEvent.click(projectDropdowns[0]);
|
||||
|
||||
// Wait for dropdown content and select 'Project 2'
|
||||
const project2Option = await screen.findByRole("menuitem", { name: "Project 2" });
|
||||
await userEvent.click(project2Option);
|
||||
|
||||
// Verify project selection by checking the updated button text
|
||||
const updatedButton = await screen.findByRole("button", { name: "Project 2" });
|
||||
expect(updatedButton).toBeInTheDocument();
|
||||
|
||||
// Add another permission to verify the list is still functional
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Verify we now have 3 permission rows again
|
||||
deleteButtons = await screen.findAllByRole("button", {
|
||||
name: "environments.project.api_keys.delete_permission",
|
||||
});
|
||||
expect(deleteButtons).toHaveLength(3);
|
||||
expect(screen.getAllByRole("button", { name: "" })).toHaveLength(1);
|
||||
});
|
||||
|
||||
test("submits form with correct data", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Fill in label
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack");
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack") as HTMLInputElement;
|
||||
await userEvent.type(labelInput, "Test API Key");
|
||||
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
@@ -377,7 +278,7 @@ describe("AddApiKeyModal", () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Type something into the label
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack");
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack") as HTMLInputElement;
|
||||
await userEvent.type(labelInput, "Test API Key");
|
||||
|
||||
// Click the cancel button
|
||||
@@ -386,219 +287,6 @@ describe("AddApiKeyModal", () => {
|
||||
|
||||
// Verify modal is closed and form is reset
|
||||
expect(mockSetOpen).toHaveBeenCalledWith(false);
|
||||
expect((labelInput as HTMLInputElement).value).toBe("");
|
||||
});
|
||||
|
||||
test("updates permission field (non-environmentId)", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add a permission first
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Click on permission level dropdown (third dropdown in the row)
|
||||
const permissionDropdowns = screen.getAllByRole("button", { name: /read/i });
|
||||
await userEvent.click(permissionDropdowns[0]);
|
||||
|
||||
// Select 'write' permission
|
||||
const writeOption = await screen.findByRole("menuitem", { name: "write" });
|
||||
await userEvent.click(writeOption);
|
||||
|
||||
// Verify permission selection by checking the updated button text
|
||||
const updatedButton = await screen.findByRole("button", { name: "write" });
|
||||
expect(updatedButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("updates environmentId with valid environment", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add a permission first
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Click on environment dropdown (second dropdown in the row)
|
||||
const environmentDropdowns = screen.getAllByRole("button", { name: /production/i });
|
||||
await userEvent.click(environmentDropdowns[0]);
|
||||
|
||||
// Select 'development' environment
|
||||
const developmentOption = await screen.findByRole("menuitem", { name: "development" });
|
||||
await userEvent.click(developmentOption);
|
||||
|
||||
// Verify environment selection by checking the updated button text
|
||||
const updatedButton = await screen.findByRole("button", { name: "development" });
|
||||
expect(updatedButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("updates project and automatically selects first environment", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add a permission first
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Initially should show Project 1 and production environment
|
||||
expect(screen.getByRole("button", { name: "Project 1" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /production/i })).toBeInTheDocument();
|
||||
|
||||
// Click on project dropdown (first dropdown in the row)
|
||||
const projectDropdowns = screen.getAllByRole("button", { name: /Project 1/i });
|
||||
await userEvent.click(projectDropdowns[0]);
|
||||
|
||||
// Select 'Project 2'
|
||||
const project2Option = await screen.findByRole("menuitem", { name: "Project 2" });
|
||||
await userEvent.click(project2Option);
|
||||
|
||||
// Verify project selection and that environment was auto-updated
|
||||
const updatedProjectButton = await screen.findByRole("button", { name: "Project 2" });
|
||||
expect(updatedProjectButton).toBeInTheDocument();
|
||||
|
||||
// Environment should still be production (first environment of Project 2)
|
||||
expect(screen.getByRole("button", { name: /production/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("handles edge case when project is not found", async () => {
|
||||
// Create a modified mock with corrupted project reference
|
||||
const corruptedProjects = [
|
||||
{
|
||||
...mockProjects[0],
|
||||
id: "different-id", // This will cause project lookup to fail
|
||||
},
|
||||
];
|
||||
|
||||
render(<AddApiKeyModal {...defaultProps} projects={corruptedProjects} />);
|
||||
|
||||
// Add a permission first
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// The component should still render without crashing
|
||||
expect(screen.getByRole("button", { name: /add_permission/i })).toBeInTheDocument();
|
||||
|
||||
// Try to interact with environment dropdown - should not crash
|
||||
const environmentDropdowns = screen.getAllByRole("button", { name: /production/i });
|
||||
await userEvent.click(environmentDropdowns[0]);
|
||||
|
||||
// Should be able to find and click on development option
|
||||
const developmentOption = await screen.findByRole("menuitem", { name: "development" });
|
||||
await userEvent.click(developmentOption);
|
||||
|
||||
// Verify environment selection works even when project lookup fails
|
||||
const updatedButton = await screen.findByRole("button", { name: "development" });
|
||||
expect(updatedButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("handles edge case when environment is not found", async () => {
|
||||
// Create a project with no environments
|
||||
const projectWithNoEnvs = [
|
||||
{
|
||||
...mockProjects[0],
|
||||
environments: [], // No environments available
|
||||
},
|
||||
];
|
||||
|
||||
render(<AddApiKeyModal {...defaultProps} projects={projectWithNoEnvs} />);
|
||||
|
||||
// Try to add a permission - this should handle the case gracefully
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
|
||||
// This might not add a permission if no environments exist, which is expected behavior
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Component should still be functional
|
||||
expect(screen.getByRole("button", { name: /add_permission/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("validates duplicate permissions detection", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Fill in a label
|
||||
const labelInput = screen.getByPlaceholderText("e.g. GitHub, PostHog, Slack");
|
||||
await userEvent.type(labelInput, "Test API Key");
|
||||
|
||||
// Add first permission
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Add second permission with same project/environment
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Both permissions should now have the same project and environment (Project 1, production)
|
||||
// Try to submit the form - it should show duplicate error
|
||||
const submitButton = screen.getByRole("button", {
|
||||
name: "environments.project.api_keys.add_api_key",
|
||||
});
|
||||
await userEvent.click(submitButton);
|
||||
|
||||
// The submit should not have been called due to duplicate detection
|
||||
expect(mockOnSubmit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("handles updatePermission with environmentId but environment not found", async () => {
|
||||
// Create a project with limited environments to test the edge case
|
||||
const limitedProjects = [
|
||||
{
|
||||
...mockProjects[0],
|
||||
environments: [
|
||||
{
|
||||
id: "env1",
|
||||
type: "production" as const,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
projectId: "project1",
|
||||
appSetupCompleted: true,
|
||||
},
|
||||
// Only one environment, so we can test when trying to update to non-existent env
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
render(<AddApiKeyModal {...defaultProps} projects={limitedProjects} />);
|
||||
|
||||
// Add a permission first
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Verify permission was added with production environment
|
||||
expect(screen.getByRole("button", { name: /production/i })).toBeInTheDocument();
|
||||
|
||||
// Now test the edge case by manually calling the component's internal logic
|
||||
// Since we can't directly access the updatePermission function in tests,
|
||||
// we test through the UI interactions and verify the component doesn't crash
|
||||
|
||||
// The component should handle gracefully when environment lookup fails
|
||||
// This tests the branch: field === "environmentId" && !environment
|
||||
expect(screen.getByRole("button", { name: /production/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("covers all branches of updatePermission function", async () => {
|
||||
render(<AddApiKeyModal {...defaultProps} />);
|
||||
|
||||
// Add a permission to have something to update
|
||||
const addButton = screen.getByRole("button", { name: /add_permission/i });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
// Test Branch 1: Update non-environmentId field (permission level)
|
||||
const permissionDropdowns = screen.getAllByRole("button", { name: /read/i });
|
||||
await userEvent.click(permissionDropdowns[0]);
|
||||
const manageOption = await screen.findByRole("menuitem", { name: "manage" });
|
||||
await userEvent.click(manageOption);
|
||||
expect(await screen.findByRole("button", { name: "manage" })).toBeInTheDocument();
|
||||
|
||||
// Test Branch 2: Update environmentId with valid environment
|
||||
const environmentDropdowns = screen.getAllByRole("button", { name: /production/i });
|
||||
await userEvent.click(environmentDropdowns[0]);
|
||||
const developmentOption = await screen.findByRole("menuitem", { name: "development" });
|
||||
await userEvent.click(developmentOption);
|
||||
expect(await screen.findByRole("button", { name: "development" })).toBeInTheDocument();
|
||||
|
||||
// Test Branch 3: Update project (which calls updateProjectAndEnvironment)
|
||||
const projectDropdowns = screen.getAllByRole("button", { name: /Project 1/i });
|
||||
await userEvent.click(projectDropdowns[0]);
|
||||
const project2Option = await screen.findByRole("menuitem", { name: "Project 2" });
|
||||
await userEvent.click(project2Option);
|
||||
expect(await screen.findByRole("button", { name: "Project 2" })).toBeInTheDocument();
|
||||
|
||||
// Verify all updates worked correctly and component is still functional
|
||||
expect(screen.getByRole("button", { name: /add_permission/i })).toBeInTheDocument();
|
||||
expect(labelInput.value).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -80,22 +80,23 @@ export const AddApiKeyModal = ({
|
||||
const [selectedOrganizationAccess, setSelectedOrganizationAccess] =
|
||||
useState<TOrganizationAccess>(defaultOrganizationAccess);
|
||||
|
||||
const getInitialPermissions = (): PermissionRecord[] => {
|
||||
const getInitialPermissions = () => {
|
||||
if (projects.length > 0 && projects[0].environments.length > 0) {
|
||||
return [
|
||||
{
|
||||
return {
|
||||
"permission-0": {
|
||||
projectId: projects[0].id,
|
||||
environmentId: projects[0].environments[0].id,
|
||||
permission: ApiKeyPermission.read,
|
||||
projectName: projects[0].name,
|
||||
environmentType: projects[0].environments[0].type,
|
||||
},
|
||||
];
|
||||
};
|
||||
}
|
||||
return [];
|
||||
return {} as Record<string, PermissionRecord>;
|
||||
};
|
||||
|
||||
const [selectedPermissions, setSelectedPermissions] = useState<PermissionRecord[]>([]);
|
||||
// Initialize with one permission by default
|
||||
const [selectedPermissions, setSelectedPermissions] = useState<Record<string, PermissionRecord>>({});
|
||||
|
||||
const projectOptions: ProjectOption[] = projects.map((project) => ({
|
||||
id: project.id,
|
||||
@@ -103,54 +104,58 @@ export const AddApiKeyModal = ({
|
||||
}));
|
||||
|
||||
const removePermission = (index: number) => {
|
||||
const updatedPermissions = [...selectedPermissions];
|
||||
updatedPermissions.splice(index, 1);
|
||||
const updatedPermissions = { ...selectedPermissions };
|
||||
delete updatedPermissions[`permission-${index}`];
|
||||
setSelectedPermissions(updatedPermissions);
|
||||
};
|
||||
|
||||
const addPermission = () => {
|
||||
const initialPermissions = getInitialPermissions();
|
||||
if (initialPermissions.length > 0) {
|
||||
setSelectedPermissions([...selectedPermissions, initialPermissions[0]]);
|
||||
const newIndex = Object.keys(selectedPermissions).length;
|
||||
const initialPermission = getInitialPermissions()["permission-0"];
|
||||
if (initialPermission) {
|
||||
setSelectedPermissions({
|
||||
...selectedPermissions,
|
||||
[`permission-${newIndex}`]: initialPermission,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updatePermission = (index: number, field: string, value: string) => {
|
||||
const updatedPermissions = [...selectedPermissions];
|
||||
const project = projects.find((p) => p.id === updatedPermissions[index].projectId);
|
||||
const updatePermission = (key: string, field: string, value: string) => {
|
||||
const project = projects.find((p) => p.id === selectedPermissions[key].projectId);
|
||||
const environment = project?.environments.find((env) => env.id === value);
|
||||
|
||||
updatedPermissions[index] = {
|
||||
...updatedPermissions[index],
|
||||
[field]: value,
|
||||
...(field === "environmentId" && environment ? { environmentType: environment.type } : {}),
|
||||
};
|
||||
|
||||
setSelectedPermissions(updatedPermissions);
|
||||
setSelectedPermissions({
|
||||
...selectedPermissions,
|
||||
[key]: {
|
||||
...selectedPermissions[key],
|
||||
[field]: value,
|
||||
...(field === "environmentId" && environment ? { environmentType: environment.type } : {}),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Update environment when project changes
|
||||
const updateProjectAndEnvironment = (index: number, projectId: string) => {
|
||||
const updateProjectAndEnvironment = (key: string, projectId: string) => {
|
||||
const project = projects.find((p) => p.id === projectId);
|
||||
if (project && project.environments.length > 0) {
|
||||
const environment = project.environments[0];
|
||||
const updatedPermissions = [...selectedPermissions];
|
||||
|
||||
updatedPermissions[index] = {
|
||||
...updatedPermissions[index],
|
||||
projectId,
|
||||
environmentId: environment.id,
|
||||
projectName: project.name,
|
||||
environmentType: environment.type,
|
||||
};
|
||||
|
||||
setSelectedPermissions(updatedPermissions);
|
||||
setSelectedPermissions({
|
||||
...selectedPermissions,
|
||||
[key]: {
|
||||
...selectedPermissions[key],
|
||||
projectId,
|
||||
environmentId: environment.id,
|
||||
projectName: project.name,
|
||||
environmentType: environment.type,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const checkForDuplicatePermissions = () => {
|
||||
const uniquePermissions = new Set(selectedPermissions.map((p) => `${p.projectId}-${p.environmentId}`));
|
||||
return uniquePermissions.size !== selectedPermissions.length;
|
||||
const permissions = Object.values(selectedPermissions);
|
||||
const uniquePermissions = new Set(permissions.map((p) => `${p.projectId}-${p.environmentId}`));
|
||||
return uniquePermissions.size !== permissions.length;
|
||||
};
|
||||
|
||||
const submitAPIKey = async () => {
|
||||
@@ -162,7 +167,7 @@ export const AddApiKeyModal = ({
|
||||
}
|
||||
|
||||
// Convert permissions to the format expected by the API
|
||||
const environmentPermissions = selectedPermissions.map((permission) => ({
|
||||
const environmentPermissions = Object.values(selectedPermissions).map((permission) => ({
|
||||
environmentId: permission.environmentId,
|
||||
permission: permission.permission,
|
||||
}));
|
||||
@@ -174,7 +179,7 @@ export const AddApiKeyModal = ({
|
||||
});
|
||||
|
||||
reset();
|
||||
setSelectedPermissions([]);
|
||||
setSelectedPermissions({});
|
||||
setSelectedOrganizationAccess(defaultOrganizationAccess);
|
||||
};
|
||||
|
||||
@@ -191,7 +196,7 @@ export const AddApiKeyModal = ({
|
||||
}
|
||||
|
||||
// Check if at least one project permission is set or one organization access toggle is ON
|
||||
const hasProjectAccess = selectedPermissions.length > 0;
|
||||
const hasProjectAccess = Object.keys(selectedPermissions).length > 0;
|
||||
|
||||
const hasOrganizationAccess = Object.values(selectedOrganizationAccess).some((accessGroup) =>
|
||||
Object.values(accessGroup).some((value) => value === true)
|
||||
@@ -230,9 +235,13 @@ export const AddApiKeyModal = ({
|
||||
<div className="space-y-2">
|
||||
<Label>{t("environments.project.api_keys.project_access")}</Label>
|
||||
<div className="space-y-2">
|
||||
{selectedPermissions.map((permission, index) => {
|
||||
{/* Permission rows */}
|
||||
{Object.keys(selectedPermissions).map((key) => {
|
||||
const permissionIndex = parseInt(key.split("-")[1]);
|
||||
const permission = selectedPermissions[key];
|
||||
return (
|
||||
<div key={index + permission.projectId} className="flex items-center gap-2">
|
||||
<div key={key} className="flex items-center gap-2">
|
||||
{/* Project dropdown */}
|
||||
<div className="w-1/3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -252,7 +261,7 @@ export const AddApiKeyModal = ({
|
||||
<DropdownMenuItem
|
||||
key={option.id}
|
||||
onClick={() => {
|
||||
updateProjectAndEnvironment(index, option.id);
|
||||
updateProjectAndEnvironment(key, option.id);
|
||||
}}>
|
||||
{option.name}
|
||||
</DropdownMenuItem>
|
||||
@@ -260,6 +269,8 @@ export const AddApiKeyModal = ({
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Environment dropdown */}
|
||||
<div className="w-1/3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -281,7 +292,7 @@ export const AddApiKeyModal = ({
|
||||
<DropdownMenuItem
|
||||
key={env.id}
|
||||
onClick={() => {
|
||||
updatePermission(index, "environmentId", env.id);
|
||||
updatePermission(key, "environmentId", env.id);
|
||||
}}>
|
||||
{env.type}
|
||||
</DropdownMenuItem>
|
||||
@@ -289,6 +300,8 @@ export const AddApiKeyModal = ({
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Permission level dropdown */}
|
||||
<div className="w-1/3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -310,7 +323,7 @@ export const AddApiKeyModal = ({
|
||||
<DropdownMenuItem
|
||||
key={option}
|
||||
onClick={() => {
|
||||
updatePermission(index, "permission", option);
|
||||
updatePermission(key, "permission", option);
|
||||
}}>
|
||||
{option}
|
||||
</DropdownMenuItem>
|
||||
@@ -318,16 +331,16 @@ export const AddApiKeyModal = ({
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2"
|
||||
onClick={() => removePermission(index)}
|
||||
aria-label={t("environments.project.api_keys.delete_permission")}>
|
||||
|
||||
{/* Delete button */}
|
||||
<button type="button" className="p-2" onClick={() => removePermission(permissionIndex)}>
|
||||
<Trash2Icon className={"h-5 w-5 text-slate-500 hover:text-red-500"} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Add permission button */}
|
||||
<Button type="button" variant="outline" onClick={addPermission}>
|
||||
<span className="mr-2">+</span> {t("environments.settings.api_keys.add_permission")}
|
||||
</Button>
|
||||
@@ -384,7 +397,7 @@ export const AddApiKeyModal = ({
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
reset();
|
||||
setSelectedPermissions([]);
|
||||
setSelectedPermissions({});
|
||||
}}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Logo } from "@/modules/ui/components/logo";
|
||||
import { FormbricksLogo } from "@/modules/ui/components/formbricks-logo";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
|
||||
export const SetupLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
@@ -10,7 +10,7 @@ export const SetupLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
style={{ scrollbarGutter: "stable both-edges" }}
|
||||
className="flex max-h-[90vh] w-[40rem] flex-col items-center space-y-4 overflow-auto rounded-lg border bg-white p-12 text-center shadow-md">
|
||||
<div className="h-20 w-20 rounded-lg bg-slate-900 p-2">
|
||||
<Logo className="h-full w-full" variant="image" />
|
||||
<FormbricksLogo className="h-full w-full" />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -41,8 +41,8 @@ vi.mock("next/link", () => ({
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/logo", () => ({
|
||||
Logo: () => <div data-testid="logo">Logo</div>,
|
||||
vi.mock("@/modules/ui/components/formbricks-logo", () => ({
|
||||
FormbricksLogo: () => <div data-testid="formbricks-logo">FormbricksLogo</div>,
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/button", () => ({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/modules/ui/components/button";
|
||||
import { Logo } from "@/modules/ui/components/logo";
|
||||
import { FormbricksLogo } from "@/modules/ui/components/formbricks-logo";
|
||||
import { useTranslate } from "@tolgee/react";
|
||||
import Image, { StaticImageData } from "next/image";
|
||||
import Link from "next/link";
|
||||
@@ -51,7 +51,7 @@ export const ConnectIntegration = ({
|
||||
<div className="flex w-1/2 flex-col items-center justify-center rounded-lg bg-white p-8 shadow">
|
||||
<div className="flex w-1/2 justify-center -space-x-4">
|
||||
<div className="flex h-32 w-32 items-center justify-center rounded-full bg-white p-6 shadow-md">
|
||||
<Logo variant="image" />
|
||||
<FormbricksLogo />
|
||||
</div>
|
||||
<div className="flex h-32 w-32 items-center justify-center rounded-full bg-white p-4 shadow-md">
|
||||
<Image className="w-1/2" src={integrationLogoSrc} alt="logo" />
|
||||
|
||||
197
apps/web/modules/ui/components/formbricks-logo/index.tsx
Normal file
197
apps/web/modules/ui/components/formbricks-logo/index.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
interface FormbricksLogoProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const FormbricksLogo = ({ className }: FormbricksLogoProps) => {
|
||||
return (
|
||||
<svg
|
||||
width="220"
|
||||
height="220"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}>
|
||||
<path
|
||||
d="M39.1602 147.334H95.8321V175.67C95.8321 191.32 83.1457 204.006 67.4962 204.006C51.8466 204.006 39.1602 191.32 39.1602 175.67V147.334Z"
|
||||
fill="url(#paint0_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8071H152.504C168.154 81.8071 180.84 94.4936 180.84 110.143C180.84 125.793 168.154 138.479 152.504 138.479H39.1602V81.8071Z"
|
||||
fill="url(#paint1_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="url(#paint2_linear_415_2)"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_415_2"
|
||||
style={{ maskType: "alpha" }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="39"
|
||||
y="16"
|
||||
width="142"
|
||||
height="189">
|
||||
<path
|
||||
d="M39.1602 147.335H95.8321V175.671C95.8321 191.32 83.1457 204.007 67.4962 204.007C51.8466 204.007 39.1602 191.32 39.1602 175.671V147.335Z"
|
||||
fill="url(#paint3_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8081H152.504C168.154 81.8081 180.84 94.4946 180.84 110.144C180.84 125.794 168.154 138.48 152.504 138.48H39.1602V81.8081Z"
|
||||
fill="url(#paint4_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="url(#paint5_linear_415_2)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_415_2)">
|
||||
<g filter="url(#filter0_d_415_2)">
|
||||
<mask
|
||||
id="mask1_415_2"
|
||||
style={{ maskType: "alpha" }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="39"
|
||||
y="16"
|
||||
width="142"
|
||||
height="189">
|
||||
<path
|
||||
d="M39.1602 147.335H95.8321V175.671C95.8321 191.32 83.1457 204.007 67.4962 204.007C51.8466 204.007 39.1602 191.32 39.1602 175.671V147.335Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8081H152.504C168.154 81.8081 180.84 94.4946 180.84 110.144C180.84 125.794 168.154 138.48 152.504 138.48H39.1602V81.8081Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_415_2)">
|
||||
<path
|
||||
d="M42.1331 -32.5321C64.3329 -54.1986 120.626 -32.5321 120.626 -32.5321H42.1331C36.6806 -27.2105 33.2847 -19.2749 33.2847 -7.76218C33.2847 50.6243 96.5317 71.8561 96.5317 112.55C96.5317 152.386 35.9231 176.962 33.3678 231.092H120.626C120.626 231.092 33.2847 291.248 33.2847 234.631C33.2847 233.437 33.3128 232.258 33.3678 231.092H-5.11523L2.41417 -32.5321H42.1331Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_415_2)">
|
||||
<circle cx="21.4498" cy="179.212" r="53.13" fill="#00C4B8" />
|
||||
</g>
|
||||
<g filter="url(#filter2_f_415_2)">
|
||||
<circle cx="21.4498" cy="44.6163" r="53.13" fill="#00C4B8" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_415_2"
|
||||
x="34.5149"
|
||||
y="-11.5917"
|
||||
width="137.209"
|
||||
height="243.47"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dx="23.2262" />
|
||||
<feGaussianBlur stdDeviation="13.9357" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_2" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_2" result="shape" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter1_f_415_2"
|
||||
x="-78.1326"
|
||||
y="79.6296"
|
||||
width="199.165"
|
||||
height="199.165"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="23.2262" result="effect1_foregroundBlur_415_2" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter2_f_415_2"
|
||||
x="-78.1326"
|
||||
y="-54.9661"
|
||||
width="199.165"
|
||||
height="199.165"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="23.2262" result="effect1_foregroundBlur_415_2" />
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="paint0_linear_415_2"
|
||||
x1="96.0786"
|
||||
y1="174.643"
|
||||
x2="39.1553"
|
||||
y2="174.873"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="1" stopColor="#00C4B8" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="109.116"
|
||||
x2="39.1602"
|
||||
y2="110.554"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00DDD0" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="43.5891"
|
||||
x2="39.1602"
|
||||
y2="45.0264"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00DDD0" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_415_2"
|
||||
x1="96.0786"
|
||||
y1="174.644"
|
||||
x2="39.1553"
|
||||
y2="174.874"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="109.117"
|
||||
x2="39.1602"
|
||||
y2="110.555"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="43.5891"
|
||||
x2="39.1602"
|
||||
y2="45.0264"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -8,59 +8,33 @@ describe("Logo", () => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
describe("default variant", () => {
|
||||
test("renders default logo correctly", () => {
|
||||
const { container } = render(<Logo />);
|
||||
const svg = container.querySelector("svg");
|
||||
test("renders correctly", () => {
|
||||
const { container } = render(<Logo />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(svg).toHaveAttribute("viewBox", "0 0 697 150");
|
||||
expect(svg).toHaveAttribute("fill", "none");
|
||||
expect(svg).toHaveAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
});
|
||||
|
||||
describe("image variant", () => {
|
||||
test("renders image logo correctly", () => {
|
||||
const { container } = render(<Logo variant="image" />);
|
||||
const svg = container.querySelector("svg");
|
||||
test("accepts and passes through props", () => {
|
||||
const testClassName = "test-class";
|
||||
const { container } = render(<Logo className={testClassName} />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders image logo with className correctly", () => {
|
||||
const testClassName = "test-class";
|
||||
const { container } = render(<Logo variant="image" className={testClassName} />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(svg).toHaveAttribute("class", testClassName);
|
||||
});
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(svg).toHaveAttribute("class", testClassName);
|
||||
});
|
||||
|
||||
describe("wordmark variant", () => {
|
||||
test("renders wordmark logo correctly", () => {
|
||||
const { container } = render(<Logo variant="wordmark" />);
|
||||
const svg = container.querySelector("svg");
|
||||
test("contains expected svg elements", () => {
|
||||
const { container } = render(<Logo />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders wordmark logo with className correctly", () => {
|
||||
const testClassName = "test-class";
|
||||
const { container } = render(<Logo variant="wordmark" className={testClassName} />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(svg).toHaveAttribute("class", testClassName);
|
||||
});
|
||||
|
||||
test("contains expected svg elements", () => {
|
||||
const { container } = render(<Logo variant="wordmark" />);
|
||||
const svg = container.querySelector("svg");
|
||||
|
||||
expect(svg?.querySelectorAll("path").length).toBeGreaterThan(0);
|
||||
expect(svg?.querySelector("line")).toBeInTheDocument();
|
||||
expect(svg?.querySelectorAll("mask").length).toBe(2);
|
||||
expect(svg?.querySelectorAll("filter").length).toBe(3);
|
||||
expect(svg?.querySelectorAll("linearGradient").length).toBe(6);
|
||||
});
|
||||
expect(svg?.querySelectorAll("path").length).toBeGreaterThan(0);
|
||||
expect(svg?.querySelector("line")).toBeInTheDocument();
|
||||
expect(svg?.querySelectorAll("mask").length).toBe(2);
|
||||
expect(svg?.querySelectorAll("filter").length).toBe(3);
|
||||
expect(svg?.querySelectorAll("linearGradient").length).toBe(6);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,208 +1,4 @@
|
||||
interface LogoProps extends React.SVGProps<SVGSVGElement> {
|
||||
variant?: "image" | "wordmark";
|
||||
}
|
||||
|
||||
export const Logo = ({ variant = "wordmark", ...props }: LogoProps) => {
|
||||
if (variant === "image") return <ImageLogo {...props} />;
|
||||
|
||||
return <WordmarkLogo {...props} />;
|
||||
};
|
||||
|
||||
const ImageLogo = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
width="220"
|
||||
height="220"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
d="M39.1602 147.334H95.8321V175.67C95.8321 191.32 83.1457 204.006 67.4962 204.006C51.8466 204.006 39.1602 191.32 39.1602 175.67V147.334Z"
|
||||
fill="url(#paint0_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8071H152.504C168.154 81.8071 180.84 94.4936 180.84 110.143C180.84 125.793 168.154 138.479 152.504 138.479H39.1602V81.8071Z"
|
||||
fill="url(#paint1_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="url(#paint2_linear_415_2)"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_415_2"
|
||||
style={{ maskType: "alpha" }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="39"
|
||||
y="16"
|
||||
width="142"
|
||||
height="189">
|
||||
<path
|
||||
d="M39.1602 147.335H95.8321V175.671C95.8321 191.32 83.1457 204.007 67.4962 204.007C51.8466 204.007 39.1602 191.32 39.1602 175.671V147.335Z"
|
||||
fill="url(#paint3_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8081H152.504C168.154 81.8081 180.84 94.4946 180.84 110.144C180.84 125.794 168.154 138.48 152.504 138.48H39.1602V81.8081Z"
|
||||
fill="url(#paint4_linear_415_2)"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="url(#paint5_linear_415_2)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_415_2)">
|
||||
<g filter="url(#filter0_d_415_2)">
|
||||
<mask
|
||||
id="mask1_415_2"
|
||||
style={{ maskType: "alpha" }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="39"
|
||||
y="16"
|
||||
width="142"
|
||||
height="189">
|
||||
<path
|
||||
d="M39.1602 147.335H95.8321V175.671C95.8321 191.32 83.1457 204.007 67.4962 204.007C51.8466 204.007 39.1602 191.32 39.1602 175.671V147.335Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 62.7322C39.1602 37.0773 59.9576 16.2798 85.6126 16.2798H152.504C168.154 16.2798 180.84 28.9662 180.84 44.6158C180.84 60.2653 168.154 72.9518 152.504 72.9518H39.1602V62.7322Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M39.1602 81.8081H152.504C168.154 81.8081 180.84 94.4946 180.84 110.144C180.84 125.794 168.154 138.48 152.504 138.48H39.1602V81.8081Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_415_2)">
|
||||
<path
|
||||
d="M42.1331 -32.5321C64.3329 -54.1986 120.626 -32.5321 120.626 -32.5321H42.1331C36.6806 -27.2105 33.2847 -19.2749 33.2847 -7.76218C33.2847 50.6243 96.5317 71.8561 96.5317 112.55C96.5317 152.386 35.9231 176.962 33.3678 231.092H120.626C120.626 231.092 33.2847 291.248 33.2847 234.631C33.2847 233.437 33.3128 232.258 33.3678 231.092H-5.11523L2.41417 -32.5321H42.1331Z"
|
||||
fill="black"
|
||||
fillOpacity="0.1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_415_2)">
|
||||
<circle cx="21.4498" cy="179.212" r="53.13" fill="#00C4B8" />
|
||||
</g>
|
||||
<g filter="url(#filter2_f_415_2)">
|
||||
<circle cx="21.4498" cy="44.6163" r="53.13" fill="#00C4B8" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_415_2"
|
||||
x="34.5149"
|
||||
y="-11.5917"
|
||||
width="137.209"
|
||||
height="243.47"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dx="23.2262" />
|
||||
<feGaussianBlur stdDeviation="13.9357" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_2" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_2" result="shape" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter1_f_415_2"
|
||||
x="-78.1326"
|
||||
y="79.6296"
|
||||
width="199.165"
|
||||
height="199.165"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="23.2262" result="effect1_foregroundBlur_415_2" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter2_f_415_2"
|
||||
x="-78.1326"
|
||||
y="-54.9661"
|
||||
width="199.165"
|
||||
height="199.165"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="23.2262" result="effect1_foregroundBlur_415_2" />
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="paint0_linear_415_2"
|
||||
x1="96.0786"
|
||||
y1="174.643"
|
||||
x2="39.1553"
|
||||
y2="174.873"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="1" stopColor="#00C4B8" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="109.116"
|
||||
x2="39.1602"
|
||||
y2="110.554"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00DDD0" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="43.5891"
|
||||
x2="39.1602"
|
||||
y2="45.0264"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00DDD0" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_415_2"
|
||||
x1="96.0786"
|
||||
y1="174.644"
|
||||
x2="39.1553"
|
||||
y2="174.874"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="109.117"
|
||||
x2="39.1602"
|
||||
y2="110.555"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_415_2"
|
||||
x1="181.456"
|
||||
y1="43.5891"
|
||||
x2="39.1602"
|
||||
y2="45.0264"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#00FFE1" />
|
||||
<stop offset="1" stopColor="#01E0C6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const WordmarkLogo = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
export const Logo = (props: any) => {
|
||||
return (
|
||||
<svg viewBox="0 0 697 150" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { Logo } from "./index";
|
||||
|
||||
type StoryProps = React.ComponentProps<typeof Logo>;
|
||||
|
||||
const meta: Meta<StoryProps> = {
|
||||
title: "UI/Logo",
|
||||
component: Logo,
|
||||
tags: ["autodocs"],
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
controls: { sort: "alpha", exclude: [] },
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"** Logo ** renders the Formbricks brand as scalable SVG.It supports two variants('image' and 'wordmark') and is suitable for headers, navigation, and other branding areas.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: "select",
|
||||
options: ["image", "wordmark"],
|
||||
description: "The variant of the logo to display",
|
||||
table: {
|
||||
category: "Appearance",
|
||||
type: { summary: "string" },
|
||||
defaultValue: { summary: "wordmark" },
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
className: {
|
||||
control: "text",
|
||||
description: "Additional CSS classes for styling",
|
||||
table: {
|
||||
category: "Appearance",
|
||||
type: { summary: "string" },
|
||||
},
|
||||
order: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<StoryProps>;
|
||||
|
||||
const renderLogoWithOptions = (args: StoryProps) => {
|
||||
const { ...logoProps } = args;
|
||||
|
||||
return <Logo {...logoProps} />;
|
||||
};
|
||||
|
||||
export const Default: Story = {
|
||||
render: renderLogoWithOptions,
|
||||
args: {
|
||||
className: "h-20",
|
||||
},
|
||||
};
|
||||
|
||||
export const Image: Story = {
|
||||
render: renderLogoWithOptions,
|
||||
args: {
|
||||
className: "h-20",
|
||||
variant: "image",
|
||||
},
|
||||
};
|
||||
|
||||
export const Wordmark: Story = {
|
||||
render: renderLogoWithOptions,
|
||||
args: {
|
||||
className: "h-20",
|
||||
variant: "wordmark",
|
||||
},
|
||||
};
|
||||
@@ -55,7 +55,7 @@ else
|
||||
fi
|
||||
|
||||
echo "🗃️ Running database migrations..."
|
||||
run_with_timeout 600 "database migration" sh -c '(cd packages/database && npm run db:migrate:deploy)'
|
||||
run_with_timeout 300 "database migration" sh -c '(cd packages/database && npm run db:migrate:deploy)'
|
||||
|
||||
echo "🗃️ Running SAML database setup..."
|
||||
run_with_timeout 60 "SAML database setup" sh -c '(cd packages/database && npm run db:create-saml-database:deploy)'
|
||||
|
||||
Reference in New Issue
Block a user