@equinor/fusion-react-power-bi/dist/ReportInfo/PowerBIReportInfo.js

React component for displaying an person information

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { useApiClients } from '@equinor/fusion';
import { useSelector } from '@equinor/fusion/lib/epic';
// TODO add from new components
// import { MarkdownViewer, PersonCard } from '@equinor/fusion-components';
import { createStore } from './store/store';
import { PowerBIInfoStatus } from './PowerBIReportInfoStatus';
import { PowerBIInfoUserIdentity } from './PowerBIUserIdentity';
import { PowerBIInfoRequirements } from './PowerBIRequirements';
import { makeStyles, createStyles } from '@equinor/fusion-react-styles';
export const useStyles = makeStyles(createStyles({
    root: {
        display: 'flex',
        justifyContent: 'center',
        height: '100%',
        width: '100%',
    },
    rootContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        flex: '0 0 100%',
        minWidth: 'calc(var(--grid-unit) * 65px)',
        maxWidth: 'calc(var(--grid-unit) * 100px)',
    },
    header: {
        color: 'var(--color-orange)',
        marginBottom: 'calc(var(--grid-unit) * 5px)',
    },
    restrictedAccessContainer: {
        boxSizing: 'border-box',
        padding: 'calc(var(--grid-unit) * 3px)',
        width: '100%',
        borderRadius: 4,
        backgroundColor: 'var(--color-white)',
        boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 3px 3px rgba(0, 0, 0, 0.14)',
    },
    reportInfoContainer: {
        display: 'grid',
        gridTemplateColumns: '3fr 1fr',
        gridGap: 'calc(var(--grid-unit) * 6px)',
        '& h5': {
            marginBottom: 'calc(var(--grid-unit) * 2px)',
        },
    },
}), { name: 'fusion-power-bi_user_identity' });
export const PowerBIReportInfo = ({ id, header = 'Restricted Access', subHeader = 'It looks like you do not have access to this report', }) => {
    const clients = useApiClients();
    const store = useMemo(() => {
        return createStore(id, { clients });
    }, [id, clients]);
    const initialized = useSelector(store, 'initialized');
    const styles = useStyles();
    useEffect(() => {
        return store.initialize();
    }, [store]);
    if (!initialized) {
        return _jsx(PowerBIInfoStatus, { store: store });
    }
    const { report, description, accessDescription } = store.value;
    const personId = report?.ownedBy?.azureUniqueId;
    return (_jsx("div", { className: styles.root, children: _jsxs("div", { className: styles.rootContainer, children: [_jsx("h2", { className: styles.header, children: header }), _jsxs("div", { className: styles.restrictedAccessContainer, children: [_jsx("h2", { children: subHeader }), accessDescription && (_jsxs("div", { children: [_jsx("span", { style: { color: 'red' }, children: " missing element MarkdownViewer" }), accessDescription] })), _jsxs("div", { className: styles.reportInfoContainer, children: [description && (_jsxs("div", { children: [_jsx("h5", { children: "Report description" }), _jsx("span", { style: { color: 'red' }, children: " missing element MarkdownViewer" }), description] })), personId && (_jsxs("div", { children: [_jsx("h5", { children: "Report owner" }), _jsx("span", { style: { color: 'red' }, children: " missing element PersonCard" })] }))] })] }), _jsx(PowerBIInfoUserIdentity, {}), _jsx(PowerBIInfoRequirements, { store: store })] }) }));
};
export default PowerBIReportInfo;
//# sourceMappingURL=PowerBIReportInfo.js.map