config-ui/src/components/blueprints/PipelineTasks.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 {
  Popover,
  Tag,
  Icon,
  Intent,
  Colors,
} from '@blueprintjs/core'
import { ProviderLabels, ProviderIcons } from '@/data/Providers'
const PipelineTasks = (props) => {
  const {
    tasks = []
  } = props

  const renderPluginTag = (providerTask, pIdx) => {
    const provider = providerTask.Plugin || providerTask.plugin
    return provider && (
      <Popover key={`provider-popover-key-${pIdx}`} usePortal={true}>
        <Tag
          key={`provider-icon-key-${pIdx}`} intent={Intent.NONE} round='true' style={{
            backgroundColor: '#fff',
            border: '1px solid #aaa',
            margin: '0 5px 5px 0',
            boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.45)',
            color: Colors.DARK_GRAY1
          }}
        >
          <span className='detected-provider-icon' style={{ margin: '2px 3px 0 0px', float: 'left' }}>
            {ProviderIcons[provider] ? ProviderIcons[provider](20, 20) : <></>}
          </span>
          <span style={{ display: 'flex', marginTop: '3px', fontWeight: 800 }}>
            {ProviderLabels[provider?.toUpperCase()] ? ProviderLabels[provider?.toUpperCase()] : 'Data Provider'}
          </span>
        </Tag>
        <div style={{ padding: '10px', maxWidth: '340px', overflow: 'hidden', overflowX: 'auto' }}>
          <div style={{ marginBottom: '10px', fontWeight: 700, fontSize: '14px' }}>
            <Icon icon='layers' size={16} /> {ProviderLabels[provider?.toUpperCase()] ? ProviderLabels[provider?.toUpperCase()] : 'Plugin'}
          </div>
          <code>
            {JSON.stringify(tasks.flat().find(t => t.Plugin === provider || t.plugin === provider))}
          </code>
        </div>
      </Popover>
    )
  }

  return (
    <>
      {tasks.map((providerTask, pIdx) => (
        renderPluginTag(providerTask, pIdx)
      ))}
    </>
  )
}

export default PipelineTasks