Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: modify permissions tab UI #790

Merged
merged 6 commits into from
Jan 12, 2021
Merged

Fix: modify permissions tab UI #790

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f83e587
Remove 'Display String' column
ElinorW Jan 5, 2021
36b03eb
alter permission message
ElinorW Jan 5, 2021
fca519c
change wording used
ElinorW Jan 12, 2021
cc68ca6
alter column sizes
ElinorW Jan 12, 2021
f120d87
check authentication from redux state
ElinorW Jan 12, 2021
f730fd1
Merge branch 'dev' into fix/modify-permissions-ui
ElinorW Jan 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions src/app/views/query-runner/request/permissions/Permission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,21 +190,14 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {

if (!panel) {
columns.push(
{
key: 'consentDisplayName',
name: messages['Display string'],
fieldName: 'consentDisplayName',
isResizable: true,
minWidth: 250,
maxWidth: 300
},
{
key: 'consentDescription',
name: messages.Description,
fieldName: 'consentDescription',
isResizable: true,
minWidth: (tokenPresent) ? 400 : 650,
maxWidth: (tokenPresent) ? 500 : 700
maxWidth: (tokenPresent) ? 600 : 700,
isMultiline: true
}
);
}
Expand Down Expand Up @@ -280,6 +273,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
this.renderItemColumn(item, index, column)}
renderDetailsHeader={this.renderDetailsHeader}
permissionToken={tokenPresent}

/>}
{panel &&
Expand Down
8 changes: 6 additions & 2 deletions src/app/views/query-runner/request/permissions/TabList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,20 @@ interface ITabList {
classes: any;
renderItemColumn: Function;
renderDetailsHeader: Function;
permissionToken: boolean;
}

const TabList = ({ permissions, columns, classes, renderItemColumn, renderDetailsHeader }: ITabList) => {

const TabList = ({ permissions, columns, classes, renderItemColumn, renderDetailsHeader, permissionToken }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the useSelector React Hook may help to reduce passing too many arguments into the TabList component since it has access to the redux state. This can be used to pick up whether the user is logged in or not.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah okay perfect! Thanks for this!

: ITabList) => {
return (
<>
<Label className={classes.permissionLength}>
<FormattedMessage id='Permissions' />&nbsp;({permissions.length})
</Label>
<Label className={classes.permissionText}>
<FormattedMessage id='permissions required to run the query' />
{!permissionToken && <FormattedMessage id='sign in to consent to permissions' />}
{permissionToken && <FormattedMessage id='permissions required to run the query' />}
</Label>
<DetailsList styles={{ root: { minHeight: '300px' } }}
items={permissions}
Expand Down
9 changes: 5 additions & 4 deletions src/messages/GE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@
"Status": "Status",
"Admin consent required": "Admin consent required",
"Consent": "Consent",
"permissions required to run the query": "The following permissions are required to run the query. To consent to the permissions, click Consent.",
"permissions required to run the query": "One of the following permissions is required to run the query. Select a permission and click Consent.",
"tab": " tab",
"View the": " View the",
"viewing a cached set": "You are viewing a cached set of samples because of a network connection failure.",
Expand All @@ -306,7 +306,7 @@
"Snippet not available": "Snippet not available",
"Select different permissions": "To try out different Microsoft Graph API endpoints, choose the permissions, and then click Consent.",
"Search permissions": "Search permissions",
"permissions not found": "We did not find permissions",
"permissions not found": "We did not find permissions. To view a list of all available permissions, click on the Settings gearbox and then click on Select Permissions.",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is gearbox a thing people understand? just never seen it before

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will rename that to settings icon

"selected": "selected",
"Search sample queries": "Search sample queries",
"Search history items": "Search history items",
Expand All @@ -326,5 +326,6 @@
"HTTP request method option": "HTTP request method option",
"Microsoft Graph API Version option": "Microsoft Graph API Version option",
"Query Sample Input": "Query sample input",
"popup blocked, allow pop-up windows in your browser": "popup blocked, allow pop-up windows in your browser"
}
"popup blocked, allow pop-up windows in your browser": "popup blocked, allow pop-up windows in your browser",
"sign in to consent to permissions": "One of the following permissions is required to run the query. Sign in with an account that can consent to the permission you will choose."
}
1 change: 0 additions & 1 deletion src/types/permissions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { IQuery } from './query-runner';

export interface IPermission {
value: string;
consentDisplayName: string;
consentDescription: string;
isAdmin: boolean;
consented: boolean;
Expand Down