config-ui/src/components/blueprints/ConnectionTabs.jsx

/*
 * 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 React from 'react'
import {
  Button,
  Intent,
  Colors,
  Icon,
  Classes,
  Tabs,
  Tab,
} from '@blueprintjs/core'

const ConnectionTabs = (props) => {
  const {
    connections = [],
    errors = [],
    selectedTabId,
    onChange = () => {},
  } = props

  return (
    <>
      <Tabs
        className='connection-tabs'
        animate={false}
        vertical={true}
        id='connection-tabs'
        onChange={(tabId) => onChange(tabId)}
        selectedTabId={selectedTabId}
      >
        {connections.map((c, cIdx) => (
          <Tab
            key={`tab-key-${cIdx}`}
            id={`connection-${c.id}`}
            title={
              errors.some((e) => e.includes(c.name)) ? (
                <>
                  {c.title}{' '}
                  <span style={{ display: 'flex', alignItems: 'center', alignSelf: 'center', marginLeft: '10px' }}>
                    <Icon
                      icon='warning-sign'
                      size={10}
                      color={Colors.GRAY4}
                    />
                  </span>
                </>
              ) : (
                c.title
              )
            }
            connection={c}
            // disabled=
          />
        ))}
      </Tabs>
    </>
  )
}

export default ConnectionTabs