New: Upstream Updates

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/RootFolder/RootFolderRow.css

@@ -1,7 +1,16 @@
 .link {
   composes: link from '~Components/Link/Link.css';
+}
 
-  display: block;
+.unavailablePath {
+  display: flex;
+  align-items: center;
+}
+
+.unavailableLabel {
+  composes: label from '~Components/Label.css';
+
+  margin-left: 10px;
 }
 
 .freeSpace,

frontend/src/RootFolder/RootFolderRow.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import formatBytes from 'Utilities/Number/formatBytes';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
+import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import TableRow from 'Components/Table/TableRow';
@@ -12,30 +13,45 @@ function RootFolderRow(props) {
   const {
     id,
     path,
+    accessible,
     freeSpace,
     unmappedFolders,
     onDeletePress
   } = props;
 
-  const unmappedFoldersCount = unmappedFolders.length || '-';
+  const isUnavailable = !accessible;
 
   return (
     <TableRow>
       <TableRowCell>
-        <Link
-          className={styles.link}
-          to={`/add/import/${id}`}
-        >
-          {path}
-        </Link>
+        {
+          isUnavailable ?
+            <div className={styles.unavailablePath}>
+              {path}
+
+              <Label
+                className={styles.unavailableLabel}
+                kind={kinds.DANGER}
+              >
+                Unavailable
+              </Label>
+            </div> :
+
+            <Link
+              className={styles.link}
+              to={`/add/import/${id}`}
+            >
+              {path}
+            </Link>
+        }
       </TableRowCell>
 
       <TableRowCell className={styles.freeSpace}>
-        {formatBytes(freeSpace) || '-'}
+        {(isUnavailable || isNaN(freeSpace)) ? '-' : formatBytes(freeSpace)}
       </TableRowCell>
 
       <TableRowCell className={styles.unmappedFolders}>
-        {unmappedFoldersCount}
+        {isUnavailable ? '-' : unmappedFolders.length}
       </TableRowCell>
 
       <TableRowCell className={styles.actions}>
@@ -52,13 +68,13 @@ function RootFolderRow(props) {
 RootFolderRow.propTypes = {
   id: PropTypes.number.isRequired,
   path: PropTypes.string.isRequired,
-  freeSpace: PropTypes.number.isRequired,
+  accessible: PropTypes.bool.isRequired,
+  freeSpace: PropTypes.number,
   unmappedFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
   onDeletePress: PropTypes.func.isRequired
 };
 
 RootFolderRow.defaultProps = {
-  freeSpace: 0,
   unmappedFolders: []
 };