Create Datasource UI and update create feature form

ui/src/api/api.tsx

@@ -1,7 +1,15 @@
 import { InteractionRequiredAuthError, PublicClientApplication } from '@azure/msal-browser'
 import Axios from 'axios'
 
-import { DataSource, Feature, FeatureLineage, Role, UserRole, NewFeature } from '@/models/model'
+import {
+  DataSource,
+  Feature,
+  FeatureLineage,
+  Role,
+  UserRole,
+  NewFeature,
+  NewDatasource
+} from '@/models/model'
 import { getMsalConfig } from '@/utils/utils'
 
 const msalInstance = getMsalConfig()
@@ -258,3 +266,12 @@ export const createDerivedFeature = async (project: string, derivedFeature: NewF
       return response
     })
 }
+
+export const createSource = async (project: string, datasource: NewDatasource) => {
+  const axios = await authAxios(msalInstance)
+  return axios
+    .post(`${getApiBaseUrl()}/projects/${project}/datasources`, datasource)
+    .then((response) => {
+      return response
+    })
+}

ui/src/app.tsx

@@ -13,6 +13,7 @@ import Jobs from '@/pages/Jobs'
 import Management from '@/pages/Management'
 import Monitoring from '@/pages/Monitoring'
 import NewFeature from '@/pages/NewFeature'
+import NewSource from '@/pages/NewSource'
 import ProjectLineage from '@/pages/ProjectLineage'
 import Projects from '@/pages/Projects'
 import ResponseErrors from '@/pages/ResponseErrors'
@@ -44,6 +45,7 @@ const App = () => {
                   <Route path="/dataSources" element={<DataSources />} />
                   <Route path="/features" element={<Features />} />
                   <Route path="/new-feature" element={<NewFeature />} />
+                  <Route path="/new-source" element={<NewSource />} />
                   <Route
                     path="/projects/:project/features/:featureId"
                     element={<FeatureDetails />}

ui/src/components/AddTags/index.tsx

@@ -0,0 +1,208 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { Popconfirm, Button, Space, Table, Form, Input, Typography } from 'antd'
+
+import EditTable from '@/components/EditTable'
+import { EditTableInstance, EditColumnType } from '@/components/EditTable/interface'
+
+export interface AddTagsProps {
+  onChange?: (tabs: Tag[]) => void
+}
+
+export interface AddTagsInstance {
+  getTags: () => Tag[]
+}
+
+export interface Tag {
+  name: string
+  value: string
+}
+
+const { Link } = Typography
+
+const AddTags = (props: AddTagsProps, ref: any) => {
+  const [form] = Form.useForm()
+
+  const { onChange } = props
+
+  const [tags, setTags] = useState<Tag[]>([])
+
+  const editTableRef = useRef<EditTableInstance>(null)
+
+  const [editingKey, setEditingKey] = useState('')
+
+  const isEditing = (record: Tag) => record.name === editingKey
+
+  const updateTabs = (oldTag: Tag, newTag: Tag) => {
+    const newData = [...tags]
+    const index = newData.findIndex((item) => oldTag.name === item.name)
+    if (index > -1) {
+      const item = newData[index]
+      newData.splice(index, 1, {
+        ...item,
+        ...newTag
+      })
+      setTags(newData)
+      setEditingKey('')
+    } else {
+      newData.push(newTag)
+      setTags(newData)
+      setEditingKey('')
+    }
+  }
+  const onSave = (record: Tag) => {
+    const { form } = editTableRef.current!
+    form.validateFields().then((tag: Tag) => {
+      updateTabs(record, tag)
+    })
+  }
+
+  const onCancel = () => {
+    setEditingKey('')
+  }
+
+  const onEdit = (record: Tag) => {
+    const { form } = editTableRef.current!
+    form?.setFieldsValue(record)
+    setEditingKey(record.name)
+  }
+
+  const onDelete = (record: Tag) => {
+    setTags((tags) => {
+      const index = tags.findIndex((tag) => tag.name === record.name)
+      tags.splice(index, 1)
+      return [...tags]
+    })
+  }
+
+  const onAdd = () => {
+    form.validateFields().then((value: Tag) => {
+      updateTabs(value, value)
+      form.resetFields()
+    })
+  }
+
+  const columns: EditColumnType<Tag>[] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      editable: true
+    },
+    {
+      title: 'Value',
+      dataIndex: 'value',
+      editable: true
+    },
+    {
+      title: 'Actions',
+      width: 120,
+      render: (record: Tag) => {
+        const editable = isEditing(record)
+        return (
+          <Space>
+            {editable ? (
+              <>
+                <Link
+                  onClick={() => {
+                    onSave(record)
+                  }}
+                >
+                  Save
+                </Link>
+                <Link onClick={onCancel}>Cancel</Link>
+              </>
+            ) : (
+              <>
+                <Link
+                  title="edit"
+                  onClick={() => {
+                    onEdit(record)
+                  }}
+                >
+                  <EditOutlined />
+                </Link>
+                <Popconfirm
+                  title="Sure to delete?"
+                  onConfirm={() => {
+                    onDelete(record)
+                  }}
+                >
+                  <Link title="delete">
+                    <DeleteOutlined />
+                  </Link>
+                </Popconfirm>
+              </>
+            )}
+          </Space>
+        )
+      }
+    }
+  ]
+
+  useImperativeHandle<any, AddTagsInstance>(
+    ref,
+    () => {
+      return {
+        getTags: () => {
+          return tags
+        }
+      }
+    },
+    [form]
+  )
+
+  useEffect(() => {
+    onChange?.(tags)
+  }, [tags])
+
+  return (
+    <EditTable
+      ref={editTableRef}
+      summary={() => (
+        <Form form={form} component={false}>
+          <Table.Summary>
+            <Table.Summary.Row style={{ verticalAlign: 'baseline' }}>
+              <Table.Summary.Cell index={1}>
+                <Form.Item
+                  rules={[
+                    {
+                      required: true
+                    }
+                  ]}
+                  style={{ marginBottom: 0 }}
+                  name="name"
+                >
+                  <Input />
+                </Form.Item>
+              </Table.Summary.Cell>
+              <Table.Summary.Cell index={2}>
+                <Form.Item
+                  rules={[
+                    {
+                      required: true
+                    }
+                  ]}
+                  style={{ marginBottom: 0 }}
+                  name="value"
+                >
+                  <Input />
+                </Form.Item>
+              </Table.Summary.Cell>
+              <Table.Summary.Cell index={3}>
+                <Button onClick={onAdd}>Add</Button>
+              </Table.Summary.Cell>
+            </Table.Summary.Row>
+          </Table.Summary>
+        </Form>
+      )}
+      rowKey="name"
+      isEditing={isEditing}
+      columns={columns}
+      pagination={false}
+      dataSource={tags}
+    />
+  )
+}
+
+export default forwardRef<AddTagsInstance, AddTagsProps>(AddTags)

