superset2/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/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 { useEffect, useMemo, useRef, useState, FC } from 'react';

import { bindActionCreators } from 'redux';
import { useSelector, shallowEqual } from 'react-redux';
import { useAppDispatch } from 'src/SqlLab/hooks/useAppDispatch';
import {
  MenuDotsDropdown,
  Modal,
  Input,
  InputRef,
} from '@superset-ui/core/components';
import { Menu, MenuItemType } from '@superset-ui/core/components/Menu';
import { t } from '@apache-superset/core/translation';
import { QueryState } from '@superset-ui/core';
import {
  styled,
  css,
  SupersetTheme,
  useTheme,
} from '@apache-superset/core/theme';
import {
  removeQueryEditor,
  removeAllOtherQueryEditors,
  queryEditorSetTitle,
  cloneQueryToNewTab,
  toggleLeftBar,
} from 'src/SqlLab/actions/sqlLab';
import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
import { Icons, type IconType } from '@superset-ui/core/components/Icons';

const TabTitleWrapper = styled.div`
  display: flex;
  align-items: center;

  [aria-label='check-circle'],
  .status-icon {
    margin: 0px;
  }
`;
const TabTitle = styled.span`
  margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
  text-transform: none;
`;

const IconContainer = styled.div`
  ${({ theme }) => css`
    display: inline-block;
    margin: 0 ${theme.sizeUnit * 2}px 0 0px;
  `}
`;
interface Props {
  queryEditor: QueryEditor;
}

const STATE_ICONS: Record<string, FC<IconType>> = {
  started: Icons.CircleSolid,
  stopped: Icons.StopOutlined,
  pending: Icons.CircleSolid,
  scheduled: Icons.CalendarOutlined,
  fetching: Icons.CircleSolid,
  timedOut: Icons.FieldTimeOutlined,
  running: Icons.CircleSolid,
  success: Icons.CheckCircleOutlined,
  failed: Icons.CloseCircleOutlined,
};

