Add a "+" sign after version number and total size if there are more than 20 versions (#3569)

Author: nicolus

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx

@@ -114,6 +114,8 @@ const ObjectDetailPanel = ({
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const [previewOpen, setPreviewOpen] = useState<boolean>(false);
   const [totalVersionsSize, setTotalVersionsSize] = useState<number>(0);
+  const [moreVersionsThanLimit, setMoreVersionsThanLimit] =
+    useState<boolean>(false);
   const [longFileOpen, setLongFileOpen] = useState<boolean>(false);
   const [metaData, setMetaData] = useState<any | null>(null);
   const [loadMetadata, setLoadingMetadata] = useState<boolean>(false);
@@ -154,10 +156,14 @@ const ObjectDetailPanel = ({
         .listObjects(bucketName, {
           prefix: internalPaths,
           with_versions: distributedSetup,
+          limit: 21,
         })
         .then((res) => {
           const result: BucketObject[] = res.data.objects || [];
           if (distributedSetup) {
+            setMoreVersionsThanLimit(result.length > 20);
+            result.splice(20);
+
             setAllInfoElements(result);
             setVersions(result);
 
@@ -573,8 +579,11 @@ const ObjectDetailPanel = ({
               <Box className={"detailContainer"}>
                 <strong>Versions:</strong>
                 <br />
-                {versions.length} version{versions.length !== 1 ? "s" : ""},{" "}
+                {versions.length}
+                {moreVersionsThanLimit ? "+" : ""} version
+                {versions.length !== 1 ? "s" : ""},{" "}
                 {niceBytesInt(totalVersionsSize)}
+                {moreVersionsThanLimit ? "+" : ""}
               </Box>
             )}
           {selectedVersion === "" && (

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx

@@ -94,6 +94,8 @@ const VersionsNavigator = ({
   const [actualInfo, setActualInfo] = useState<BucketObject | null>(null);
   const [objectToShare, setObjectToShare] = useState<BucketObject | null>(null);
   const [versions, setVersions] = useState<BucketObject[]>([]);
+  const [moreVersionsThanLimit, setMoreVersionsThanLimit] =
+    useState<boolean>(false);
   const [restoreVersionOpen, setRestoreVersionOpen] = useState<boolean>(false);
   const [restoreVersion, setRestoreVersion] = useState<BucketObject | null>(
     null,
@@ -124,10 +126,14 @@ const VersionsNavigator = ({
         .listObjects(bucketName, {
           prefix: internalPaths,
           with_versions: distributedSetup,
+          limit: 21,
         })
         .then((res) => {
           const result = get(res.data, "objects", []);
 
+          setMoreVersionsThanLimit(result.length > 20);
+          result.splice(20);
+
           // Filter the results prefixes as API can return more files than expected.
           const filteredPrefixes = result.filter(
             (item: BucketObject) => item.name === internalPaths,
@@ -423,12 +429,16 @@ const VersionsNavigator = ({
                   <Fragment>
                     <span className={"detailsSpacer"}>
                       <strong>
-                        {versions.length} Version
+                        {versions.length}
+                        {moreVersionsThanLimit ? "+" : ""} Version
                         {versions.length === 1 ? "" : "s"}&nbsp;&nbsp;&nbsp;
                       </strong>
                     </span>
                     <span className={"detailsSpacer"}>
-                      <strong>{niceBytesInt(totalSpace)}</strong>
+                      <strong>
+                        {niceBytesInt(totalSpace)}
+                        {moreVersionsThanLimit ? "+" : ""}
+                      </strong>
                     </span>
                   </Fragment>
                 }

web-app/src/screens/Console/Menu/MenuWrapper.tsx

@@ -59,7 +59,9 @@ const MenuWrapper = () => {
           <MenuItem
             name={"Documentation"}
             icon={<DocumentationIcon />}
-            path={"https://docs.min.io/community/minio-object-store/index.html?ref=con"}
+            path={
+              "https://docs.min.io/community/minio-object-store/index.html?ref=con"
+            }
           />
           <MenuItem
             name={"License"}

web-app/src/screens/LoginPage/Login.tsx

@@ -131,7 +131,8 @@ const Login = () => {
       );
   }
 
-  let docsURL = "https://docs.min.io/community/minio-object-store/index.html?ref=con";
+  let docsURL =
+    "https://docs.min.io/community/minio-object-store/index.html?ref=con";
 
   useEffect(() => {
     dispatch(setHelpName("login"));