Version 1.0.54

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-libs",
-  "version": "1.0.48",
+  "version": "1.0.54",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-libs",
-      "version": "1.0.48",
+      "version": "1.0.54",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-libs",
-  "version": "1.0.48",
+  "version": "1.0.54",
   "main": "dist/index.js",
   "source": "src/index.js",
   "engines": {

src/components/Dot/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './index.module.scss';
+
+const Dot = ({ className }) => <span className={[styles.dot, className].join(' ')} />;
+
+Dot.propTypes = {
+  className: PropTypes.string,
+};
+
+Dot.defaultProps = {
+  className: '',
+};
+
+export default Dot;

src/components/Dot/index.module.scss

@@ -0,0 +1,7 @@
+.dot {
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+}

src/components/Modal/index.js

@@ -24,7 +24,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
-  size: 'md',
+  size: '',
   headerButtons: null,
   children: null,
   footer: null,

src/index.js

@@ -3,6 +3,9 @@ export { default as COLOR_LIST } from './constants/colors';
 export { default as COUNTRY_LIST } from './constants/countryList';
 export { default as SELECT_STYLES } from './constants/selectStyles';
 
+// Utils
+export { numberToCompact } from './utils/formatting';
+
 // Layout
 export { default as Footer } from './layout/Footer';
 export { default as Header } from './layout/Header';
@@ -10,6 +13,7 @@ export { default as PageContainer } from './layout/PageContainer';
 export { default as Sidebar } from './layout/Sidebar';
 
 // General use components
+export { default as Dot } from './components/Dot';
 export { default as Modal } from './components/Modal';
 
 // Specific-task components
@@ -30,6 +34,7 @@ export { default as ConfirmFooter } from './components/ConfirmFooter';
 export { default as ConfirmStopEditingButton } from './components/ConfirmStopEditingButton';
 export { default as CopyToClipboardButton } from './components/CopyToClipboardButton';
 export { default as DetailedNotesTable } from './components/DetailedNotesTable';
+export { default as DeleteModal } from './components/DeleteModal';
 export { default as DeviceBadge } from './components/DeviceBadge';
 export { default as DeviceSearchBar } from './components/DeviceSearchBar';
 export { default as FileToStringButton } from './components/FileToStringButton';

src/layout/Header/index.js

@@ -83,6 +83,9 @@ const Header = ({
             <CDropdownItem to={() => '/myprofile'}>
               <div className="px-3">{t('user.my_profile')}</div>
             </CDropdownItem>
+            <CDropdownItem to={() => '/preferences'}>
+              <div className="px-3">{t('common.preferences')}</div>
+            </CDropdownItem>
             <CDropdownItem onClick={() => logout(authToken, endpoints.owsec)}>
               <strong className="px-3">{t('common.logout')}</strong>
               <CIcon content={cilAccountLogout} />

src/layout/Sidebar/index.js

@@ -1,15 +1,5 @@
 import React from 'react';
-import {
-  CCreateElement,
-  CSidebar,
-  CSidebarBrand,
-  CSidebarNav,
-  CSidebarNavDivider,
-  CSidebarNavTitle,
-  CSidebarMinimizer,
-  CSidebarNavDropdown,
-  CSidebarNavItem,
-} from '@coreui/react';
+import { CSidebar, CSidebarBrand, CSidebarNav } from '@coreui/react';
 import PropTypes from 'prop-types';
 import styles from './index.module.scss';
 
@@ -37,18 +27,7 @@ const Sidebar = ({
         alt="OpenWifi"
       />
     </CSidebarBrand>
-    <CSidebarNav>
-      <CCreateElement
-        items={options}
-        components={{
-          CSidebarNavDivider,
-          CSidebarNavDropdown,
-          CSidebarNavItem,
-          CSidebarNavTitle,
-        }}
-      />
-    </CSidebarNav>
-    <CSidebarMinimizer className="c-d-md-down-none" />
+    <CSidebarNav>{options}</CSidebarNav>
   </CSidebar>
 );
 
@@ -56,7 +35,7 @@ Sidebar.propTypes = {
   showSidebar: PropTypes.string.isRequired,
   setShowSidebar: PropTypes.func.isRequired,
   logo: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(Object).isRequired,
+  options: PropTypes.node.isRequired,
   redirectTo: PropTypes.string.isRequired,
   logoHeight: PropTypes.string,
   logoWidth: PropTypes.string,

src/pages/UserListPage/Table.js

@@ -73,7 +73,7 @@ const UserListTable = ({
       <CCard className="my-0 py-0">
         <CCardHeader className="dark-header">
           <div style={{ fontWeight: '600' }} className=" text-value-lg float-left">
-            {t('user.users')}
+            {t('user.table_title')}
           </div>
           <div className="d-flex flex-row-reverse">
             <div className="pl-2">

src/utils/formatting.js

@@ -148,3 +148,21 @@ export const testRegex = (value, regexString) => {
   const regex = new RegExp(regexString);
   return regex.test(value);
 };
+
+export const numberToCompact = (num, digits) => {
+  const lookup = [
+    { value: 1, symbol: '' },
+    { value: 1e3, symbol: 'k' },
+    { value: 1e6, symbol: 'M' },
+    { value: 1e9, symbol: 'G' },
+    { value: 1e12, symbol: 'T' },
+    { value: 1e15, symbol: 'P' },
+    { value: 1e18, symbol: 'E' },
+  ];
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  const item = lookup
+    .slice()
+    .reverse()
+    .find((i) => num >= i.value);
+  return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0';
+};