feat: Worlds Storage component (#2928)

* fix: Add classnames dep

* fix: (WIP) Add worlds storage component

* fix: Format

* fix: Add translations and cast from BigInt to Number

* fix: Add component tests

* fix: Only show 2 decimals

* feat: use numbers instead of strings

* fix: Import

* fix: Use progress bar from decentraland ui

Author: fzavalia

package-lock.json

@@ -27,6 +27,7 @@
     "apollo-link-http": "^1.5.17",
     "blob-to-buffer": "^1.2.9",
     "cids": "^0.7.2",
+    "classnames": "^2.3.2",
     "connected-react-router": "^6.9.2",
     "date-fns": "^2.28.0",
     "dcl-catalyst-client": "^21.5.5",

package.json

@@ -24,6 +24,7 @@ import LoggedInDetailPage from 'components/LoggedInDetailPage'
 import { NavigationTab } from 'components/Navigation/Navigation.types'
 import { Props, SortBy } from './WorldListPage.types'
 import NameTabs from './NameTabs'
+import WorldsStorage from './WorldsStorage'
 import './WorldListPage.css'
 
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
@@ -240,8 +241,19 @@ const WorldListPage: React.FC<Props> = props => {
       isLoading={isLoading}
       isPageFullscreen={true}
     >
-      <h1>Worlds</h1>
-      <NameTabs />
+      {/** The following elements are just for show until the feature is complete, disregard the layout, just preview the components */}
+      <Container>
+        <h1>Worlds</h1>
+        <NameTabs />
+        <div
+          style={{
+            marginBottom: '1rem'
+          }}
+        >
+          <WorldsStorage maxBytes={100000000} currentBytes={75000000} />
+        </div>
+      </Container>
+      {/** Old ens list which will be removed or replaced with the new worlds for ens owners feature */}
       {ensList.length > 0 ? renderEnsList() : renderEmptyPage()}
     </LoggedInDetailPage>
   )

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.tsx

@@ -0,0 +1,30 @@
+.worldsStorage {
+  background-color: var(--dark-two);
+  border-radius: 10px;
+  padding: 22px;
+}
+
+.spaceContainer {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.currentMbs {
+  font-size: 1.5rem;
+}
+
+.bar {
+  margin-bottom: 1rem !important;
+  background-color: #a09ba8 !important;
+}
+
+.bar:global(.ui.progress .bar) {
+  background-color: #ff2d55;
+}
+
+.viewDetails {
+  text-align: right;
+  cursor: pointer;
+  text-decoration: underline;
+}

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldsStorage/WorldsStorage.module.css

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+import WorldsStorage, { CURRENT_MBS_TEST_ID, PROGRESS_TEST_ID } from './WorldsStorage'
+
+describe('when rendering the worlds storage component', () => {
+  describe('when the provided current bytes is 50550000 and the max bytes is 100000000', () => {
+    beforeEach(() => {
+      render(<WorldsStorage currentBytes={50550000} maxBytes={100000000} />)
+    })
+
+    it('should render 50.55/100.00mb', () => {
+      expect(screen.getByTestId(CURRENT_MBS_TEST_ID).textContent).toEqual('50.55 / 100.00 mb')
+    })
+
+    it('should render the storage front bar with 50%', () => {
+      expect(screen.getByTestId(PROGRESS_TEST_ID).children[0].getAttribute('style')).toEqual('width: 50%;')
+    })
+  })
+})

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldsStorage/WorldsStorage.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Progress } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Props } from './WorldsStorage.types'
+import styles from './WorldsStorage.module.css'
+
+export const CURRENT_MBS_TEST_ID = 'worlds-storage-current-mbs'
+export const PROGRESS_TEST_ID = 'worlds-storage-bar-front'
+
+const WorldsStorage = ({ maxBytes, currentBytes }: Props) => {
+  const maxMbs = maxBytes / 1000000
+  const currentMbs = currentBytes / 1000000
+  const usedPercentage = (currentMbs * 100) / maxMbs
+
+  return (
+    <div className={styles.worldsStorage}>
+      <div className={styles.spaceContainer}>
+        <span>{t('worlds_list_page.worlds_storage.space_used')}</span>
+        <div data-testid={CURRENT_MBS_TEST_ID}>
+          <span className={styles.currentMbs}>{currentMbs.toFixed(2)}</span> / {maxMbs.toFixed(2)} mb
+        </div>
+      </div>
+      <Progress data-testid={PROGRESS_TEST_ID} percent={Math.trunc(usedPercentage)} className={styles.bar} size="small" />
+      <div className={styles.viewDetails}>{t('worlds_list_page.worlds_storage.view_details')}</div>
+    </div>
+  )
+}
+
+export default React.memo(WorldsStorage)

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldsStorage/WorldsStorage.tsx

@@ -0,0 +1,4 @@
+export type Props = {
+  maxBytes: number
+  currentBytes: number
+}

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldsStorage/WorldsStorage.types.ts

@@ -0,0 +1,2 @@
+import WorldStorage from './WorldsStorage'
+export default WorldStorage

src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldsStorage/index.ts

@@ -611,6 +611,10 @@
     "name_tabs": {
       "dcl_names": "Decentraland names",
       "ens_names": "ENS names"
+    },
+    "worlds_storage": {
+      "space_used": "Space used",
+      "view_details": "view details"
     }
   },
   "error_page": {

src/modules/translation/languages/en.json

@@ -613,6 +613,10 @@
     "name_tabs": {
       "dcl_names": "Nombres de Decentraland",
       "ens_names": "Nombre de ENS"
+    },
+    "worlds_storage": {
+      "space_used": "Espacio utilizado",
+      "view_details": "ver detalles"
     }
   },
   "error_page": {