Show unreachable, enabled peers

frontend/pages/index.tsx

@@ -41,7 +41,7 @@ import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import useDebounce from 'src/hooks/useDebounce'
 import EntryList from 'src/marketplace/EntryList'
 import { EntryKind, EntryKindKeys } from 'types/types'
-import { isReachable } from 'utils/peerUtils'
+import { isEnabled, isReachable } from 'utils/peerUtils'
 
 interface KeyAndLabel {
   key: string
@@ -196,10 +196,10 @@ export default function Marketplace() {
     [roleOptions],
   )
 
-  const reachablePeerList = useMemo(() => {
+  const unreachablePeerList: string[] = useMemo(() => {
     if (!peers) return []
     return Array.from(peers.entries())
-      .filter(([, value]) => isReachable(value))
+      .filter(([, value]) => isEnabled(value) && !isReachable(value))
       .map(([key]) => key)
   }, [peers])
 
@@ -395,12 +395,13 @@ export default function Marketplace() {
                     />
                   </Box>
                 )}
-                {federationEnabled && reachablePeerList && reachablePeerList.length > 0 && (
+                {federationEnabled && peers && Array.from(peers.keys()).length > 0 && (
                   <Box>
                     <ChipSelector
                       label='External Repositories'
                       chipTooltipTitle={'Include external repostories'}
-                      options={reachablePeerList}
+                      options={Array.from(peers.keys())}
+                      unreachableOptions={unreachablePeerList}
                       expandThreshold={10}
                       multiple
                       selectedChips={selectedPeers}

frontend/src/common/ChipSelector.tsx

@@ -9,12 +9,14 @@ type PartialChipSelectorProps =
   | {
       multiple: true
       options: string[]
+      unreachableOptions?: string[]
       selectedChips: string[]
       onChange: (value: string[]) => void
     }
   | {
       multiple?: false
       options: string[]
+      unreachableOptions?: string[]
       selectedChips: string
       onChange: (value: string) => void
     }
@@ -34,6 +36,7 @@ type ChipSelectorProps = {
 export default function ChipSelector({
   label,
   options,
+  unreachableOptions,
   onChange,
   selectedChips,
   multiple,
@@ -71,11 +74,14 @@ export default function ChipSelector({
       size={size}
       activeChip={selectedChips.includes(option)}
       handleChange={handleChange}
-      chipTooltipTitle={chipTooltipTitle}
+      chipTooltipTitle={
+        unreachableOptions && !unreachableOptions.includes(option) ? chipTooltipTitle : 'This is unreachable.'
+      }
       ariaLabel={ariaLabel}
       variant={variant}
       icon={icon}
       style={style}
+      disabled={unreachableOptions && unreachableOptions.includes(option)}
     />
   ))
 
@@ -127,6 +133,7 @@ type ChipItemProps = {
   variant?: 'filled' | 'outlined'
   icon?: ReactElement
   style?: CSSProperties
+  disabled?: boolean
 }
 
 function ChipItem({
@@ -139,21 +146,25 @@ function ChipItem({
   variant = 'filled',
   icon = <></>,
   style = {},
+  disabled = false,
 }: ChipItemProps) {
   return (
     <Tooltip title={chipTooltipTitle}>
-      <Chip
-        color={activeChip ? 'secondary' : 'default'}
-        size={size}
-        key={chip}
-        sx={{ mx: 0.5, mb: 1, ...style }}
-        label={chip}
-        data-test={`chipOption-${chip}`}
-        onClick={() => handleChange(chip)}
-        aria-label={ariaLabel}
-        variant={variant}
-        icon={icon}
-      />
+      <span>
+        <Chip
+          color={activeChip ? 'secondary' : 'default'}
+          size={size}
+          key={chip}
+          sx={{ mx: 0.5, mb: 1, ...style }}
+          label={chip}
+          data-test={`chipOption-${chip}`}
+          onClick={() => handleChange(chip)}
+          aria-label={ariaLabel}
+          variant={variant}
+          icon={icon}
+          disabled={disabled}
+        />
+      </span>
     </Tooltip>
   )
 }

frontend/utils/peerUtils.ts

@@ -26,12 +26,21 @@ export function getEntryUrl(peer: RemoteFederationConfig, entry: EntrySearchResu
   }
 }
 
+/**
+ *
+ * @param peer to check
+ * @returns true if enabled/readOnly
+ */
+export function isEnabled(peer: PeerConfigStatus): boolean {
+  return peer.config.state !== 'disabled'
+}
+
 /**
  * Given a peer's configuration status, is it reachable?
  *
  * @param peer to check
- * @returns true if enabled/readOnly and successfully pinged
+ * @returns true if successfully pinged
  */
 export function isReachable(peer: PeerConfigStatus): boolean {
-  return peer.config.state !== 'disabled' && !peer.status.error && peer.status.ping === 'pong'
+  return !peer.status.error && peer.status.ping === 'pong'
 }