fix: trace page breaking (#4844)

* fix: trace page breaking

* fix: crash on reload

* fix: hide update button for viewer role in collapsed mode
This commit is contained in:
Vikrant Gupta 2024-04-09 19:20:08 +05:30 committed by GitHub
parent 25b74b48a5
commit 03dccb0101
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 25 additions and 19 deletions

View File

@ -1,10 +1,10 @@
.hide-update { .hide-update {
left: calc(50% - 41px) !important; left: calc(50% - 72px) !important;
} }
.explorer-update { .explorer-update {
position: fixed; position: fixed;
bottom: 24px; bottom: 24px;
left: calc(50% - 250px); left: calc(50% - 352px);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;

View File

@ -400,7 +400,8 @@ function ExplorerOptions({
> >
Add to Dashboard Add to Dashboard
</Button> </Button>
</div>
<div className="actions">
<Tooltip title="Hide"> <Tooltip title="Hide">
<Button <Button
disabled={disabled} disabled={disabled}
@ -420,6 +421,7 @@ function ExplorerOptions({
isQueryUpdated={isQueryUpdated} isQueryUpdated={isQueryUpdated}
handleClearSelect={handleClearSelect} handleClearSelect={handleClearSelect}
onUpdateQueryHandler={onUpdateQueryHandler} onUpdateQueryHandler={onUpdateQueryHandler}
isEditDeleteSupported={isEditDeleteSupported}
/> />
<Modal <Modal

View File

@ -16,6 +16,7 @@ interface DroppableAreaProps {
setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>; setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
handleClearSelect: () => void; handleClearSelect: () => void;
onUpdateQueryHandler: () => void; onUpdateQueryHandler: () => void;
isEditDeleteSupported: boolean;
} }
function ExplorerOptionsHideArea({ function ExplorerOptionsHideArea({
@ -25,6 +26,7 @@ function ExplorerOptionsHideArea({
setIsExplorerOptionHidden, setIsExplorerOptionHidden,
handleClearSelect, handleClearSelect,
onUpdateQueryHandler, onUpdateQueryHandler,
isEditDeleteSupported,
}: DroppableAreaProps): JSX.Element { }: DroppableAreaProps): JSX.Element {
const handleShowExplorerOption = (): void => { const handleShowExplorerOption = (): void => {
if (setIsExplorerOptionHidden) { if (setIsExplorerOptionHidden) {
@ -47,6 +49,7 @@ function ExplorerOptionsHideArea({
icon={<X size={14} color={Color.BG_INK_500} />} icon={<X size={14} color={Color.BG_INK_500} />}
/> />
</Tooltip> </Tooltip>
{isEditDeleteSupported && (
<Tooltip title="Update this View"> <Tooltip title="Update this View">
<Button <Button
onClick={onUpdateQueryHandler} onClick={onUpdateQueryHandler}
@ -55,6 +58,7 @@ function ExplorerOptionsHideArea({
icon={<Disc3 size={14} color={Color.BG_INK_500} />} icon={<Disc3 size={14} color={Color.BG_INK_500} />}
/> />
</Tooltip> </Tooltip>
)}
</div> </div>
)} )}
<Button <Button

View File

@ -307,7 +307,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
updatedQuery, updatedQuery,
{ [QueryParams.graphType]: type }, { [QueryParams.graphType]: type },
undefined, undefined,
false, true,
); );
}; };

View File

@ -534,12 +534,12 @@ export function QueryBuilderProvider({
} }
const queryItem = item as IBuilderQuery; const queryItem = item as IBuilderQuery;
const propsRequired = const propsRequired =
panelTypeDataSourceFormValuesMap[panelType as keyof PartialPanelTypes][ panelTypeDataSourceFormValuesMap[panelType as keyof PartialPanelTypes]?.[
queryItem.dataSource queryItem.dataSource
].builder.queryData; ].builder.queryData;
propsRequired.push('dataSource'); propsRequired?.push('dataSource');
propsRequired.forEach((p: any) => { propsRequired?.forEach((p: any) => {
set(queryItem, p, get(newQueryItem, p)); set(queryItem, p, get(newQueryItem, p));
}); });
return queryItem; return queryItem;
@ -674,7 +674,7 @@ export function QueryBuilderProvider({
query: Partial<Query>, query: Partial<Query>,
searchParams?: Record<string, unknown>, searchParams?: Record<string, unknown>,
redirectingUrl?: typeof ROUTES[keyof typeof ROUTES], redirectingUrl?: typeof ROUTES[keyof typeof ROUTES],
shallStringify?: boolean, shouldNotStringify?: boolean,
) => { ) => {
const queryType = const queryType =
!query.queryType || !Object.values(EQueryType).includes(query.queryType) !query.queryType || !Object.values(EQueryType).includes(query.queryType)
@ -728,9 +728,9 @@ export function QueryBuilderProvider({
Object.keys(searchParams).forEach((param) => Object.keys(searchParams).forEach((param) =>
urlQuery.set( urlQuery.set(
param, param,
shallStringify shouldNotStringify
? JSON.stringify(searchParams[param]) ? (searchParams[param] as string)
: (searchParams[param] as string), : JSON.stringify(searchParams[param]),
), ),
); );
} }