fix issue where new lines are not persisted to url params correctly (#1229)

If I try to create a multi-line where statement in the UI, it does not persist the new line character, which leads to errors as well.

Fixes HDX-2527

.changeset/cuddly-days-tie.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix issue where new lines are not persisted to url params correctly

packages/app/src/DBDashboardPage.tsx

@@ -66,6 +66,7 @@ import OnboardingModal from './components/OnboardingModal';
 import { Tags } from './components/Tags';
 import useDashboardFilters from './hooks/useDashboardFilters';
 import { useDashboardRefresh } from './hooks/useDashboardRefresh';
+import { parseAsStringWithNewLines } from './utils/queryParsers';
 import api from './api';
 import { DEFAULT_CHART_CONFIG } from './ChartUtils';
 import { IS_LOCAL_MODE } from './config';
@@ -557,7 +558,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
   ) as [SQLInterval | undefined, (value: SQLInterval | undefined) => void];
   const [where, setWhere] = useQueryState(
     'where',
-    parseAsString.withDefault(''),
+    parseAsStringWithNewLines.withDefault(''),
   );
   const [whereLanguage, setWhereLanguage] = useQueryState(
     'whereLanguage',

packages/app/src/DBSearchPage.tsx

@@ -104,6 +104,7 @@ import PatternTable from './components/PatternTable';
 import SourceSchemaPreview from './components/SourceSchemaPreview';
 import { useTableMetadata } from './hooks/useMetadata';
 import { useSqlSuggestions } from './hooks/useSqlSuggestions';
+import { parseAsStringWithNewLines } from './utils/queryParsers';
 import api from './api';
 import { LOCAL_STORE_CONNECTIONS_KEY } from './connection';
 import { DBSearchPageAlertModal } from './DBSearchPageAlertModal';
@@ -590,11 +591,11 @@ export function useDefaultOrderBy(sourceID: string | undefined | null) {
 // This is outside as it needs to be a stable reference
 const queryStateMap = {
   source: parseAsString,
-  where: parseAsString,
-  select: parseAsString,
+  where: parseAsStringWithNewLines,
+  select: parseAsStringWithNewLines,
   whereLanguage: parseAsStringEnum<'sql' | 'lucene'>(['sql', 'lucene']),
   filters: parseAsJson<Filter[]>(),
-  orderBy: parseAsString,
+  orderBy: parseAsStringWithNewLines,
 };
 
 function DBSearchPage() {

packages/app/src/utils/queryParsers.ts

@@ -0,0 +1,8 @@
+import { createParser } from 'nuqs';
+
+// Note: this can be deleted once we upgrade to nuqs v2.2.3
+// https://github.com/47ng/nuqs/pull/783
+export const parseAsStringWithNewLines = createParser<string>({
+  parse: value => value.replace(/%0A/g, '\n'),
+  serialize: value => value.replace(/\n/g, '%0A'),
+});