Skip to content

Commit a71c6b1

Browse files
MnickiiMnickii
authored
feat: update collections design, fix permissions alignment (#3638)
* remove v8 IGroup * fix query version, edit collections and cleanup * fix history item * fix history errors * fix text when no image * update collections design * fix permissions alignment
1 parent 3a46567 commit a71c6b1

25 files changed

+764
-1752
lines changed

‎src/app/views/classnames.ts‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/app/views/common/lazy-loader/component-registry/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import LazyStatusMessages from '../../../app-sections/StatusMessages';
66
import LazyResponseHeaders from '../../../query-response/headers/ResponseHeaders';
77
import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit';
88
import LazyCopyButton from '../../copy-button/CopyButtonV9';
9-
import LazyAuth from '../../../query-runner/request/auth/AuthV9';
9+
import LazyAuth from '../../../query-runner/request/auth/Auth';
1010
import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeaders';
1111
import LazyHistory from '../../../sidebar/history/History';
1212
import LazyResourceExplorer from '../../../sidebar/resource-explorer/ResourceExplorer';

‎src/app/views/common/lazy-loader/component-registry/popups.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const popups = new Map<string, any>([
44
['share-query', lazy(() => import('../../../query-runner/query-input/share-query/ShareQuery'))],
55
['theme-chooser', lazy(() => import('../../../main-header/settings/ThemeChooser'))],
66
['preview-collection', lazy(() => import('../../../sidebar/resource-explorer/collection/APICollection'))],
7-
['full-permissions', lazy(() => import('../../../query-runner/request/permissions/Permissions.FullV9'))],
7+
['full-permissions', lazy(() => import('../../../query-runner/request/permissions/Permissions.Full'))],
88
['collection-permissions', lazy(() => import('../../../sidebar/resource-explorer/collection/CollectionPermissions'))],
99
['edit-collection-panel', lazy(() => import('../../../sidebar/resource-explorer/collection/EditCollectionPanel'))],
1010
['edit-scope-panel', lazy(() => import('../../../sidebar/resource-explorer/collection/EditScopePanel'))]

‎src/app/views/query-runner/request/auth/Auth.styles.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/app/views/query-runner/request/auth/Auth.tsx‎

Lines changed: 111 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,145 @@
11
import { AuthenticationResult } from '@azure/msal-browser';
2-
import { IconButton, IIconProps, Label, MessageBar, MessageBarType, styled } from '@fluentui/react';
2+
import {
3+
Button,
4+
makeStyles,
5+
MessageBar,
6+
Text,
7+
tokens,
8+
Tooltip
9+
} from '@fluentui/react-components';
310
import { useEffect, useState } from 'react';
411
import { authenticationWrapper } from '../../../../../modules/authentication';
512
import { useAppSelector } from '../../../../../store';
613

14+
import { BracesRegular } from '@fluentui/react-icons';
715
import { componentNames, telemetry } from '../../../../../telemetry';
816
import { ACCOUNT_TYPE } from '../../../../services/graph-constants';
917
import { translateMessage } from '../../../../utils/translate-messages';
10-
import { classNames } from '../../../classnames';
1118
import { trackedGenericCopy } from '../../../common/copy';
1219
import { CopyButtonV9 } from '../../../common/lazy-loader/component-registry';
13-
import { convertVhToPx } from '../../../common/dimensions/dimensions-adjustment';
14-
import { authStyles } from './Auth.styles';
1520

16-
export function Auth(props: any) {
17-
const { auth: { authToken }, profile, dimensions: { request: { height } } } = useAppSelector((state) => state);
18-
const {user} = profile;
19-
const requestHeight = convertVhToPx(height, 60);
21+
const useStyles = makeStyles({
22+
auth: {
23+
padding: '5px',
24+
overflowY: 'auto',
25+
display: 'flex',
26+
flexDirection: 'column',
27+
width: '100%'
28+
},
29+
accessTokenContainer: {
30+
width: '100%',
31+
display: 'flex',
32+
flexDirection: 'row',
33+
alignItems: 'center',
34+
paddingBottom: '10px',
35+
gap: tokens.spacingHorizontalS
36+
},
37+
accessToken: {
38+
display: 'block',
39+
wordBreak: 'break-word',
40+
overflowWrap: 'break-word',
41+
maxWidth: '100%',
42+
whiteSpace: 'pre-wrap',
43+
textOverflow: 'ellipsis'
44+
},
45+
emptyStateLabel: {
46+
display: 'flex',
47+
width: '100%',
48+
minHeight: '100%',
49+
justifyContent: 'center',
50+
alignItems: 'center'
51+
},
52+
tokenWrapper: {
53+
maxWidth: '100%',
54+
overflow: 'auto',
55+
wordBreak: 'break-word',
56+
display: 'flex'
57+
}
58+
});
59+
60+
export function Auth() {
61+
const profile = useAppSelector((state) => state.profile);
62+
const authToken = useAppSelector((state) => state.auth.authToken);
63+
const { user } = profile;
2064
const [accessToken, setAccessToken] = useState<string | null>(null);
2165
const [loading, setLoading] = useState(false);
2266

67+
const styles = useStyles();
68+
2369
const handleCopy = async () => {
24-
trackedGenericCopy(accessToken || '', componentNames.ACCESS_TOKEN_COPY_BUTTON);
70+
trackedGenericCopy(
71+
accessToken || '',
72+
componentNames.ACCESS_TOKEN_COPY_BUTTON
73+
);
2574
};
2675

2776
useEffect(() => {
2877
setLoading(true);
29-
authenticationWrapper.getToken().then((response: AuthenticationResult) => {
30-
setAccessToken(response.accessToken);
31-
setLoading(false);
32-
}).catch(() => {
33-
setLoading(false);
34-
});
78+
authenticationWrapper
79+
.getToken()
80+
.then((response: AuthenticationResult) => {
81+
setAccessToken(response.accessToken);
82+
setLoading(false);
83+
})
84+
.catch(() => {
85+
setLoading(false);
86+
});
3587
}, [authToken]);
3688

37-
const classes = classNames(props);
38-
39-
const tokenDetailsIcon: IIconProps = {
40-
iconName: 'code'
41-
};
89+
const tokenDetailsDisabled = user?.profileType === ACCOUNT_TYPE.MSA;
4290

4391
if (!authToken.token) {
44-
return <MessageBar messageBarType={MessageBarType.blocked}>
45-
{translateMessage('Sign In to see your access token.')}
46-
</MessageBar>;
92+
return (
93+
<MessageBar intent='error'>
94+
{translateMessage('Sign In to see your access token.')}
95+
</MessageBar>
96+
);
4797
}
4898

49-
const tokenDetailsDisabled = user?.profileType === ACCOUNT_TYPE.MSA;
50-
51-
return (<div className={classes.auth} style={{ height: requestHeight }}>
52-
{!loading ?
53-
<div>
54-
<div className={classes.accessTokenContainer}>
55-
<Label className={classes.accessTokenLabel}>{translateMessage('Access Token')}</Label>
56-
<CopyButtonV9 isIconButton={true} handleOnClick={handleCopy} />
57-
<IconButton iconProps={tokenDetailsIcon}
58-
title={translateMessage(showMessage())}
59-
ariaLabel={translateMessage(showMessage())}
60-
href={`https://jwt.ms#access_token=${accessToken}`}
61-
disabled={tokenDetailsDisabled}
62-
target='_blank'
63-
/>
99+
return (
100+
<div id='styles-auth' className={styles.auth}>
101+
{!loading ? (
102+
<div>
103+
<div className={styles.accessTokenContainer}>
104+
<Text weight='bold'>{translateMessage('Access Token')}</Text>
105+
<CopyButtonV9 isIconButton={true} handleOnClick={handleCopy} />
106+
<Tooltip
107+
content={translateMessage(showMessage())}
108+
relationship='label'
109+
>
110+
<Button
111+
as='a'
112+
href={`https://jwt.ms#access_token=${accessToken}`}
113+
target='_blank'
114+
appearance='subtle'
115+
disabled={tokenDetailsDisabled}
116+
icon={<BracesRegular />}
117+
/>
118+
</Tooltip>
119+
</div>
120+
<div id='access-token' className={styles.tokenWrapper}>
121+
<Text font='monospace' className={styles.accessToken} size={100} tabIndex={0}>
122+
{accessToken}
123+
</Text>
124+
</div>
64125
</div>
65-
<Label className={classes.accessToken} id='access-tokens-tab' tabIndex={0}>{accessToken}</Label>
66-
</div>
67-
:
68-
<Label className={classes.emptyStateLabel}>
69-
{translateMessage('Getting your access token')} ...
70-
</Label>
71-
}
72-
</div>);
126+
) : (
127+
<MessageBar intent='info'>
128+
{translateMessage('Getting your access token')} ...
129+
</MessageBar>
130+
)}
131+
</div>
132+
);
73133

74134
function showMessage(): string {
75135
if (tokenDetailsDisabled) {
76-
return 'This token is not a jwt token and cannot be decoded by jwt.ms'
136+
return 'This token is not a JWT token and cannot be decoded by jwt.ms';
77137
}
78138
return 'Get token details (Powered by jwt.ms)';
79139
}
80140
}
81141

82-
const trackedComponent = telemetry.trackReactComponent(Auth, componentNames.ACCESS_TOKEN_TAB);
83-
// @ts-ignore
84-
export default styled(trackedComponent, authStyles);
142+
export default telemetry.trackReactComponent(
143+
Auth,
144+
componentNames.ACCESS_TOKEN_TAB
145+
);

0 commit comments

Comments
 (0)