🐛 Remove configuration options for Signal group properties

Requires systemli/ticker#328

src/api/Ticker.ts

@@ -100,15 +100,11 @@ export interface TickerSignalGroup {
   active: boolean
   connected: boolean
   groupID: string
-  groupName: string
-  groupDescription: string
   groupInviteLink: string
 }
 
 export interface TickerSignalGroupFormData {
   active: boolean
-  groupName?: string
-  groupDescription?: string
 }
 
 export interface TickerSignalGroupAdminFormData {

src/components/ticker/SignalGroupAdminForm.test.tsx

@@ -10,7 +10,7 @@ import SignalGroupAdminForm from './SignalGroupAdminForm'
 
 const token = sign({ id: 1, email: '[email protected]', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
 
-describe('SignalGroupForm', () => {
+describe('SignalGroupAdminForm', () => {
   beforeAll(() => {
     localStorage.setItem('token', token)
   })

src/components/ticker/SignalGroupCard.test.tsx

@@ -50,12 +50,26 @@ describe('SignalGroupCard', () => {
     )
   }
 
-  it('should render the component', () => {
+  it('should render the component', async () => {
     setup(ticker({ active: false, connected: false }))
 
     expect(screen.getByText('Signal Group')).toBeInTheDocument()
     expect(screen.getByText("You don't have a Signal group connected.")).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Configure' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument()
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add' }))
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/signal_group', {
+      body: JSON.stringify({ active: true }),
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + token,
+      },
+      method: 'put',
+    })
   })
 
   it('should render the component when connected and active', async () => {

src/components/ticker/SignalGroupCard.tsx

@@ -1,5 +1,5 @@
 import { faSignalMessenger } from '@fortawesome/free-brands-svg-icons'
-import { faGear, faPause, faPlay, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faAdd, faPause, faPlay, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Box,
@@ -24,32 +24,47 @@ import { Ticker, deleteTickerSignalGroupApi, putTickerSignalGroupApi } from '../
 import useAuth from '../../contexts/useAuth'
 import useNotification from '../../contexts/useNotification'
 import SignalGroupAdminModalForm from './SignalGroupAdminModalForm'
-import SignalGroupModalForm from './SignalGroupModalForm'
 
 interface Props {
   ticker: Ticker
 }
 
 const SignalGroupCard: FC<Props> = ({ ticker }) => {
   const { token } = useAuth()
-  const [open, setOpen] = useState<boolean>(false)
   const [dialogDeleteOpen, setDialogDeleteOpen] = useState<boolean>(false)
   const [adminOpen, setAdminOpen] = useState<boolean>(false)
-  const [submitting, setSubmitting] = useState<boolean>(false)
+  const [submittingAdd, setSubmittingAdd] = useState<boolean>(false)
+  const [submittingToggle, setSubmittingToggle] = useState<boolean>(false)
+  const [submittingDelete, setSubmittingDelete] = useState<boolean>(false)
   const { createNotification } = useNotification()
 
   const queryClient = useQueryClient()
 
   const signalGroup = ticker.signalGroup
 
+  const handleAdd = () => {
+    setSubmittingAdd(true)
+    putTickerSignalGroupApi(token, { active: true }, ticker)
+      .finally(() => {
+        queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
+        createNotification({ content: 'Signal group successfully configured', severity: 'success' })
+        setSubmittingAdd(false)
+      })
+      .catch(() => {
+        createNotification({ content: 'Failed to configure Signal group', severity: 'error' })
+      })
+  }
+
   const handleToggle = useCallback(() => {
+    setSubmittingToggle(true)
     putTickerSignalGroupApi(token, { active: !signalGroup.active }, ticker).finally(() => {
       queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
+      setSubmittingToggle(false)
     })
   }, [token, queryClient, signalGroup.active, ticker])
 
   const handleDelete = () => {
-    setSubmitting(true)
+    setSubmittingDelete(true)
     deleteTickerSignalGroupApi(token, ticker)
       .finally(() => {
         queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
@@ -60,13 +75,13 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
       })
       .finally(() => {
         setDialogDeleteOpen(false)
-        setSubmitting(false)
+        setSubmittingDelete(false)
       })
   }
 
   const groupLink = (
     <Link href={signalGroup.groupInviteLink} rel="noreferrer" target="_blank">
-      {signalGroup.groupName}
+      {ticker.title}
     </Link>
   )
 
@@ -77,9 +92,26 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
           <Typography component="h5" variant="h5">
             <FontAwesomeIcon icon={faSignalMessenger} /> Signal Group
           </Typography>
-          <Button onClick={() => setOpen(true)} size="small" startIcon={<FontAwesomeIcon icon={faGear} />}>
-            Configure
-          </Button>
+          {signalGroup.connected ? null : (
+            <Box sx={{ display: 'inline', position: 'relative' }}>
+              <Button onClick={handleAdd} size="small" startIcon={<FontAwesomeIcon icon={faAdd} />} disabled={submittingAdd}>
+                Add
+              </Button>
+              {submittingAdd && (
+                <CircularProgress
+                  size={24}
+                  sx={{
+                    color: 'primary',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    marginTop: '-12px',
+                    marginLeft: '-12px',
+                  }}
+                />
+              )}
+            </Box>
+          )}
         </Stack>
       </CardContent>
       <Divider variant="middle" />
@@ -101,21 +133,35 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
           <Button onClick={() => setAdminOpen(true)} size="small" startIcon={<FontAwesomeIcon icon={faPlus} />}>
             Admin
           </Button>
-          {signalGroup.active ? (
-            <Button onClick={handleToggle} size="small" startIcon={<FontAwesomeIcon icon={faPause} />}>
-              Disable
-            </Button>
-          ) : (
-            <Button onClick={handleToggle} size="small" startIcon={<FontAwesomeIcon icon={faPlay} />}>
-              Enable
-            </Button>
-          )}
+          <Box sx={{ display: 'inline', position: 'relative' }}>
+            {signalGroup.active ? (
+              <Button onClick={handleToggle} size="small" startIcon={<FontAwesomeIcon icon={faPause} />} disabled={submittingToggle}>
+                Disable
+              </Button>
+            ) : (
+              <Button onClick={handleToggle} size="small" startIcon={<FontAwesomeIcon icon={faPlay} />} disabled={submittingToggle}>
+                Enable
+              </Button>
+            )}
+            {submittingToggle && (
+              <CircularProgress
+                size={24}
+                sx={{
+                  color: 'primary',
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  marginTop: '-12px',
+                  marginLeft: '-12px',
+                }}
+              />
+            )}
+          </Box>
           <Button onClick={() => setDialogDeleteOpen(true)} size="small" startIcon={<FontAwesomeIcon icon={faTrash} />}>
             Delete
           </Button>
         </CardActions>
       ) : null}
-      <SignalGroupModalForm open={open} onClose={() => setOpen(false)} ticker={ticker} />
       <SignalGroupAdminModalForm open={adminOpen} onClose={() => setAdminOpen(false)} ticker={ticker} />
       <Dialog open={dialogDeleteOpen}>
         <DialogTitle>Delete Signal Group</DialogTitle>
@@ -125,10 +171,10 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
         <DialogActions>
           <Button onClick={() => setDialogDeleteOpen(false)}>Cancel</Button>
           <Box sx={{ display: 'inline', position: 'relative' }}>
-            <Button onClick={handleDelete} color="error" disabled={submitting} data-testid="dialog-delete">
+            <Button onClick={handleDelete} color="error" disabled={submittingDelete} data-testid="dialog-delete">
               Delete
             </Button>
-            {submitting && (
+            {submittingDelete && (
               <CircularProgress
                 size={24}
                 sx={{