combine model + hasPermission

Author: citizen-dror

src/components/organisms/RiskHotspotModel.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useStore } from '../../stores/storeConfig';
 import { observer } from 'mobx-react';
 import { Loader } from '../common';
+import ModelTabs from '../model/ModelTabs';
 
 const EnvelopeIcon = ({ color = 'white', size = 20 }: { color?: string; size?: number }) => (
 	<svg
@@ -28,17 +29,15 @@ const EnvelopeIcon = ({ color = 'white', size = 20 }: { color?: string; size?: n
 const RiskHotspotModel = observer(() => {
 	const { t } = useTranslation();
 	const { userStore } = useStore();
-
 	if (userStore.isLoading) {
 		return <Loader />;
 	}
-
 	const hasPermission = userStore.isAuthenticated && userStore.hasEditPermission;
 
 	if (hasPermission) {
 		return (
 			<div>
-				<h1>{t('RiskModel')}</h1>
+				<ModelTabs/>
 			</div>
 		);
 	}

src/components/templates/Header/Header.tsx

@@ -75,13 +75,16 @@ const Header: React.FC<IProps> = observer(({ title }) => {
 									<Button
 										variant='outline-light'
 										size='sm'
-										className='d-flex align-items-center px-3'
+										className='d-flex align-items-center px-3 gap-2'
 										onClick={onLoginHandler}
 										style={{ borderRadius: '20px', fontWeight: 500 }}
 									>
 										{loginText}
 										{isAuthenticated && user?.oauth_provider_user_picture_url ? (
-											<img src={user?.oauth_provider_user_picture_url || ''} alt='user' />
+											<img src={user?.oauth_provider_user_picture_url || ''} 
+											alt='user' 
+											style={{ width: 18, height: 18, borderRadius: '5%' }}
+											/>
 										) : (
 											<UserIcon />
 										)}

src/components/templates/ModelTemplate.tsx

@@ -12,7 +12,8 @@ import WithSidebarTemplate from './WithSidebarTemplate';
 import { setCurrentPage, setInitPage } from '../../stores/ui/appUiSlice';
 import { setStoreByQuery } from '../../stores/ui/appUiThunks';
 import { RootState, AppDispatch } from '../../stores/store';
-import ModelTabs from '../model/ModelTabs';
+import { FeatureFlags, isFeatureEnabled } from '../../utils/featureFlags';
+import RiskHotspotModel from '../organisms/RiskHotspotModel';
 
 interface IProps { }
 const ModelTemplate: React.FC<IProps> = observer(() => {
@@ -50,7 +51,7 @@ const ModelTemplate: React.FC<IProps> = observer(() => {
           <ButtonShowFilterModal />
         </div>
         {showFilterModal && memoConfigModal}
-        <ModelTabs />
+        {isFeatureEnabled(FeatureFlags.RISK_MODEL) && (<RiskHotspotModel />)}        
       </div>
     </WithSidebarTemplate>
   );

src/components/templates/TabsTemplate.tsx

@@ -8,7 +8,6 @@ import { useStore } from '../../stores/storeConfig';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '../../stores/store';
 import { setCurrentTab } from '../../stores';
-import { FeatureFlags, isFeatureEnabled } from '../../utils/featureFlags';
 
 // import MapPage from '../../pages/MapPage';
 interface IProps {
@@ -20,7 +19,7 @@ const GroupByTablesPanel = lazy(() => import('../groupTable/GroupByTablesPanel')
 const MapAccidents = lazy(() => import('../map/AccidentsMap'));
 const AccidentsTable = lazy(() => import('../detailsTable/AccidentsTable'));
 const MyImageGallery = lazy(() => import('../organisms/MyImageGallery'));
-const RiskHotspotModel = lazy(() => import('../organisms/RiskHotspotModel'));
+//const RiskHotspotModel = lazy(() => import('../organisms/RiskHotspotModel'));
 
 const styles = {
 	tab: { marginTop: '0.5rem' },
@@ -87,7 +86,7 @@ export const TabsTemplate: FunctionComponent<IProps> = observer(({ type }) => {
 					</Suspense>
 				</ErrorBoundary>
 			</Tab>
-			{isFeatureEnabled(FeatureFlags.RISK_MODEL) && (
+			{/* {isFeatureEnabled(FeatureFlags.RISK_MODEL) && (
 				<Tab style={styles.tab} eventKey='riskModel' title={t('RiskModel')}>
 					<ErrorBoundary>
 						<Suspense fallback={<Loader />}>
@@ -97,7 +96,7 @@ export const TabsTemplate: FunctionComponent<IProps> = observer(({ type }) => {
 						</Suspense>
 					</ErrorBoundary>
 				</Tab>
-			)}
+			)} */}
 		</Tabs>
 	);
 });