refactor(Storage): make EntitiesCount a component

Author: artemmufazalov

Diff for: src/components/EntitiesCount/EntitiesCount.tsx

@@ -0,0 +1,34 @@
+import {Label} from '@gravity-ui/uikit';
+import i18n from './i18n';
+
+interface EntitiesCountProps {
+    current: number | string;
+    total?: number | string;
+    label?: string;
+    loading?: boolean;
+    className?: string;
+}
+
+export const EntitiesCount = ({total, current, label, loading, className}: EntitiesCountProps) => {
+    let content = '';
+
+    if (label) {
+        content += `${label}: `;
+    }
+
+    if (loading) {
+        content += '...';
+    } else {
+        content += `${current}`;
+
+        if (total && Number(total) !== Number(current)) {
+            content += ` ${i18n('of')} ${total}`;
+        }
+    }
+
+    return (
+        <Label theme="info" size="m" className={className}>
+            {content}
+        </Label>
+    );
+};

Diff for: src/components/EntitiesCount/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "of": "of"
+}

Diff for: src/components/EntitiesCount/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-entities-count';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

Diff for: src/components/EntitiesCount/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "of": "из"
+}

Diff for: src/components/EntitiesCount/index.ts

@@ -0,0 +1 @@
+export * from './EntitiesCount';

Diff for: src/containers/Storage/Storage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {RadioButton, Label} from '@gravity-ui/uikit';
+import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
@@ -12,6 +12,7 @@ import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
+import {EntitiesCount} from '../../components/EntitiesCount';
 
 import {
     getStorageInfo,
@@ -230,22 +231,17 @@ class Storage extends React.Component {
         const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
             this.props;
 
-        let label = `${storageType === StorageTypes.groups ? 'Groups' : 'Nodes'}: `;
+        const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
         const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
 
-        if (loading && !wasLoaded) {
-            label += '...';
-            return label;
-        }
-
-        // count.total can be missing in old versions
-        if (flatListStorageEntities.length === Number(count.total) || !count.total) {
-            label += flatListStorageEntities.length;
-        } else {
-            label += `${flatListStorageEntities.length} of ${count.total}`;
-        }
-
-        return label;
+        return (
+            <EntitiesCount
+                label={entityName}
+                loading={loading && !wasLoaded}
+                total={count.total}
+                current={flatListStorageEntities.length}
+            />
+        );
     }
 
     renderControls() {
@@ -307,10 +303,7 @@ class Storage extends React.Component {
                         disabled={usageFilterOptions.length === 0}
                     />
                 )}
-
-                <Label theme="info" size="m">
-                    {this.renderEntitiesCount()}
-                </Label>
+                {this.renderEntitiesCount()}
             </div>
         );
     }