app-top-bar.jsx

/**
 * Copyright (c) 2021, RTE (http://www.rte-france.com)
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import { useEffect, useState } from 'react';
import {
    fetchAppsMetadata,
    LIGHT_THEME,
    logout,
    TopBar,
    PARAM_DEVELOPER_MODE,
    PARAM_LANGUAGE,
    PARAM_THEME,
} from '@gridsuite/commons-ui';
import GridStudyLogoLight from '../images/GridStudy_logo_light.svg?react';
import GridStudyLogoDark from '../images/GridStudy_logo_dark.svg?react';
import { Box } from '@mui/material';
import { PARAM_USE_NAME } from '../utils/config-params';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import AppPackage from '../../package.json';
import { getServersInfos } from '../services/study';
import { fetchVersion } from '../services/utils';
import { useParameterState } from './dialogs/parameters/use-parameters-state';
import { WorkspaceToolbar } from './workspace/core/workspace-toolbar';

const styles = {
    boxContent: (theme) => ({
        display: 'flex',
        overflow: 'hidden',
        alignItems: 'center',
        width: '100%',
        marginLeft: theme.spacing(1),
    }),
};

const AppTopBar = ({ userProfile, userManager }) => {
    const dispatch = useDispatch();
    const theme = useSelector((state) => state[PARAM_THEME]);
    const studyUuid = useSelector((state) => state.studyUuid);
    const currentRootNetworkUuid = useSelector((state) => state.currentRootNetworkUuid);

    const [appsAndUrls, setAppsAndUrls] = useState([]);

    const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE);
    const [useNameLocal, handleChangeUseName] = useParameterState(PARAM_USE_NAME);
    const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
    const [isDeveloperMode, handleChangeDeveloperMode] = useParameterState(PARAM_DEVELOPER_MODE);

    useEffect(() => {
        if (userProfile !== null) {
            fetchAppsMetadata().then((res) => {
                setAppsAndUrls(res);
            });
        }
    }, [userProfile]);

    return (
        <TopBar
            appName="Study"
            appColor="#0CA789"
            appLogo={theme === LIGHT_THEME ? <GridStudyLogoLight /> : <GridStudyLogoDark />}
            onLogoutClick={() => logout(dispatch, userManager.instance)}
            userProfile={userProfile}
            appsAndUrls={appsAndUrls}
            onThemeClick={handleChangeTheme}
            appVersion={AppPackage.version}
            appLicense={AppPackage.license}
            globalVersionPromise={() => fetchVersion().then((res) => res?.deployVersion)}
            additionalModulesPromise={getServersInfos}
            theme={themeLocal}
            onDeveloperModeClick={handleChangeDeveloperMode}
            developerMode={isDeveloperMode}
            onEquipmentLabellingClick={handleChangeUseName}
            equipmentLabelling={useNameLocal}
            onLanguageClick={handleChangeLanguage}
            language={languageLocal}
            dense
        >
            {userProfile && studyUuid && currentRootNetworkUuid && (
                <Box sx={styles.boxContent}>
                    <Box sx={{ display: 'flex', alignItems: 'center', marginLeft: 1.5 }}>
                        <WorkspaceToolbar />
                    </Box>
                </Box>
            )}
        </TopBar>
    );
};

AppTopBar.propTypes = {
    userProfile: PropTypes.object,
    userManager: PropTypes.object.isRequired,
};

export default AppTopBar;