ydb-embedded-ui 4.5.2 → 4.7.0

package/dist/containers/Tenant/Query/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "controls.query-mode-selector_type": "Type:",
+  "tabs.newQuery": "New query",
+  "tabs.history": "History",
+  "tabs.saved": "Saved",
+  "history.empty": "History is empty",
+  "saved.empty": "There are no saved queries",
+  "delete-dialog.header": "Delete query",
+  "delete-dialog.question": "Are you sure you want to delete query",
+  "delete-dialog.delete": "Delete",
+  "delete-dialog.cancel": "Cancel"
+}

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "controls.query-mode-selector_type": "Тип:",
+  "tabs.newQuery": "Новый запрос",
+  "tabs.history": "История",
+  "tabs.saved": "Сохраненные",
+  "history.empty": "История пуста",
+  "saved.empty": "Нет сохраненных запросов",
+  "delete-dialog.header": "Удалить запрос",
+  "delete-dialog.question": "Вы уверены что хотите удалить запрос",
+  "delete-dialog.delete": "Удалить",
+  "delete-dialog.cancel": "Отменить"
+}

package/dist/containers/Tenant/Query/utils/getPreparedResult.ts

@@ -0,0 +1,30 @@
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {IQueryResult} from '../../../../types/store/query';
+
+export const getPreparedResult = (data: IQueryResult) => {
+    const columnDivider = '\t';
+    const rowDivider = '\n';
+
+    if (!data?.result?.length) {
+        return '';
+    }
+
+    const columnHeaders = Object.keys(data.result[0]);
+    const rows = Array<string[] | KeyValueRow[]>(columnHeaders).concat(data.result);
+
+    return rows
+        .map((item) => {
+            const row = [];
+
+            for (const field in item) {
+                if (typeof item[field] === 'object' || Array.isArray(item[field])) {
+                    row.push(JSON.stringify(item[field]));
+                } else {
+                    row.push(item[field]);
+                }
+            }
+
+            return row.join(columnDivider);
+        })
+        .join(rowDivider);
+};

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -3,7 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';

package/dist/containers/Tenant/Tenant.tsx

@@ -8,11 +8,9 @@ import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 import {useTypedSelector} from '../../utils/hooks';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
-import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
 import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
