superset-frontend/src/features/datasets/DatasetLayout/index.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { ReactElement, JSXElementConstructor } from 'react';
import { useTheme } from '@superset-ui/core';
import ResizableSidebar from 'src/components/ResizableSidebar';

import {
  StyledLayoutWrapper,
  LeftColumn,
  RightColumn,
  OuterRow,
  PanelRow,
  FooterRow,
  StyledLayoutHeader,
  StyledLayoutLeftPanel,
  StyledLayoutDatasetPanel,
  StyledLayoutRightPanel,
  StyledLayoutFooter,
} from '../styles';

interface DatasetLayoutProps {
  header?: ReactElement<any, string | JSXElementConstructor<any>> | null;
  leftPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
  datasetPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
  rightPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
  footer?: ReactElement<any, string | JSXElementConstructor<any>> | null;
}

export default function DatasetLayout({
  header,
  leftPanel,
  datasetPanel,
  rightPanel,
  footer,
}: DatasetLayoutProps) {
  const theme = useTheme();

  return (
    <StyledLayoutWrapper data-test="dataset-layout-wrapper">
      {header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
      <OuterRow>
        {leftPanel && (
          <ResizableSidebar
            id="dataset"
            initialWidth={theme.sizeUnit * 80}
            minWidth={theme.sizeUnit * 80}
            enable
          >
            {adjustedWidth => (
              <LeftColumn width={adjustedWidth}>
                <StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
              </LeftColumn>
            )}
          </ResizableSidebar>
        )}
        <RightColumn>
          <PanelRow>
            {datasetPanel && (
              <StyledLayoutDatasetPanel>
                {datasetPanel}
              </StyledLayoutDatasetPanel>
            )}
            {rightPanel && (
              <StyledLayoutRightPanel>{rightPanel}</StyledLayoutRightPanel>
            )}
          </PanelRow>

          <FooterRow>
            {footer && <StyledLayoutFooter>{footer}</StyledLayoutFooter>}
          </FooterRow>
        </RightColumn>
      </OuterRow>
    </StyledLayoutWrapper>
  );
}