dosubot[bot] commented on issue #30046:
URL: https://github.com/apache/superset/issues/30046#issuecomment-2317123873
<!-- Answer -->
To ensure the filter bar orientation remains horizontal after reopening the
dashboard, you can follow these steps:
1. **Set the Filter Bar Orientation**: Use the `setFilterBarOrientation`
function to set the filter bar orientation to horizontal. This function updates
the dashboard's metadata to store the filter bar orientation.
2. **Persist the Orientation**: The `saveFilterBarOrientation` function in
the `dashboardInfo.ts` file is responsible for saving the filter bar
orientation in the backend and Redux store. Here is the implementation:
```ts
export function saveFilterBarOrientation(orientation: FilterBarOrientation) {
return async (dispatch: Dispatch, getState: () => RootState) => {
const { id, metadata } = getState().dashboardInfo;
const updateDashboard = makeApi<
Partial<DashboardInfo>,
{ result: Partial<DashboardInfo>; last_modified_time: number }
>({
method: 'PUT',
endpoint: `/api/v1/dashboard/${id}`,
});
try {
const response = await updateDashboard({
json_metadata: JSON.stringify({
...metadata,
filter_bar_orientation: orientation,
}),
});
const updatedDashboard = response.result;
const lastModifiedTime = response.last_modified_time;
if (updatedDashboard.json_metadata) {
const metadata = JSON.parse(updatedDashboard.json_metadata);
if (metadata.filter_bar_orientation) {
dispatch(setFilterBarOrientation(metadata.filter_bar_orientation));
}
}
if (lastModifiedTime) {
dispatch(onSave(lastModifiedTime));
}
} catch (errorObject) {
const errorText = await getErrorText(errorObject, 'dashboard');
dispatch(addDangerToast(errorText));
throw errorObject;
}
};
}
```
3. **Verify the Orientation**: You can use a test case to verify that the
filter bar orientation remains horizontal after reloading the dashboard:
```ts
it('should stay in horizontal mode when reloading', () => {
visitDashboard();
openVerticalFilterBar();
setFilterBarOrientation('horizontal');
cy.reload();
cy.getBySel('dashboard-filters-panel').should('not.exist');
});
```
This test case ensures that after setting the filter bar orientation to
horizontal and reloading the dashboard, the filter bar remains in horizontal
mode
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/actions/dashboardInfo.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