-import {getTenantInfo, clearTenant} from '../../store/reducers/tenant/tenant';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
@@ -62,7 +60,6 @@ function Tenant(props: TenantProps) {
     const {PathType: currentPathType, PathSubType: currentPathSubType} =
         (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
 
-    const {error: {status: tenantStatus = 200} = {}} = useTypedSelector((state) => state.tenant);
     const {error: {status: schemaStatus = 200} = {}} = useTypedSelector((state) => state.schema);
 
     const dispatch = useDispatch();
@@ -82,7 +79,6 @@ function Tenant(props: TenantProps) {
     }, [tenantName, dispatch]);
 
     useEffect(() => {
-        dispatch(resetLoadingState());
         dispatch(getSchema({path: currentSchemaPath}));
         dispatch(getSchemaAcl({path: currentSchemaPath}));
     }, [currentSchemaPath, dispatch]);
@@ -93,25 +89,8 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         if (tenantName) {
-            dispatch(getTenantInfo({path: tenantName}));
-            dispatch(
-                setHeader([
-                    {
-                        text: CLUSTER_PAGES.tenants.title,
-                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
-                    },
-                    {
-                        text: tenantName.startsWith('/') ? tenantName.slice(1) : tenantName,
-                        link: createHref(routes.tenant, undefined, {
-                            name: tenantName,
-                        }),
-                    },
-                ]),
-            );
+            dispatch(setHeaderBreadcrumbs('tenant', {tenantName}));
         }
-        return () => {
-            dispatch(clearTenant());
-        };
     }, [tenantName, dispatch]);
 
     const onCollapseSummaryHandler = () => {
@@ -125,7 +104,7 @@ function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
-    const showBlockingError = tenantStatus === 403 || schemaStatus === 403;
+    const showBlockingError = schemaStatus === 403;
 
     return (
         <div className={b()}>

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,5 +1,6 @@
-import {Icon} from '../../components/Icon';
 import {TENANT_GENERAL_TABS_IDS} from '../../store/reducers/tenant/constants';
+import routes, {createHref} from '../../routes';
+import {Icon} from '../../components/Icon';
 
 export enum TenantInfoTabsIds {
     overview = 'overview',
@@ -10,7 +11,8 @@ export enum TenantInfoTabsIds {
 export enum TenantTabsGroups {
     info = 'info',
     general = 'general',
-    generalTab = 'generalTab',
+    queryTab = 'queryTab',
+    diagnosticsTab = 'diagnosticsTab',
 }
 
 export const TENANT_GENERAL_TABS = [
@@ -42,3 +44,7 @@ export const TENANT_SCHEMA_TAB = [
         title: 'Schema',
     },
 ];
+
+export const getTenantPath = (query = {}) => {
+    return createHref(routes.tenant, undefined, query);
+};

package/dist/containers/Tenant/utils/constants.ts

@@ -0,0 +1,10 @@
+import type {Settings} from '@gravity-ui/react-data-table';
+
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+
+export const MAX_QUERY_HEIGHT = 6;
+
+export const QUERY_TABLE_SETTINGS: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRenderType: 'variable',
+};

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -2,9 +2,12 @@ import {Dispatch} from 'react';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {setShowPreview} from '../../../store/reducers/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_QUERY_TABS_ID,
+    TENANT_GENERAL_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 
 const createTableTemplate = (path: string) => {
@@ -38,6 +41,7 @@ const bindActions = (
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
         dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         setActivePath(path);
     };
 
@@ -67,6 +71,7 @@ const bindActions = (
         openPreview: () => {
             dispatch(setShowPreview(true));
             dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(path);
         },
     };

package/dist/containers/Tenants/Tenants.js

@@ -15,7 +15,7 @@ import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';
 
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import routes, {createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {withSearch} from '../../HOCS';
 import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
@@ -25,7 +25,6 @@ import {
     getSettingValue,
     ProblemFilterValues,
 } from '../../store/reducers/settings/settings';
-import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
 import {TenantTabsGroups, TENANT_GENERAL_TABS, TENANT_INFO_TABS} from '../Tenant/TenantPages';
@@ -51,7 +50,6 @@ class Tenants extends React.Component {
         tenants: PropTypes.array,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        setHeader: PropTypes.func,
         filter: PropTypes.string,
         changeFilter: PropTypes.func,
         cluster: PropTypes.object,
@@ -77,12 +75,6 @@ class Tenants extends React.Component {
         this.autofetcher = new AutoFetcher();
         this.props.getTenantsInfo(clusterName);
         this.autofetcher.fetch(() => this.props.getTenantsInfo(clusterName));
-        this.props.setHeader([
-            {
-                text: CLUSTER_PAGES.tenants.title,
-                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
-            },
-        ]);
     }
 
     componentWillUnmount() {
@@ -94,14 +86,15 @@ class Tenants extends React.Component {
 
         return (
             <div className={b('controls')}>
-                <TextInput
-                    className={b('search')}
-                    placeholder="Database name"
-                    value={searchQuery}
-                    onUpdate={handleSearchQuery}
-                    hasClear
-                    autoFocus
-                />
+                <div className={b('search')}>
+                    <TextInput
+                        placeholder="Database name"
+                        value={searchQuery}
+                        onUpdate={handleSearchQuery}
+                        hasClear
+                        autoFocus
+                    />
+                </div>
                 <ProblemFilter value={filter} onChange={changeFilter} />
             </div>
         );
@@ -133,15 +126,19 @@ class Tenants extends React.Component {
         const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
+        const getTenantBackend = (tenant) => {
+            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
+            return additionalTenantsInfo.tenantBackend
+                ? additionalTenantsInfo.tenantBackend(backend)
+                : undefined;
+        };
+
         const columns = [
             {
                 name: 'Name',
                 header: 'Database',
                 render: ({value, row}) => {
-                    const backend = row.MonitoringEndpoint ?? row.backend;
-                    const tenantBackend = additionalTenantsInfo.tenantBackend
-                        ? additionalTenantsInfo.tenantBackend(backend)
-                        : undefined;
+                    const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
                     return (
                         <div className={b('name-wrapper')}>
@@ -154,7 +151,7 @@ class Tenants extends React.Component {
                                 hasClipboardButton
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
-                                    backend: tenantBackend,
+                                    backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
                                     [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
@@ -294,12 +291,20 @@ class Tenants extends React.Component {
                 header: 'Tablets States',
                 sortable: false,
                 width: 430,
-                render: ({value, row}) =>
-                    value ? (
-                        <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
+                render: ({value, row}) => {
+                    const backend = getTenantBackend(row);
+
+                    return value ? (
+                        <TabletsStatistic
+                            path={row.Name}
+                            tablets={value}
+                            nodeIds={row.NodeIds}
+                            backend={backend}
+                        />
                     ) : (
                         '—'
-                    ),
+                    );
+                },
             },
         ];
 
@@ -309,16 +314,14 @@ class Tenants extends React.Component {
 
         return (
             <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <DataTable
-                        theme="yandex-cloud"
-                        data={filteredTenants}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        dynamicRender={true}
-                        emptyDataMessage="No such tenants"
-                    />
-                </div>
+                <DataTable
+                    theme="yandex-cloud"
+                    data={filteredTenants}
+                    columns={columns}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    dynamicRender={true}
+                    emptyDataMessage="No such tenants"
+                />
             </div>
         );
     };
@@ -363,7 +366,6 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = {
     getTenantsInfo,
     changeFilter,
-    setHeader,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Tenants));

package/dist/containers/Tenants/Tenants.scss

@@ -1,7 +1,7 @@
 @import '../../styles/mixins.scss';
 
 .tenants {
-    overflow: auto;
+    height: 100%;
     @include flex-container();
 
     &__format-label {
@@ -34,10 +34,8 @@
 
     &__table-wrapper {
         overflow: auto;
-        @include flex-container();
-    }
+        flex-grow: 1;
 
-    &__table-content {
         @include freeze-nth-column(1);
 
         @include table-styles;

package/dist/containers/UserSettings/i18n/en.json

@@ -15,6 +15,6 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
-  "settings.enableQueryModesForExplain.title": "Enable query modes for explain",
-  "settings.enableQueryModesForExplain.popover": "Enable script | scan query mode selector for both run and explain. May not work on versions before 23-2"
+  "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
+  "settings.enableAdditionalQueryModes.popover": "Adds 'data' and 'query' modes for run. Enables query modes for explain. May not work on some versions"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -15,6 +15,6 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
-  "settings.enableQueryModesForExplain.title": "Включить режимы выполнения запроса для explain",
-  "settings.enableQueryModesForExplain.popover": "Включить общий переключатель script | scan для run и explain. Может работать некорректно на версиях до 23-2"
+  "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
 }

package/dist/containers/UserSettings/settings.ts

@@ -4,7 +4,7 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
-    ENABLE_QUERY_MODES_FOR_EXPLAIN,
+    ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
     THEME_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -59,9 +59,9 @@ export const useNodesEndpointSetting: SettingProps = {
     helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
 };
 export const enableQueryModesForExplainSetting: SettingProps = {
-    settingKey: ENABLE_QUERY_MODES_FOR_EXPLAIN,
-    title: i18n('settings.enableQueryModesForExplain.title'),
-    helpPopoverContent: i18n('settings.enableQueryModesForExplain.popover'),
+    settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
+    title: i18n('settings.enableAdditionalQueryModes.title'),
+    helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
 
 export const generalSection: SettingsSection = {

package/dist/containers/Versions/Versions.scss

@@ -3,10 +3,6 @@
 .ydb-versions {
     $_: &;
 
-    &__content {
-        padding: 20px;
-    }
-
     &__controls {
         display: flex;
         align-items: center;

package/dist/containers/Versions/Versions.tsx

@@ -1,10 +1,14 @@
 import {useState} from 'react';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import {Checkbox, RadioButton} from '@gravity-ui/uikit';
 
-import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
 import type {VersionToColorMap} from '../../types/versions';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {Loader} from '../../components/Loader';
+
 import {getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes} from './groupNodes';
 import {GroupedNodesTree} from './GroupedNodesTree/GroupedNodesTree';
 import {GroupByValue} from './types';
@@ -14,11 +18,16 @@ import './Versions.scss';
 const b = block('ydb-versions');
 
 interface VersionsProps {
-    nodes?: PreparedClusterNode[];
     versionToColor?: VersionToColorMap;
 }
 
-export const Versions = ({nodes = [], versionToColor}: VersionsProps) => {
+export const Versions = ({versionToColor}: VersionsProps) => {
+    const dispatch = useDispatch();
+
+    const {nodes = [], loading, wasLoaded} = useTypedSelector((state) => state.clusterNodes);
+
+    useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
+
     const [groupByValue, setGroupByValue] = useState<GroupByValue>(GroupByValue.VERSION);
     const [expanded, setExpanded] = useState(false);
 
@@ -55,67 +64,66 @@ export const Versions = ({nodes = [], versionToColor}: VersionsProps) => {
             </div>
         );
     };
-    const renderGroupedNodes = () => {
-        const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
-        const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
-        const otherNodes = getOtherNodes(nodes, versionToColor);
-        const storageNodesContent = storageNodes?.length ? (
-            <>
-                <h3>Storage nodes</h3>
-                {storageNodes.map(({title, nodes: itemNodes, items, versionColor}, index) => (
-                    <GroupedNodesTree
-                        key={`storage-nodes-${index}`}
-                        title={title}
-                        nodes={itemNodes}
-                        items={items}
-                        versionColor={versionColor}
-                    />
-                ))}
-            </>
-        ) : null;
-        const tenantNodesContent = tenantNodes?.length ? (
-            <>
-                <h3>Database nodes</h3>
-                {renderControls()}
-                {tenantNodes.map(
-                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
-                        <GroupedNodesTree
-                            key={`tenant-nodes-${index}`}
-                            title={title}
-                            nodes={itemNodes}
-                            items={items}
-                            expanded={expanded}
-                            versionColor={versionColor}
-                            versionsValues={versionsValues}
-                        />
-                    ),
-                )}
-            </>
-        ) : null;
-        const otherNodesContent = otherNodes?.length ? (
-            <>
-                <h3>Other nodes</h3>
-                {otherNodes.map(
-                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
-                        <GroupedNodesTree
-                            key={`other-nodes-${index}`}
-                            title={title}
-                            nodes={itemNodes}
-                            items={items}
-                            versionColor={versionColor}
-                            versionsValues={versionsValues}
-                        />
-                    ),
-                )}
-            </>
-        ) : null;
-        return (
-            <div className={b('versions')}>
-                {storageNodesContent}
-                {tenantNodesContent}
-                {otherNodesContent}
-            </div>
-        );
-    };
-    return <div className={b('content')}>{renderGroupedNodes()}</div>;
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    }
+
+    const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
+    const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
+    const otherNodes = getOtherNodes(nodes, versionToColor);
+    const storageNodesContent = storageNodes?.length ? (
+        <>
+            <h3>Storage nodes</h3>
+            {storageNodes.map(({title, nodes: itemNodes, items, versionColor}) => (
+                <GroupedNodesTree
+                    key={`storage-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    versionColor={versionColor}
+                />
+            ))}
+        </>
+    ) : null;
+    const tenantNodesContent = tenantNodes?.length ? (
+        <>
+            <h3>Database nodes</h3>
+            {renderControls()}
+            {tenantNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
+                <GroupedNodesTree
+                    key={`tenant-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    expanded={expanded}
+                    versionColor={versionColor}
+                    versionsValues={versionsValues}
+                />
+            ))}
+        </>
+    ) : null;
+    const otherNodesContent = otherNodes?.length ? (
+        <>
+            <h3>Other nodes</h3>
+            {otherNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
+                <GroupedNodesTree
+                    key={`other-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    versionColor={versionColor}
+                    versionsValues={versionsValues}
+                />
+            ))}
+        </>
+    ) : null;
+
+    return (
+        <div className={b('versions')}>
+            {storageNodesContent}
+            {tenantNodesContent}
+            {otherNodesContent}
+        </div>
+    );
 };

package/dist/routes.ts

@@ -1,3 +1,4 @@
+import type {Location} from 'history';
 import qs from 'qs';
 import {compile} from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
@@ -13,17 +14,18 @@ const routes = {
     auth: '/auth',
 };
 
-export const CLUSTER_PAGES = {
-    tenants: {id: 'tenants', name: 'Databases', title: 'Database list'},
-    nodes: {id: 'nodes', name: 'Nodes', title: 'Nodes'},
-    storage: {id: 'storage', name: 'Storage', title: 'Storage'},
-    cluster: {id: 'cluster', name: 'Cluster', title: 'Cluster'},
+export const parseQuery = (location: Location) => {
+    return qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
 };
 
+export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+
 export function createHref(
     route: string,
     params?: Record<string, string | number>,
-    query: Record<string | number, string | number | string[] | number[] | undefined> = {},
+    query: Query = {},
 ) {
     let extendedQuery = query;