feat: arabic localization.

client/src/components/App.js

@@ -28,7 +28,7 @@ const queryConfig = {
 function GlobalFetchQuery({
   children
 }) {
-  window.localStorage.setItem('lang', 'en');
+  window.localStorage.setItem('lang', 'ar-ly');
   return children
 }
 

client/src/components/Dashboard/Dashboard.js

@@ -17,8 +17,6 @@ import DrawersContainer from 'components/DrawersContainer';
  * Dashboard page.
  */
 export default function Dashboard() {
-  const dashboardContentRef = React.createRef();
-
   return (
     <DashboardProvider>
       <Switch>
@@ -31,8 +29,8 @@ export default function Dashboard() {
 
         <Route path="/">
           <DashboardSplitPane>
-            <Sidebar dashboardContentRef={dashboardContentRef} />
-            <DashboardContent ref={dashboardContentRef} />
+            <Sidebar />
+            <DashboardContent />
           </DashboardSplitPane>
         </Route>
       </Switch>

client/src/components/Dashboard/PrivatePages.js

@@ -17,16 +17,16 @@ export default function DashboardPrivatePages() {
   return (
     <PrivatePagesProvider>
       <Switch>
-        {/* <Route path={'/setup'}>
+        <Route path={'/setup'}>
           <EnsureOrganizationIsNotReady>
             <SetupWizardPage />
           </EnsureOrganizationIsNotReady>
-        </Route> */}
+        </Route>
 
         <Route path='/'>
-          {/* <EnsureOrganizationIsReady> */}
+          <EnsureOrganizationIsReady>
             <Dashboard />
-          {/* </EnsureOrganizationIsReady> */}
+          </EnsureOrganizationIsReady>
         </Route>
       </Switch>
     </PrivatePagesProvider>

client/src/components/Dashboard/PrivatePagesProvider.js

@@ -7,10 +7,10 @@ import { useCurrentOrganization } from '../../hooks/query/organization';
  */
 export function PrivatePagesProvider({ children }) {
   // Fetches the current user's organization.
-  // const { isLoading } = useCurrentOrganization();
+  const { isLoading } = useCurrentOrganization();
 
   return (
-    <DashboardLoadingIndicator isLoading={false}>
+    <DashboardLoadingIndicator isLoading={isLoading}>
       {children}
     </DashboardLoadingIndicator>
   )

client/src/components/Preferences/PreferencesPage.js

@@ -16,7 +16,7 @@ import 'style/pages/Preferences/Page.scss';
 export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div className={classNames(
+      <div id={'dashboard'} className={classNames(
         CLASSES.DASHBOARD_CONTENT,
         CLASSES.DASHBOARD_CONTENT_PREFERENCES,
       )}>

client/src/components/Sidebar/SidebarMenu.js

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
-import { Menu, MenuDivider, Button } from '@blueprintjs/core';
+import React from 'react';
+import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
+import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
 import { MenuItemLabel } from 'components';
@@ -11,6 +12,16 @@ import SidebarOverlay from 'components/SidebarOverlay';
 const DEFAULT_ITEM = {
   text: '',
   href: '',
+};
+
+function matchPath(pathname, path, matchExact) {
+  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
+}
+
+function SidebarMenuItemSpace({ space }) {
+  return (
+    <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />
+  )
 }
 
 export default function SidebarMenu() {
@@ -24,64 +35,60 @@ export default function SidebarMenu() {
     return list.map((item, index) => {
       const hasChildren = Array.isArray(item.children);
 
-      const matchPath = (pathname, path) => {
-        return item.matchExact
-          ? pathname === path
-          : pathname.indexOf(path) !== -1;
-      };
-      const isActive = (item.children
-        ? item.children.some((c) => matchPath(location.pathname, c.href))
-        : item.href && matchPath(location.pathname, item.href)) || currentItem ===item;
+      const isActive =
+        (item.children
+          ? item.children.some((c) =>
+              matchPath(location.pathname, c.href, item.matchExact),
+            )
+          : item.href &&
+            matchPath(location.pathname, item.href, item.matchExact)) ||
+        currentItem === item;
 
       const handleItemClick = () => {
         if (item.href) {
           history.push(item.href);
         }
-        setIsOpen(true);
-        setCurrentItem(item);
+        if (item.children && item.children.length > 0) {
+          setIsOpen(true);
+          setCurrentItem(item);
+        } else {
+          setIsOpen(false);
+        }
       };
 
-      const maybeRenderLabel = (item) =>
-        item.newTabHref ? (
-          <Button
-            className="menu-item__add-btn"
-            icon={<Icon icon={'plus'} iconSize={16} />}
-            onClick={(event) => {
-              history.push(item.newTabHref);
-              event.stopPropagation();
-            }}
-          />
-        ) : null;
+      return (
+        <Choose>
+          <Choose.When condition={item.spacer}>
+            <SidebarMenuItemSpace space={item.spacer} />
+          </Choose.When>
 
-      return item.spacer ? (
-        <div
-          class="bp3-menu-spacer"
-          style={{
-            height: `${item.spacer}px`,
-          }}
-        ></div>
-      ) : item.divider ? (
-        <MenuDivider key={index} title={item.title} />
-      ) : item.label ? (
-        <MenuItemLabel key={index} text={item.text} />
-      ) : (
-        <MenuItem
-          key={index}
-          active={isActive}
-          icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-          text={item.text}
-          label={maybeRenderLabel(item)}
-          disabled={item.disabled}
-          dropdownType={item.dropdownType || 'collapse'}
-          caretIconSize={16}
-          onClick={handleItemClick}
-          callapseActive={!!isActive}
-          itemClassName={classNames({
-            'is-active': isActive,
-            'has-icon': !hasChildren && item.icon,
-          })}
-          hasSubmenu={hasChildren}
-        />
+          <Choose.When condition={item.divider}>
+            <MenuDivider key={index} title={item.title} />
+          </Choose.When>
+
+          <Choose.When condition={item.label}>
+            <MenuItemLabel key={index} text={item.text} />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <MenuItem
+              key={index}
+              active={isActive}
+              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+              text={item.text}
+              disabled={item.disabled}
+              dropdownType={item.dropdownType || 'collapse'}
+              caretIconSize={16}
+              onClick={handleItemClick}
+              callapseActive={!!isActive}
+              itemClassName={classNames({
+                'is-active': isActive,
+                'has-icon': !hasChildren && item.icon,
+              })}
+              hasSubmenu={hasChildren}
+            />
+          </Choose.Otherwise>
+        </Choose>
       );
     });
   };
@@ -89,12 +96,11 @@ export default function SidebarMenu() {
 
   const handleSidebarOverlayClose = () => {
     setIsOpen(false);
-  }
+  };
 
   return (
     <div>
       <Menu className="sidebar-menu">{items}</Menu>{' '}
-
       <SidebarOverlay
         isOpen={isOpen}
         label={currentItem?.text || ''}

client/src/components/SidebarOverlay/index.tsx

@@ -70,7 +70,10 @@ export default function SidebarOverlay({
   const [isOpen, setIsOpen] = React.useState(controllerdIsOpen);
 
   React.useEffect(() => {
-    if (controllerdIsOpen && isOpen !== controllerdIsOpen) {
+    if (
+      typeof controllerdIsOpen !== 'undefined' &&
+      isOpen !== controllerdIsOpen
+    ) {
       setIsOpen(controllerdIsOpen);
     }
   }, [controllerdIsOpen, setIsOpen, isOpen]);
@@ -103,7 +106,10 @@ export default function SidebarOverlay({
   return (
     <Overlay
       isOpen={isOpen}
-      portalContainer={document.getElementById('dashboard') || document.body}
+      portalContainer={
+        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
+        document.body
+      }
       onClose={handleOverlayClose}
       onOpening={handleOverlayOpen}
       transitionDuration={100}