const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
  const theme = useTheme();
  const qe = useSelector<SqlLabRootState, QueryEditor>(
    ({ sqlLab: { unsavedQueryEditor } }) => ({
      ...queryEditor,
      ...(queryEditor.id === unsavedQueryEditor?.id && unsavedQueryEditor),
    }),
    shallowEqual,
  );
  const queryState = useSelector<SqlLabRootState, QueryState>(
    ({ sqlLab }) => sqlLab.queries[qe.latestQueryId || '']?.state || '',
  );
  const StatusIcon = queryState ? STATE_ICONS[queryState] : STATE_ICONS.running;

  const dispatch = useAppDispatch();
  const actions = useMemo(
    () =>
      bindActionCreators(
        {
          removeQueryEditor,
          removeAllOtherQueryEditors,
          queryEditorSetTitle,
          cloneQueryToNewTab,
          toggleLeftBar,
        },
        dispatch,
      ),
    [dispatch],
  );

  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
  const [newTitle, setNewTitle] = useState('');
  const renameInputRef = useRef<InputRef>(null);
  const tabHeaderRef = useRef<HTMLDivElement>(null);
  const trimmedTitle = newTitle.trim();

  function openRenameModal() {
    setNewTitle(qe.name);
    setIsRenameModalOpen(true);
  }

  // antd's Modal moves focus to the dialog container on open, which overrides
  // the Input's autoFocus, so focus and select the field via a ref once the
  // modal is open (select lets the prefilled name be overtyped, like prompt()).
  useEffect(() => {
    if (isRenameModalOpen) {
      renameInputRef.current?.focus();
      renameInputRef.current?.select();
    }
  }, [isRenameModalOpen]);

  function handleRenameTab() {
    if (trimmedTitle) {
      actions.queryEditorSetTitle(qe, trimmedTitle, qe.id);
    }
    setIsRenameModalOpen(false);
    // Save closes via the show prop rather than the Modal's onHide, so return
    // focus to the tab header here, matching what openerRef does on dismiss.
    tabHeaderRef.current?.focus();
  }
  const getStatusColor = (state: QueryState, theme: SupersetTheme): string => {
    const statusColors: Record<QueryState, string> = {
      [QueryState.Running]: theme.colorInfo,
      [QueryState.Success]: theme.colorSuccess,
      [QueryState.Failed]: theme.colorError,
      [QueryState.Started]: theme.colorPrimary,
      [QueryState.Stopped]: theme.colorWarning,
      [QueryState.Pending]: theme.colorIcon,
      [QueryState.Scheduled]: theme.colorIcon,
      [QueryState.Fetching]: theme.colorWarning,
      [QueryState.TimedOut]: theme.colorError,
    };

    return statusColors[state] || theme.colorIcon;
  };
  return (
    <TabTitleWrapper
      ref={tabHeaderRef}
      tabIndex={-1}
      data-test="sql-editor-tab-header"
    >
      <MenuDotsDropdown
        trigger={['click']}
        overlay={
          <Menu
            items={[
              {
                className: 'close-btn',
                key: '1',
                onClick: () => actions.removeQueryEditor(qe),
                'data-test': 'close-tab-menu-option',
                label: (
                  <>
                    <IconContainer>
                      <Icons.CloseOutlined
                        iconSize="l"
                        css={css`
                          verticalalign: middle;
                        `}
                      />
                    </IconContainer>
                    {t('Close tab')}
                  </>
                ),
              } as MenuItemType,
              {
                key: '2',
                onClick: openRenameModal,
                'data-test': 'rename-tab-menu-option',
                label: (
                  <>
                    <IconContainer>
                      <Icons.EditOutlined
                        css={css`
                          verticalalign: middle;
                        `}
                        iconSize="l"
                      />
                    </IconContainer>
                    {t('Rename tab')}
                  </>
                ),
              } as MenuItemType,
              {
                key: '4',
                onClick: () => actions.removeAllOtherQueryEditors(qe),
                'data-test': 'close-all-other-menu-option',
                label: (
                  <>
                    <IconContainer>
                      <Icons.CloseOutlined
                        iconSize="l"
                        css={css`
                          vertical-align: middle;
                        `}
                      />
                    </IconContainer>
                    {t('Close all other tabs')}
                  </>
                ),
              } as MenuItemType,
              {
                key: '5',
                onClick: () => actions.cloneQueryToNewTab(qe, false),
                'data-test': 'clone-tab-menu-option',
                label: (
                  <>
                    <IconContainer>
                      <Icons.CopyOutlined
                        iconSize="l"
                        css={css`
                          vertical-align: middle;
                        `}
                      />
                    </IconContainer>
                    {t('Duplicate tab')}
                  </>
                ),
              } as MenuItemType,
            ]}
          />
        }
      />
      <TabTitle>{qe.name}</TabTitle>{' '}
      <StatusIcon
        className="status-icon"
        iconSize="m"
        iconColor={getStatusColor(queryState, theme)}
      />{' '}
      <Modal
        show={isRenameModalOpen}
        onHide={() => setIsRenameModalOpen(false)}
        title={t('Rename tab')}
        onHandledPrimaryAction={handleRenameTab}
        primaryButtonName={t('Save')}
        disablePrimaryButton={!trimmedTitle}
        openerRef={tabHeaderRef}
      >
        <Input
          ref={renameInputRef}
          data-test="rename-tab-input"
          aria-label={t('Tab name')}
          value={newTitle}
          onChange={e => setNewTitle(e.target.value)}
          onPressEnter={() => {
            if (trimmedTitle) {
              handleRenameTab();
            }
          }}
          onKeyDown={e => {
            // The modal portals over the editable-card tabs; without this, keys
            // bubble to their handler and remove, navigate, or activate a tab
            // (Space included). Escape and Tab are left to bubble so the Modal
            // can close and trap focus.
            if (e.key !== 'Escape' && e.key !== 'Tab') {
              e.stopPropagation();
            }
          }}
        />
      </Modal>
    </TabTitleWrapper>
  );
};

export default SqlEditorTabHeader;