Repository: apache/superset
File: superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx (TypeScript)

Code before:

  return (
    <DashboardWrapper>
      {showFilterBar &&
        filterBarOrientation === FilterBarOrientation.Vertical && (
          <>
            <ResizableSidebar
              id={`dashboard:${dashboardId}`}
              enable={dashboardFiltersOpen}
              minWidth={OPEN_FILTER_BAR_WIDTH}
              maxWidth={OPEN_FILTER_BAR_MAX_WIDTH}
              initialWidth={OPEN_FILTER_BAR_WIDTH}
            >
              {renderChild}
            </ResizableSidebar>
          </>
        )}
      <StyledHeader
        data-test="dashboard-header-wrapper"
        ref={headerRef}
        filterBarWidth={
          showFilterBar &&
          filterBarOrientation === FilterBarOrientation.Vertical
            ? currentFilterBarWidth
            : 0
        }
      >
        {/* @ts-ignore */}
        <Droppable
          data-test="top-level-tabs"
          className={cx(!topLevelTabs && editMode && 'empty-droptarget')}
          component={dashboardRoot}
          parentComponent={null}
          depth={DASHBOARD_ROOT_DEPTH}
          index={0}
          orientation="column"
          onDrop={handleDrop}
          editMode={editMode}
          // you cannot drop on/displace tabs if they already exist
          disableDragDrop={!!topLevelTabs}
          style={draggableStyle}
        >
          {renderDraggableContent}
        </Droppable>
      </StyledHeader>
      <StyledContent fullSizeChartId={fullSizeChartId}>
        {!editMode &&
          !topLevelTabs &&
          dashboardLayout[DASHBOARD_GRID_ID]?.children?.length === 0 && (
            <EmptyState
              title={t('There are no charts added to this dashboard')}

Review comment (suggestion):
const filterBarWidth = useMemo(() => {
  if (showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical) {
    return currentFilterBarWidth;
  }
  return 0;
}, [showFilterBar, filterBarOrientation, currentFilterBarWidth]);

Can we use variable like this outside and pass it here rather than putting ternary conditions here

Code after:
    ],
  );

  const isVerticalFilterBarVisible =
    showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical;
  const headerFilterBarWidth = isVerticalFilterBarVisible
    ? currentFilterBarWidth
    : 0;

  return (
    <DashboardWrapper>
      {isVerticalFilterBarVisible && (
        <ResizableSidebar
          id={`dashboard:${dashboardId}`}
          enable={dashboardFiltersOpen}
          minWidth={OPEN_FILTER_BAR_WIDTH}
          maxWidth={OPEN_FILTER_BAR_MAX_WIDTH}
          initialWidth={OPEN_FILTER_BAR_WIDTH}
        >
          {renderChild}
        </ResizableSidebar>
      )}
      <StyledHeader
        data-test="dashboard-header-wrapper"
        ref={headerRef}
        filterBarWidth={headerFilterBarWidth}
      >
        {/* @ts-ignore */}
        <Droppable
          data-test="top-level-tabs"
          className={cx(!topLevelTabs && editMode && 'empty-droptarget')}
          component={dashboardRoot}
          parentComponent={null}
          depth={DASHBOARD_ROOT_DEPTH}
          index={0}
          orientation="column"
          onDrop={handleDrop}
          editMode={editMode}
          // you cannot drop on/displace tabs if they already exist
          disableDragDrop={!!topLevelTabs}
          style={draggableStyle}
        >
          {renderDraggableContent}
        </Droppable>
      </StyledHeader>
      <StyledContent fullSizeChartId={fullSizeChartId}>
        {!editMode &&
          !topLevelTabs &&
          dashboardLayout[DASHBOARD_GRID_ID]?.children?.length === 0 && (
            <EmptyState
              title={t('There are no charts added to this dashboard')}