feat: add source form

src/containers/index.ts

@@ -14,4 +14,5 @@ export * from './instrumentation-rule-form/index'
 export * from './instrumentation-rule-modal/index'
 export * from './multi-source-control/index'
 export * from './notification-manager/index'
+export * from './source-form/index'
 export * from './toast-list/index'

src/containers/source-form/index.tsx

@@ -0,0 +1,36 @@
+import React, { type FC } from 'react'
+import styled from 'styled-components'
+import { Input } from '@odigos/ui-components'
+
+interface Form {
+  otelServiceName: string
+}
+
+interface SourceFormProps {
+  formData: Form
+  handleFormChange: (key: keyof Form, val: any) => void
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 4px;
+`
+
+const SourceForm: FC<SourceFormProps> = ({ formData, handleFormChange }) => {
+  return (
+    <Container>
+      <Input
+        name='sourceName'
+        title='Source name'
+        tooltip='This overrides the default service name that runs in your cluster.'
+        placeholder='Use a name that overrides the source name'
+        value={formData.otelServiceName}
+        onChange={({ target: { value } }) => handleFormChange('otelServiceName', value)}
+      />
+    </Container>
+  )
+}
+
+export { SourceForm, type SourceFormProps }

src/containers/source-form/source-form.stories.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import type { StoryFn } from '@storybook/react'
+import { SourceForm, type SourceFormProps } from '.'
+
+export default {
+  title: 'Containers/SourceForm',
+  component: SourceForm,
+}
+
+export const Default: StoryFn<SourceFormProps> = (props) => {
+  const [formData, setFormData] = useState({ otelServiceName: '' })
+
+  return <SourceForm {...props} formData={formData} handleFormChange={(k, v) => setFormData((prev) => ({ ...prev, [k]: v }))} />
+}
+
+Default.args = {}