ui/src/components/EditTable/EditTableCell.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Input, InputNumber, Form } from 'antd'
+
+import { EditTableCellProps } from './interface'
+
+const { Item } = Form
+
+const EditTableCell = (props: EditTableCellProps) => {
+  const { editing, dataIndex, inputType, required, rules, children, ...restProps } = props
+
+  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Item required={required} rules={rules} name={dataIndex} style={{ margin: 0 }}>
+          {inputNode}
+        </Item>
+      ) : (
+        children
+      )}
+    </td>
+  )
+}
+
+export default EditTableCell

ui/src/components/EditTable/index.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+
+import { Table, Form, ConfigProvider } from 'antd'
+import type { ColumnType } from 'antd/es/table'
+
+import EditTableCell from './EditTableCell'
+import { EditTableProps, EditColumnType, EditTableInstance } from './interface'
+
+const EditTable = (props: EditTableProps, ref: any) => {
+  const [form] = Form.useForm()
+
+  const { columns, isEditing, ...restProps } = props
+
+  const mergedColumns = columns?.map((col: EditColumnType) => {
+    if (!col.editable) {
+      return col
+    }
+    return {
+      ...col,
+      onCell: (record: any) => ({
+        record,
+        inputType: col.inputType,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(record)
+      })
+    }
+  }) as ColumnType<any>[]
+
+  useImperativeHandle<any, EditTableInstance>(
+    ref,
+    () => {
+      return {
+        form
+      }
+    },
+    [form]
+  )
+
+  return (
+    <ConfigProvider
+      renderEmpty={() => {
+        return 'No tags found.'
+      }}
+    >
+      <Form form={form} component={false}>
+        <Table
+          {...restProps}
+          components={{
+            body: {
+              cell: EditTableCell
+            }
+          }}
+          columns={mergedColumns}
+        />
+      </Form>
+    </ConfigProvider>
+  )
+}
+
+export default forwardRef<EditTableInstance, EditTableProps>(EditTable)

ui/src/components/EditTable/interface.ts

@@ -0,0 +1,27 @@
+import { TableProps, FormRule, FormInstance } from 'antd'
+import type { ColumnType } from 'antd/es/table'
+
+export interface EditTableProps<T = any> extends TableProps<T> {
+  // columns?: EditColumnType<T>[]
+  isEditing: (record: any) => boolean
+}
+
+export interface EditColumnType<T = any> extends ColumnType<T> {
+  editable?: boolean
+  inputType?: 'number' | 'text'
+  rules?: FormRule[]
+  required?: boolean
+}
+
+export interface EditTableCellProps<T = any> extends React.HTMLAttributes<HTMLElement> {
+  editing?: boolean
+  dataIndex: string
+  inputType?: 'number' | 'text'
+  rules?: FormRule[]
+  required?: boolean
+  children?: React.ReactNode
+}
+
+export interface EditTableInstance {
+  form: FormInstance
+}

ui/src/components/FlowGraph/FlowGraph.tsx

@@ -43,7 +43,7 @@ const defaultProps: FlowGraphProps = {
   featureType: FeatureType.AllNodes
 }
 
-const FlowGraph = (props: FlowGraphProps) => {
+const FlowGraph = (props: FlowGraphProps, ref: any) => {
   const {
     className,
     style,