From 3925bcb8bbe137590561f1fadb4e1378aa6df4c5 Mon Sep 17 00:00:00 2001
From: Anup Cowkur
Date: Mon, 10 Mar 2025 14:12:30 +0530
Subject: [PATCH] chore(frontend): update to tailwind 4.0 with dashboard
container file sync
closes #1771
Tailwind 4.0 has a dependency that depends on OS specific binaries.
See [issue](https://github.com/tailwindlabs/tailwindcss/issues/15806).
Since we were pointing dashboard container volume to local directory,
this causes issues since dev machine local OS won't match with container
OS and the OS specific binary can't be found.
Therefore, to update to tailwind 4.0, this commit:
- Removes local volumes from dashboard container
- Sync contents of frontend/dashboard to /app directory in dashboard container
- Updates tailwind classes, packages etc as required
- Updates tests
---
.../__snapshots__/accordion_test.tsx.snap | 32 +-
.../alert_dialog_modal_test.tsx.snap | 8 +-
.../danger_confirmation_modal_test.tsx.snap | 16 +-
.../__snapshots__/filter_pill_test.tsx.snap | 4 +-
.../__snapshots__/paginator_test.tsx.snap | 32 +-
.../__snapshots__/team_switcher_test.tsx.snap | 44 +-
.../dashboard/app/[teamId]/alerts/page.tsx | 4 +-
frontend/dashboard/app/[teamId]/apps/page.tsx | 14 +-
.../[appId]/[bugReportId]/page.tsx | 4 +-
frontend/dashboard/app/[teamId]/layout.tsx | 6 +-
frontend/dashboard/app/[teamId]/team/page.tsx | 16 +-
.../traces/[appId]/[traceId]/page.tsx | 2 +-
.../dashboard/app/components/accordion.tsx | 6 +-
.../app/components/alert_dialog_modal.tsx | 2 +-
.../app/components/copy_ai_context.tsx | 2 +-
.../dashboard/app/components/create_app.tsx | 8 +-
.../components/danger_confirmation_modal.tsx | 4 +-
.../app/components/debounce_text_input.tsx | 2 +-
.../app/components/dropdown_select.tsx | 12 +-
.../app/components/exceptions_details.tsx | 2 +-
.../dashboard/app/components/filter_pill.tsx | 2 +-
frontend/dashboard/app/components/journey.tsx | 6 +-
.../app/components/landing_header.tsx | 6 +-
.../app/components/loading_spinner.tsx | 2 +-
.../dashboard/app/components/paginator.tsx | 4 +-
.../session_timeline_event_cell.tsx | 2 +-
.../session_timeline_event_details.tsx | 6 +-
.../components/session_timeline_seekbar.tsx | 2 +-
.../dashboard/app/components/tab_select.tsx | 2 +-
.../app/components/team_switcher.tsx | 4 +-
.../dashboard/app/components/trace_viz.tsx | 2 +-
.../app/components/user_def_attr_selector.tsx | 14 +-
frontend/dashboard/app/global-error.tsx | 2 +-
frontend/dashboard/app/globals.css | 55 +-
frontend/dashboard/app/page.tsx | 2 +-
frontend/dashboard/dockerfile | 4 +-
frontend/dashboard/package-lock.json | 5265 +++++++++--------
frontend/dashboard/package.json | 8 +-
frontend/dashboard/postcss.config.js | 3 +-
self-host/compose.yml | 8 +-
40 files changed, 2829 insertions(+), 2790 deletions(-)
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap
index e41a0a7a2..c7a6ffc27 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Accordion renders correctly in collapsed state 1`] = `
TITLE
@@ -67,7 +67,7 @@ exports[`Accordion renders correctly in collapsed state 1`] = `
TITLE
@@ -179,7 +179,7 @@ exports[`Accordion renders correctly in opened state 1`] = `
TITLE
@@ -191,14 +191,14 @@ exports[`Accordion renders correctly in opened state 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
TITLE
@@ -246,14 +246,14 @@ exports[`Accordion renders correctly in opened state 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
TITLE
@@ -358,14 +358,14 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
TITLE
@@ -413,14 +413,14 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
TITLE
@@ -568,7 +568,7 @@ exports[`Accordion renders correctly once it's openened and closed again 2`] = `
TITLE
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap
index 42bf8bc14..ff66940c3 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="py-2"
/>
SOME AFFIRMATIVE TEXT
@@ -46,7 +46,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="py-2"
/>
SOME AFFIRMATIVE TEXT
@@ -129,7 +129,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="py-2"
/>
SOME AFFIRMATIVE TEXT
@@ -155,7 +155,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="py-2"
/>
SOME AFFIRMATIVE TEXT
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap
index 546f8d058..44bdf1797 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="flex flex-row"
>
SOME AFFIRMATIVE TEXT
@@ -32,7 +32,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="px-1"
/>
SOME CANCEL TEXT
@@ -62,7 +62,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="flex flex-row"
>
SOME AFFIRMATIVE TEXT
@@ -71,7 +71,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
class="px-1"
/>
SOME CANCEL TEXT
@@ -158,7 +158,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="flex flex-row"
>
SOME AFFIRMATIVE TEXT
@@ -167,7 +167,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="px-1"
/>
SOME CANCEL TEXT
@@ -197,7 +197,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="flex flex-row"
>
SOME AFFIRMATIVE TEXT
@@ -206,7 +206,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
class="px-1"
/>
SOME CANCEL TEXT
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
index d0a94ce2e..8e5fa16bc 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
@@ -9,7 +9,7 @@ exports[`FilterPill renders correctly 1`] = `
class="group relative select-none"
>
TITLE
@@ -26,7 +26,7 @@ exports[`FilterPill renders correctly 1`] = `
class="group relative select-none"
>
TITLE
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/paginator_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/paginator_test.tsx.snap
index 341d72900..acbab64f0 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/paginator_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/paginator_test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Paginator renders correctly when prev and next buttons are disabled 1`]
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -20,7 +20,7 @@ exports[`Paginator renders correctly when prev and next buttons are disabled 1`]
TITLE
Next
@@ -33,7 +33,7 @@ exports[`Paginator renders correctly when prev and next buttons are disabled 1`]
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -44,7 +44,7 @@ exports[`Paginator renders correctly when prev and next buttons are disabled 1`]
TITLE
Next
@@ -114,7 +114,7 @@ exports[`Paginator renders correctly when prev and next buttons are enabled 1`]
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -124,7 +124,7 @@ exports[`Paginator renders correctly when prev and next buttons are enabled 1`]
TITLE
Next
@@ -136,7 +136,7 @@ exports[`Paginator renders correctly when prev and next buttons are enabled 1`]
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -146,7 +146,7 @@ exports[`Paginator renders correctly when prev and next buttons are enabled 1`]
TITLE
Next
@@ -215,7 +215,7 @@ exports[`Paginator renders correctly when prev button is disabled and next butto
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -226,7 +226,7 @@ exports[`Paginator renders correctly when prev button is disabled and next butto
TITLE
Next
@@ -238,7 +238,7 @@ exports[`Paginator renders correctly when prev button is disabled and next butto
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -249,7 +249,7 @@ exports[`Paginator renders correctly when prev button is disabled and next butto
TITLE
Next
@@ -318,7 +318,7 @@ exports[`Paginator renders correctly when prev button is enabled and next button
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -328,7 +328,7 @@ exports[`Paginator renders correctly when prev button is enabled and next button
TITLE
Next
@@ -341,7 +341,7 @@ exports[`Paginator renders correctly when prev button is enabled and next button
class="flex flex-row items-center justify-self-center"
>
Previous
@@ -351,7 +351,7 @@ exports[`Paginator renders correctly when prev button is enabled and next button
TITLE
Next
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/team_switcher_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/team_switcher_test.tsx.snap
index 422d8f15c..9e3220b48 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/team_switcher_test.tsx.snap
+++ b/frontend/dashboard/__tests__/components/__snapshots__/team_switcher_test.tsx.snap
@@ -9,7 +9,7 @@ exports[`TeamSwitcher renders correctly in collapsed state 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
@@ -136,7 +136,7 @@ exports[`TeamSwitcher renders correctly in error state 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
@@ -211,7 +211,7 @@ exports[`TeamSwitcher renders correctly in loading state 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
@@ -229,7 +229,7 @@ exports[`TeamSwitcher renders correctly in loading state 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
@@ -304,7 +304,7 @@ exports[`TeamSwitcher renders correctly in opened state 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
Team 1
Team 2
Team 3
@@ -467,7 +467,7 @@ exports[`TeamSwitcher renders correctly in opened state 2`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
Team 1
Team 2
Team 3
@@ -578,7 +578,7 @@ exports[`TeamSwitcher renders correctly on new team selection 1`] = `
class="z-50 relative w-40 self-center inline-block text-left"
>
{
- const checkboxStyle = "appearance-none border-black rounded-sm font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
+ const checkboxStyle = "appearance-none border-black rounded-xs font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
return (
@@ -198,7 +198,7 @@ export default function Overview({ params }: { params: { teamId: string } }) {
/>
-
Save
+
Save
{updateAlertPrefsApiStatus !== UpdateAlertPrefsApiStatus.Init &&
{updatePrefsMsg}
}
}
diff --git a/frontend/dashboard/app/[teamId]/apps/page.tsx b/frontend/dashboard/app/[teamId]/apps/page.tsx
index 0d3c10e7f..7ea83777d 100644
--- a/frontend/dashboard/app/[teamId]/apps/page.tsx
+++ b/frontend/dashboard/app/[teamId]/apps/page.tsx
@@ -189,8 +189,8 @@ export default function Apps({ params }: { params: { teamId: string } }) {
setAppName(event.target.value)
setAppNameChangeApiStatus(AppNameChangeApiStatus.Init)
}}
- className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400" />
- setAppNameConfirmationModalOpen(true)}>Save
+ className="w-96 border border-black rounded-md outline-hidden focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400" />
+ setAppNameConfirmationModalOpen(true)}>Save
{appNameChangeApiStatus === AppNameChangeApiStatus.Loading && Changing app name...
}
{appNameChangeApiStatus === AppNameChangeApiStatus.Error && Error changing app name, please try again
}
@@ -206,21 +206,21 @@ export default function Apps({ params }: { params: { teamId: string } }) {
{fetchAppSettingsApiStatus === FetchAppSettingsApiStatus.Loading && : Loading...
}
{fetchAppSettingsApiStatus === FetchAppSettingsApiStatus.Error && : Unable to fetch retention period. Please refresh page to try again.
}
{fetchAppSettingsApiStatus === FetchAppSettingsApiStatus.Success && handleRetentionPeriodChange(item as string)} />}
- {fetchAppSettingsApiStatus === FetchAppSettingsApiStatus.Success && saveAppSettings()}>Save }
+ {fetchAppSettingsApiStatus === FetchAppSettingsApiStatus.Success && saveAppSettings()}>Save }
{updateAppSettingsApiStatus !== UpdateAppSettingsApiStatus.Init && {updateAppSettingsMsg}
}
Base URL
-
-
navigator.clipboard.writeText(process.env.NEXT_PUBLIC_API_BASE_URL!)}>Copy
+
+
navigator.clipboard.writeText(process.env.NEXT_PUBLIC_API_BASE_URL!)}>Copy
API key
-
-
navigator.clipboard.writeText(filters.app.api_key.key)}>Copy
+
+
navigator.clipboard.writeText(filters.app.api_key.key)}>Copy
diff --git a/frontend/dashboard/app/[teamId]/bug_reports/[appId]/[bugReportId]/page.tsx b/frontend/dashboard/app/[teamId]/bug_reports/[appId]/[bugReportId]/page.tsx
index 63a23a2ac..13d93dbbf 100644
--- a/frontend/dashboard/app/[teamId]/bug_reports/[appId]/[bugReportId]/page.tsx
+++ b/frontend/dashboard/app/[teamId]/bug_reports/[appId]/[bugReportId]/page.tsx
@@ -84,9 +84,9 @@ export default function BugReport({ params }: { params: { teamId: string, appId:
{bugReport.description && {bugReport.description}
}
-
View Session
+
View Session
-
{bugReport.status === 0 ? "Close Bug Report" : "Re-Open Bug Report"}
+
{bugReport.status === 0 ? "Close Bug Report" : "Re-Open Bug Report"}
{updateBugReportStatusApiStatus === UpdateBugReportStatusApiStatus.Error && Error updating bug report status. Please try again.
}
diff --git a/frontend/dashboard/app/[teamId]/layout.tsx b/frontend/dashboard/app/[teamId]/layout.tsx
index 30db6ff3b..615ef6448 100644
--- a/frontend/dashboard/app/[teamId]/layout.tsx
+++ b/frontend/dashboard/app/[teamId]/layout.tsx
@@ -121,12 +121,12 @@ export default function DashboardLayout({
{menuItems.map(({ hrefSuffix, title }) => (
- {title}
+ {title}
))}
}
-
+
Support
- logoutUser()}>Logout
+ logoutUser()}>Logout
{teamsApiStatus === TeamsApiStatus.Success && {children} }
diff --git a/frontend/dashboard/app/[teamId]/team/page.tsx b/frontend/dashboard/app/[teamId]/team/page.tsx
index eeae0b747..e8872f2a7 100644
--- a/frontend/dashboard/app/[teamId]/team/page.tsx
+++ b/frontend/dashboard/app/[teamId]/team/page.tsx
@@ -250,8 +250,8 @@ export default function Team({ params }: { params: { teamId: string } }) {
setNewTeamName(event.target.value)
setTeamNameChangeApiStatus(TeamNameChangeApiStatus.Init)
}}
- className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400" />
- setTeamNameConfirmationModalOpen(true)}>Save
+ className="w-96 border border-black rounded-md outline-hidden focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400" />
+ setTeamNameConfirmationModalOpen(true)}>Save
{teamNameChangeApiStatus === TeamNameChangeApiStatus.Loading || teamNameChangeApiStatus === TeamNameChangeApiStatus.Error &&
}
{/* Loading message for team name change */}
@@ -263,10 +263,10 @@ export default function Team({ params }: { params: { teamId: string } }) {
Invite team members
{inviteMemberApiStatus !== InviteMemberApiStatus.Init &&
}
{/* Loading message for invite member */}
@@ -310,7 +310,7 @@ export default function Team({ params }: { params: { teamId: string } }) {
{/* Show change role button if not current user */}
{id !== currentUserId &&
-
{
+ {
setRoleChangeMemberId(id)
setRoleChangeMemberEmail(authzAndMembers.members.filter((i) => i.id === id)[0].email)
setRoleChangeOldRole(formatToCamelCase(authzAndMembers.members.filter((i) => i.id === id)[0].role))
@@ -329,7 +329,7 @@ export default function Team({ params }: { params: { teamId: string } }) {
{/* Show remove member button if not current user */}
{id !== currentUserId &&
-
{
+ {
setRemoveMemberId(id)
setRemoveMemberEmail(authzAndMembers.members.filter((i) => i.id === id)[0].email)
setRemoveMemberConfirmationModalOpen(true)
@@ -354,9 +354,9 @@ export default function Team({ params }: { params: { teamId: string } }) {
{createTeamApiStatus === CreateTeamApiStatus.Loading && Creating team...
}
diff --git a/frontend/dashboard/app/[teamId]/traces/[appId]/[traceId]/page.tsx b/frontend/dashboard/app/[teamId]/traces/[appId]/[traceId]/page.tsx
index 17b85d018..008fc7cec 100644
--- a/frontend/dashboard/app/[teamId]/traces/[appId]/[traceId]/page.tsx
+++ b/frontend/dashboard/app/[teamId]/traces/[appId]/[traceId]/page.tsx
@@ -52,7 +52,7 @@ export default function TraceDetails({ params }: { params: { teamId: string, app
App version: {trace.app_version}
Network type: {trace.network_type}
- View Session
+ View Session
}
diff --git a/frontend/dashboard/app/components/accordion.tsx b/frontend/dashboard/app/components/accordion.tsx
index 7972ff1e3..710e2fd64 100644
--- a/frontend/dashboard/app/components/accordion.tsx
+++ b/frontend/dashboard/app/components/accordion.tsx
@@ -26,15 +26,15 @@ export default function Accordion({
{ e.preventDefault(); setAccordionOpen(!accordionOpen); }}
aria-expanded={accordionOpen}
aria-controls={`accordion-text-${id}`}
>
{title}
-
-
+
+
diff --git a/frontend/dashboard/app/components/alert_dialog_modal.tsx b/frontend/dashboard/app/components/alert_dialog_modal.tsx
index 60bc26e1e..15243c117 100644
--- a/frontend/dashboard/app/components/alert_dialog_modal.tsx
+++ b/frontend/dashboard/app/components/alert_dialog_modal.tsx
@@ -16,7 +16,7 @@ const AlertDialogModal: React.FC
= ({ body, open, affirma
{body}
-
{affirmativeText}
+
{affirmativeText}
diff --git a/frontend/dashboard/app/components/copy_ai_context.tsx b/frontend/dashboard/app/components/copy_ai_context.tsx
index 2ceab052c..563a88ebf 100644
--- a/frontend/dashboard/app/components/copy_ai_context.tsx
+++ b/frontend/dashboard/app/components/copy_ai_context.tsx
@@ -40,7 +40,7 @@ const CopyAiContext: React.FC = ({ appName, exceptionsType,
+ "Please help me debug this."
return (
- navigator.clipboard.writeText(llmContext)}>
+ navigator.clipboard.writeText(llmContext)}>
Copy AI Context
Copy full exception context for easy pasting in your favorite LLM
diff --git a/frontend/dashboard/app/components/create_app.tsx b/frontend/dashboard/app/components/create_app.tsx
index 26e2d073d..d669e74bd 100644
--- a/frontend/dashboard/app/components/create_app.tsx
+++ b/frontend/dashboard/app/components/create_app.tsx
@@ -65,9 +65,9 @@ const CreateApp: React.FC = ({ teamId, existingAppName = null, e
{createAppApiStatus === CreateAppApiStatus.Loading && Creating app...
}
@@ -82,8 +82,8 @@ const CreateApp: React.FC = ({ teamId, existingAppName = null, e
API key
-
- navigator.clipboard.writeText(existingApiKey !== null ? existingApiKey : data.api_key.key)}>Copy
+
+ navigator.clipboard.writeText(existingApiKey !== null ? existingApiKey : data.api_key.key)}>Copy
}
diff --git a/frontend/dashboard/app/components/danger_confirmation_modal.tsx b/frontend/dashboard/app/components/danger_confirmation_modal.tsx
index f92c023ac..2e6008919 100644
--- a/frontend/dashboard/app/components/danger_confirmation_modal.tsx
+++ b/frontend/dashboard/app/components/danger_confirmation_modal.tsx
@@ -19,9 +19,9 @@ const DangerConfirmationModal: React.FC = ({ body,
{body}
-
{affirmativeText}
+
{affirmativeText}
-
{cancelText}
+
{cancelText}
diff --git a/frontend/dashboard/app/components/debounce_text_input.tsx b/frontend/dashboard/app/components/debounce_text_input.tsx
index 9e467515a..e5e25c4ee 100644
--- a/frontend/dashboard/app/components/debounce_text_input.tsx
+++ b/frontend/dashboard/app/components/debounce_text_input.tsx
@@ -42,7 +42,7 @@ const DebounceTextInput: React.FC = ({
id={id}
type="text"
placeholder={placeholder}
- className="w-full border border-black rounded-md outline-none focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400"
+ className="w-full border border-black rounded-md outline-hidden focus-visible:outline-yellow-300 py-2 px-4 font-body placeholder:text-neutral-400"
value={inputValue}
onChange={handleInputChange}
/>
diff --git a/frontend/dashboard/app/components/dropdown_select.tsx b/frontend/dashboard/app/components/dropdown_select.tsx
index 4a05fbd82..1226150e2 100644
--- a/frontend/dashboard/app/components/dropdown_select.tsx
+++ b/frontend/dashboard/app/components/dropdown_select.tsx
@@ -135,11 +135,11 @@ const DropdownSelect: React.FC = ({ title, type, items, ini
onChangeSelected?.(selected);
}, [selected]);
- const buttonStyle = "block px-2 py-2 w-full truncate text-white bg-neutral-950 hover:text-black font-display text-left hover:bg-yellow-200 active:bg-yellow-300 outline-none focus:bg-yellow-200"
- const groupSelectButtonStyle = "text-white text-xs font-display rounded-md border border-white p-1 bg-neutral-950 hover:text-black hover:bg-yellow-200 hover:border-black focus-visible:bg-yellow-200 focus-visible:text-black focus-visible:border-black active:bg-yellow-300 outline-none"
- const checkboxContainerStyle = "px-2 py-2 bg-neutral-950 truncate text-white font-display text-left outline-none hover:text-black hover:bg-yellow-200 focus:text-black focus:bg-yellow-200 active:bg-yellow-300"
- const checkboxInputStyle = "appearance-none pointer-events-none border-white rounded-sm font-display bg-neutral-950 checked:bg-neutral-950 checked:hover:bg-neutral-950 checked:focus:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:ring-1 checked:ring-white"
- const searchInputStyle = "w-full bg-neutral-950 text-white text-sm border border-white rounded-md py-2 px-4 font-body placeholder:text-gray-400 focus:outline-none focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
+ const buttonStyle = "block px-2 py-2 w-full truncate text-white bg-neutral-950 hover:text-black font-display text-left hover:bg-yellow-200 active:bg-yellow-300 outline-hidden focus:bg-yellow-200"
+ const groupSelectButtonStyle = "text-white text-xs font-display rounded-md border border-white p-1 bg-neutral-950 hover:text-black hover:bg-yellow-200 hover:border-black focus-visible:bg-yellow-200 focus-visible:text-black focus-visible:border-black active:bg-yellow-300 outline-hidden"
+ const checkboxContainerStyle = "px-2 py-2 bg-neutral-950 truncate text-white font-display text-left outline-hidden hover:text-black hover:bg-yellow-200 focus:text-black focus:bg-yellow-200 active:bg-yellow-300"
+ const checkboxInputStyle = "appearance-none pointer-events-none border-white rounded-xs font-display bg-neutral-950 checked:bg-neutral-950 checked:hover:bg-neutral-950 checked:focus:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:ring-1 checked:ring-white"
+ const searchInputStyle = "w-full bg-neutral-950 text-white text-sm border border-white rounded-md py-2 px-4 font-body placeholder:text-gray-400 focus:outline-hidden focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
return (
@@ -147,7 +147,7 @@ const DropdownSelect: React.FC = ({ title, type, items, ini
+ className="inline-flex justify-center w-full font-display border border-black rounded-md outline-hidden hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300">
{type === DropdownSelectType.SingleString && {selected as string} }
{type === DropdownSelectType.SingleAppVersion && {(selected as AppVersion).displayName} }
{type === DropdownSelectType.SingleOsVersion && {(selected as OsVersion).displayName} }
diff --git a/frontend/dashboard/app/components/exceptions_details.tsx b/frontend/dashboard/app/components/exceptions_details.tsx
index 24819ecbf..c665c2206 100644
--- a/frontend/dashboard/app/components/exceptions_details.tsx
+++ b/frontend/dashboard/app/components/exceptions_details.tsx
@@ -170,7 +170,7 @@ export const ExceptionsDetails: React.FC = ({ exceptions
}
-
View Session
+
View Session
diff --git a/frontend/dashboard/app/components/filter_pill.tsx b/frontend/dashboard/app/components/filter_pill.tsx
index d7ad2b112..3b849a742 100644
--- a/frontend/dashboard/app/components/filter_pill.tsx
+++ b/frontend/dashboard/app/components/filter_pill.tsx
@@ -9,7 +9,7 @@ const tooltipChars = 1000
const FilterPill: React.FC = ({ title }) => {
return (
-
+
{title}
diff --git a/frontend/dashboard/app/components/journey.tsx b/frontend/dashboard/app/components/journey.tsx
index 7218a1e7d..d35d169da 100644
--- a/frontend/dashboard/app/components/journey.tsx
+++ b/frontend/dashboard/app/components/journey.tsx
@@ -277,13 +277,13 @@ const Journey: React.FC = ({ teamId, bidirectional, journeyType, e
linkTooltip={({
link
}) =>
-
+
{link.source.id.split(".").pop()} → {link.target.id.split(".").pop()}: {link.value > 1 ? link.value + ' sessions' : link.value + ' session'}
}
nodeTooltip={({
node
}) =>
-
+
{node.id}
{node.issues?.crashes?.length! > 0 &&
@@ -308,7 +308,7 @@ const Journey: React.FC
= ({ teamId, bidirectional, journeyType, e
>
{selectedNode !== undefined &&
-
setSelectedNode(undefined)}>Close
+
setSelectedNode(undefined)}>Close
{selectedNode!.id}
{selectedNode.issues?.crashes?.length! > 0 && (
diff --git a/frontend/dashboard/app/components/landing_header.tsx b/frontend/dashboard/app/components/landing_header.tsx
index 29fb75ec0..1b143340c 100644
--- a/frontend/dashboard/app/components/landing_header.tsx
+++ b/frontend/dashboard/app/components/landing_header.tsx
@@ -23,7 +23,7 @@ export default function LandingHeader() {
return (
setIsFocused(true)} onBlur={() => setIsFocused(false)} className={`w-full flex flex-col z-50 bg-white fixed top-0 transition-transform duration-100 ease-in-out ${scrollDir === 'scrolling down' && isFocused === false ? '-translate-y-full' : 'translate-y-0'}`}>
-
router.push('/')}>
+ router.push('/')}>
- {selfHosted && Login}
- {!selfHosted &&
+ {selfHosted && Login}
+ {!selfHosted &&
{
className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-black border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status">
Loading...
)
diff --git a/frontend/dashboard/app/components/paginator.tsx b/frontend/dashboard/app/components/paginator.tsx
index 7c494ce69..ecb158d91 100644
--- a/frontend/dashboard/app/components/paginator.tsx
+++ b/frontend/dashboard/app/components/paginator.tsx
@@ -17,9 +17,9 @@ export enum PaginationDirection {
const Paginator: React.FC = ({ displayText, prevEnabled, nextEnabled, onNext, onPrev }) => {
return (
-
Previous
+
Previous
{displayText}
-
Next
+
Next
);
};
diff --git a/frontend/dashboard/app/components/session_timeline_event_cell.tsx b/frontend/dashboard/app/components/session_timeline_event_cell.tsx
index 98fd412ca..98106f41c 100644
--- a/frontend/dashboard/app/components/session_timeline_event_cell.tsx
+++ b/frontend/dashboard/app/components/session_timeline_event_cell.tsx
@@ -158,7 +158,7 @@ export default function SessionTimelineEventCell({
}
return (
- onClick(index)}>
diff --git a/frontend/dashboard/app/components/session_timeline_event_details.tsx b/frontend/dashboard/app/components/session_timeline_event_details.tsx
index d557d470a..60077c386 100644
--- a/frontend/dashboard/app/components/session_timeline_event_details.tsx
+++ b/frontend/dashboard/app/components/session_timeline_event_details.tsx
@@ -107,21 +107,21 @@ export default function SessionTimelineEventDetails({
if ((eventType === "exception" && eventDetails.user_triggered === false) || eventType === "anr") {
return (
- View {eventType === "exception" ? 'Crash' : 'ANR'} Details
+ View {eventType === "exception" ? 'Crash' : 'ANR'} Details
)
}
if (eventType === "trace") {
return (
- View Trace Details
+ View Trace Details
)
}
if (eventType === "bug_report") {
return (
- View Bug Report Details
+ View Bug Report Details
)
}
diff --git a/frontend/dashboard/app/components/session_timeline_seekbar.tsx b/frontend/dashboard/app/components/session_timeline_seekbar.tsx
index fcca29750..4fd19db48 100644
--- a/frontend/dashboard/app/components/session_timeline_seekbar.tsx
+++ b/frontend/dashboard/app/components/session_timeline_seekbar.tsx
@@ -32,7 +32,7 @@ const SessionTimelineSeekBar: React.FC
= ({ value,
max="100"
value={value}
onChange={handleInputChange}
- className="relative w-full h-1 bg-gray-200 rounded appearance-none focus:outline-none cursor-pointer"
+ className="relative w-full h-1 bg-gray-200 rounded-sm appearance-none focus:outline-hidden cursor-pointer"
style={{
'--thumb-width': '2px',
'--thumb-height': '400px',
diff --git a/frontend/dashboard/app/components/tab_select.tsx b/frontend/dashboard/app/components/tab_select.tsx
index 0b04ff228..018e15fa6 100644
--- a/frontend/dashboard/app/components/tab_select.tsx
+++ b/frontend/dashboard/app/components/tab_select.tsx
@@ -22,7 +22,7 @@ const TabSelect: React.FC = ({ items, selected, onChangeSelected
font-display
rounded-md
transition-colors
- outline-none
+ outline-hidden
${selected === item
? 'bg-neutral-950 text-white'
: 'text-black border border-white hover:bg-yellow-200 hover:border-black focus:bg-yellow-200 focus:border-black'
diff --git a/frontend/dashboard/app/components/team_switcher.tsx b/frontend/dashboard/app/components/team_switcher.tsx
index 2d977c65e..43175819c 100644
--- a/frontend/dashboard/app/components/team_switcher.tsx
+++ b/frontend/dashboard/app/components/team_switcher.tsx
@@ -66,7 +66,7 @@ const TeamSwitcher: React.FC = ({ items, initialItemIndex = 0
type="button"
onClick={toggleTeamSwitcher}
disabled={teamsSwitcherStatus === TeamsSwitcherStatus.Loading || teamsSwitcherStatus === TeamsSwitcherStatus.Error}
- className="aspect-square w-full text-xl font-display border border-black rounded-full outline-none hover:enabled:bg-yellow-200 focus:enabled:bg-yellow-200 active:enabled:bg-yellow-300">
+ className="aspect-square w-full text-xl font-display border border-black rounded-full outline-hidden hover:enabled:bg-yellow-200 focus:enabled:bg-yellow-200 active:enabled:bg-yellow-300">
{teamsSwitcherStatus == TeamsSwitcherStatus.Loading && Updating...
}
{teamsSwitcherStatus == TeamsSwitcherStatus.Error && Error
}
{teamsSwitcherStatus == TeamsSwitcherStatus.Success &&
@@ -87,7 +87,7 @@ const TeamSwitcher: React.FC = ({ items, initialItemIndex = 0
selectItem(item)}
- className="block w-full px-2 py-2 text-white bg-neutral-950 font-display text-left hover:text-black hover:bg-yellow-200 active:bg-yellow-300 outline-none focus:bg-yellow-200"
+ className="block w-full px-2 py-2 text-white bg-neutral-950 font-display text-left hover:text-black hover:bg-yellow-200 active:bg-yellow-300 outline-hidden focus:bg-yellow-200"
role="menuitem"
>
{item}
diff --git a/frontend/dashboard/app/components/trace_viz.tsx b/frontend/dashboard/app/components/trace_viz.tsx
index 8197d1c33..d1be0c63b 100644
--- a/frontend/dashboard/app/components/trace_viz.tsx
+++ b/frontend/dashboard/app/components/trace_viz.tsx
@@ -251,7 +251,7 @@ const TraceViz: React.FC = ({ inputTrace }) => {
>
{selectedSpan !== undefined &&
-
{
setSelectedSpan(undefined)
setSelectedCheckpoint(undefined)
diff --git a/frontend/dashboard/app/components/user_def_attr_selector.tsx b/frontend/dashboard/app/components/user_def_attr_selector.tsx
index 673409868..b648b9bef 100644
--- a/frontend/dashboard/app/components/user_def_attr_selector.tsx
+++ b/frontend/dashboard/app/components/user_def_attr_selector.tsx
@@ -127,14 +127,14 @@ const UserDefAttrSelector: React.FC = ({ attrs, ops, o
onChangeSelected?.(udAttrMatchers);
}, [selectedAttrs, ...selectedAttrs.map(attr => selectedKeyOpMap.get(attr.key)), ...selectedAttrs.map(attr => selectedKeyValMap.get(attr.key))]);
- const clearButtonStyle = "text-white text-xs font-display rounded-md border border-white p-1 bg-neutral-950 hover:text-black hover:bg-yellow-200 hover:border-black focus-visible:bg-yellow-200 focus-visible:text-black focus-visible:border-black active:bg-yellow-300 outline-none"
- const checkboxContainerStyle = "flex flex-row items-center px-2 py-2 bg-neutral-950 text-white font-display text-left outline-none hover:text-black hover:bg-yellow-200 focus:text-black focus:bg-yellow-200 active:bg-yellow-300"
- const checkboxInputStyle = "appearance-none pointer-events-none border-white rounded-sm font-display bg-neutral-950 checked:bg-neutral-950 checked:hover:bg-neutral-950 checked:focus:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:ring-1 checked:ring-white"
- const searchInputStyle = "w-full py-2 px-4 bg-neutral-950 text-white text-sm border border-white rounded-md font-body placeholder:text-gray-400 focus:outline-none focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
- const innerDropdownStyle = "px-4 py-2 w-40 border border-white text-white text-sm bg-neutral-950 rounded-md font-body placeholder:text-gray-400 focus:outline-none focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
+ const clearButtonStyle = "text-white text-xs font-display rounded-md border border-white p-1 bg-neutral-950 hover:text-black hover:bg-yellow-200 hover:border-black focus-visible:bg-yellow-200 focus-visible:text-black focus-visible:border-black active:bg-yellow-300 outline-hidden"
+ const checkboxContainerStyle = "flex flex-row items-center px-2 py-2 bg-neutral-950 text-white font-display text-left outline-hidden hover:text-black hover:bg-yellow-200 focus:text-black focus:bg-yellow-200 active:bg-yellow-300"
+ const checkboxInputStyle = "appearance-none pointer-events-none border-white rounded-xs font-display bg-neutral-950 checked:bg-neutral-950 checked:hover:bg-neutral-950 checked:focus:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:ring-1 checked:ring-white"
+ const searchInputStyle = "w-full py-2 px-4 bg-neutral-950 text-white text-sm border border-white rounded-md font-body placeholder:text-gray-400 focus:outline-hidden focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
+ const innerDropdownStyle = "px-4 py-2 w-40 border border-white text-white text-sm bg-neutral-950 rounded-md font-body placeholder:text-gray-400 focus:outline-hidden focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
const innerOpDropdownStyle = innerDropdownStyle + " ml-2"
const innerValueDropdownStyle = innerDropdownStyle + " ml-4"
- const valueInputStyle = "py-2 px-4 ml-4 w-40 bg-neutral-950 text-white text-sm border border-white rounded-md font-body placeholder:text-gray-400 focus:outline-none focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
+ const valueInputStyle = "py-2 px-4 ml-4 w-40 bg-neutral-950 text-white text-sm border border-white rounded-md font-body placeholder:text-gray-400 focus:outline-hidden focus:border-yellow-300 focus:ring-1 focus:ring-yellow-300"
const renderValueInput = (attr: UserDefAttr) => {
switch (attr.type) {
@@ -197,7 +197,7 @@ const UserDefAttrSelector: React.FC = ({ attrs, ops, o
+ className="inline-flex justify-center w-full font-display border border-black rounded-md outline-hidden hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300">
User Defined Attrs
⏷
diff --git a/frontend/dashboard/app/global-error.tsx b/frontend/dashboard/app/global-error.tsx
index d8989ea95..268af5fbe 100644
--- a/frontend/dashboard/app/global-error.tsx
+++ b/frontend/dashboard/app/global-error.tsx
@@ -28,7 +28,7 @@ export default function Error({
{error.message}
- navigator.clipboard.writeText(error.message)}>Copy
+ navigator.clipboard.writeText(error.message)}>Copy