feat: rsd admin can add remotes

frontend/components/admin/AdminNav.tsx

@@ -30,6 +30,7 @@ import Diversity3Icon from '@mui/icons-material/Diversity3'
 import CategoryIcon from '@mui/icons-material/Category'
 import TerminalIcon from '@mui/icons-material/Terminal'
 import ListAltIcon from '@mui/icons-material/ListAlt'
+import HubIcon from '@mui/icons-material/Hub'
 
 import {editMenuItemButtonSx} from '~/config/menuItems'
 
@@ -106,6 +107,12 @@ export const adminPages = {
     icon: <ReceiptLongIcon />,
     path: '/admin/mentions',
   },
+  remote_rsd: {
+    title: 'Remotes',
+    subtitle: '',
+    icon: <HubIcon />,
+    path: '/admin/remote-rsd',
+  },
   logs:{
     title: 'Error logs',
     subtitle: '',

frontend/components/admin/remote-rsd/NoRemotesAlert.tsx

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+
+export default function NoRemotesAlert() {
+  return (
+    <Alert severity="warning">
+      <AlertTitle sx={{fontWeight:500}}>No remote RSD instances defined</AlertTitle>
+      To add remote RSD instance <strong>use Add button on the right</strong>.
+    </Alert>
+  )
+}

frontend/components/admin/remote-rsd/RemoteRsdList.tsx

@@ -0,0 +1,78 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useContext, useState} from 'react'
+import List from '@mui/material/List'
+
+import ContentLoader from '~/components/layout/ContentLoader'
+import PaginationContext from '~/components/pagination/PaginationContext'
+import RemoteRsdListItem from './RemoteRsdListItem'
+import NoRemotesAlert from './NoRemotesAlert'
+import RemoveRemoteRsdModal, {RemoteRsdModalProps} from './RemoveRemoteRsdModal'
+import {RemoteRsd} from './apiRemoteRsd'
+
+
+type OrganisationsAdminListProps = Readonly<{
+  remoteRsd: RemoteRsd[]
+  loading: boolean
+  onDelete: (id:string)=>void
+  onEdit: (item:RemoteRsd)=>void
+}>
+
+export default function RemoteRsdList({remoteRsd,loading,onDelete,onEdit}:OrganisationsAdminListProps) {
+  const {pagination:{page}} = useContext(PaginationContext)
+  const [modal, setModal] = useState<RemoteRsdModalProps>({
+    open: false
+  })
+
+  if (loading && !page) return <div className="py-6"><ContentLoader /></div>
+
+  if (remoteRsd.length===0) return <div className="py-6"><NoRemotesAlert /></div>
+
+  return (
+    <>
+      <List sx={{
+        width: '100%',
+      }}>
+        {
+          remoteRsd.map(item => {
+            return (
+              <RemoteRsdListItem
+                key={item.id}
+                item={item}
+                onDelete={()=>setModal({
+                  open: true,
+                  item
+                })}
+                onEdit={()=>onEdit(item)}
+              />
+            )
+          })
+        }
+      </List>
+      {
+        modal.open && modal.item ?
+          <RemoveRemoteRsdModal
+            item = {modal.item}
+            onCancel={() => {
+              setModal({
+                open: false
+              })
+            }}
+            onDelete={() => {
+            // call remove method if id present
+              if (modal.item && modal.item?.id) onDelete(modal.item?.id)
+              setModal({
+                open: false
+              })
+            }}
+          />
+          : null
+      }
+    </>
+  )
+}

frontend/components/admin/remote-rsd/RemoteRsdListItem.tsx

@@ -0,0 +1,109 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import IconButton from '@mui/material/IconButton'
+import ListItem from '@mui/material/ListItem'
+import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import Avatar from '@mui/material/Avatar'
+
+import {RemoteRsd} from './apiRemoteRsd'
+
+type RemoteRsdItemProps = Readonly<{
+  item: RemoteRsd,
+  onDelete: () => void
+  onEdit: () => void
+}>
+
+export default function RemoteRsdListItem({item, onEdit, onDelete}: RemoteRsdItemProps) {
+  const logo = `${item.domain}/favicon.ico`
+  return (
+    <ListItem
+      data-testid="admin-remote-rsd-item"
+      key={item.id}
+      secondaryAction={
+        <>
+          <IconButton
+            title="Edit remote rsd"
+            edge="end"
+            aria-label="edit"
+            onClick={() => {
+              onEdit()
+            }}
+            sx={{marginRight: '1rem'}}
+          >
+            <EditIcon />
+          </IconButton>
+
+          <IconButton
+            title="Delete remote rsd"
+            edge="end"
+            aria-label="delete"
+            onClick={() => {
+              onDelete()
+            }}
+            sx={{margin: '0rem'}}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </>
+      }
+      className="transition shadow-sm border bg-base-100 rounded hover:shadow-lg"
+      sx={{
+        // this makes space for buttons
+        padding:'0.5rem 4.5rem 0.5rem 1rem',
+        margin: '0.5rem 0rem'
+      }}
+    >
+      <ListItemAvatar>
+        <Avatar
+          alt={item.label ?? ''}
+          src={logo ?? undefined}
+          sx={{
+            width: '4rem',
+            height: '4rem',
+            fontSize: '1.5rem',
+            marginRight: '1rem',
+            '& img': {
+              height:'auto'
+            }
+          }}
+          variant="square"
+        >
+          {item.label.slice(0,3)}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText
+        primary={item.label}
+        secondary={
+          <>
+            <span>{item.domain}</span>
+            <br/>
+            <span className="flex gap-2">
+              {item.active ?
+                <span className="text-success">Update every {item.scrape_interval_minutes ?? 0} minutes.</span>
+                :
+                <span className="text-warning">Not active.</span>
+              }
+              {item.active ?
+                <span>Last update: {item.scraped_at ? new Date(item.scraped_at).toLocaleString() : 'never'}</span>
+                : null
+              }
+              {item.last_err_msg ?
+                <span className='text-error'>Last error: {item.last_err_msg ?? 'no errors'}</span>
+                : null
+              }
+            </span>
+          </>
+        }
+      />
+
+    </ListItem>
+  )
+}