Skip to content

Commit 0eb286d

Browse files
RichDom2185RichDom2185
authored
Miscellaneous changes and improvements (#3001)
* Remove unused style classes * Use flexbox for user config panels Also updated the titles of the pages. * Use flexbox for ground control table * Remove now-redudant grid resize logic * Simplify ground control table * Combine actions into one * Simplify column names * Simplify assessment config panel * Make ground control cells more descriptive * Simplify dashboard table * Simplify add user tables Also typed them for better type-safety. * Simplify notification tables Also improved some typing. * Remove hardcoded styles The idea is to try to minimise the need for CSS workarounds as much as possible. Should they be required nonetheless, they will be restored in a subsequent commit. * Fix import order * Avoid BP CSS API for dialogs
1 parent aa6e175 commit 0eb286d

File tree

23 files changed

+258
-395
lines changed

23 files changed

+258
-395
lines changed

‎src/commons/dialogs/ConfirmDialog.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
ButtonProps,
44
Classes,
55
Dialog,
6+
DialogBody,
7+
DialogFooter,
68
DialogProps,
79
IconName,
810
Intent
@@ -54,11 +56,10 @@ export function ConfirmDialog<T>(
5456
icon={props.icon}
5557
{...props.props}
5658
>
57-
<div className={Classes.DIALOG_BODY}>{props.contents}</div>
58-
<div className={Classes.DIALOG_FOOTER}>
59+
<DialogBody>{props.contents}</DialogBody>
60+
<DialogFooter actions={!props.largeButtons && <>{buttons}</>}>
5961
{props.largeButtons && buttons}
60-
{!props.largeButtons && <div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div>}
61-
</div>
62+
</DialogFooter>
6263
</Dialog>
6364
);
6465
}

‎src/commons/editingOverviewCard/EditingOverviewCard.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Card,
44
Classes,
55
Dialog,
6+
DialogBody,
67
Elevation,
78
H3,
89
H4,
@@ -179,7 +180,7 @@ export const EditingOverviewCard: React.FC<EditingOverviewCardProps> = props =>
179180
onClose={toggleOptionsOverlay}
180181
title="Other options"
181182
>
182-
<div className={Classes.DIALOG_BODY}>
183+
<DialogBody>
183184
<H3>Assessment Type</H3>
184185
{assessmentTypeSelect(props.overview.type, saveCategory)}
185186
<H3>Number</H3>
@@ -201,7 +202,7 @@ export const EditingOverviewCard: React.FC<EditingOverviewCardProps> = props =>
201202
? makeEditingOverviewTextarea('fileName')
202203
: createPlaceholder(props.overview.fileName || '')}
203204
</div>
204-
</div>
205+
</DialogBody>
205206
</Dialog>
206207
);
207208

‎src/commons/editingWorkspace/EditingWorkspace.tsx

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import {
2-
ButtonGroup,
32
Classes,
43
Dialog,
4+
DialogBody,
5+
DialogFooter,
56
Intent,
67
NonIdealState,
78
Spinner,
@@ -214,31 +215,33 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
214215
isOpen={showResetTemplateOverlay}
215216
title="Confirmation: Reset editor?"
216217
>
217-
<div className={Classes.DIALOG_BODY}>
218+
<DialogBody>
218219
<Markdown content="Are you sure you want to reset to your last save?" />
219-
</div>
220-
<div className={Classes.DIALOG_FOOTER}>
221-
<ButtonGroup>
222-
<ControlButton
223-
label="Cancel"
224-
onClick={() => setShowResetTemplateOverlay(false)}
225-
options={{ minimal: false }}
226-
/>
227-
<ControlButton
228-
label="Confirm"
229-
onClick={() => {
230-
const assessment = retrieveLocalAssessment()!;
231-
setAssessment(assessment);
232-
setHasUnsavedChanges(false);
233-
setShowResetTemplateOverlay(false);
234-
setOriginalMaxXp(getMaxXp());
235-
handleRefreshLibrary();
236-
resetWorkspaceValues();
237-
}}
238-
options={{ minimal: false, intent: Intent.DANGER }}
239-
/>
240-
</ButtonGroup>
241-
</div>
220+
</DialogBody>
221+
<DialogFooter
222+
actions={
223+
<>
224+
<ControlButton
225+
label="Cancel"
226+
onClick={() => setShowResetTemplateOverlay(false)}
227+
options={{ minimal: false }}
228+
/>
229+
<ControlButton
230+
label="Confirm"
231+
onClick={() => {
232+
const assessment = retrieveLocalAssessment()!;
233+
setAssessment(assessment);
234+
setHasUnsavedChanges(false);
235+
setShowResetTemplateOverlay(false);
236+
setOriginalMaxXp(getMaxXp());
237+
handleRefreshLibrary();
238+
resetWorkspaceValues();
239+
}}
240+
options={{ minimal: false, intent: Intent.DANGER }}
241+
/>
242+
</>
243+
}
244+
/>
242245
</Dialog>
243246
);
244247

‎src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentManageQuestionTab.tsx

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, ButtonGroup, Classes, Dialog, Intent } from '@blueprintjs/core';
1+
import { Button, Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
22
import { IconNames } from '@blueprintjs/icons';
33
import React, { useState } from 'react';
44
import { useNavigate } from 'react-router';
@@ -120,26 +120,28 @@ const ManageQuestionTab: React.FC<ManageQuestionTabProps> = props => {
120120
isOpen={showSaveOverlay}
121121
title="Confirmation: Save unsaved changes?"
122122
>
123-
<div className={Classes.DIALOG_BODY}>
123+
<DialogBody>
124124
<Markdown content="Are you sure you want to save over your unsaved changes?" />
125-
</div>
126-
<div className={Classes.DIALOG_FOOTER}>
127-
<ButtonGroup>
128-
<ControlButton
129-
label="Cancel"
130-
onClick={() => setShowSaveOverlay(false)}
131-
options={{ minimal: false }}
132-
/>
133-
<ControlButton
134-
label="Confirm"
135-
onClick={() => {
136-
modifyAssessment();
137-
setShowSaveOverlay(false);
138-
}}
139-
options={{ minimal: false, intent: Intent.DANGER }}
140-
/>
141-
</ButtonGroup>
142-
</div>
125+
</DialogBody>
126+
<DialogFooter
127+
actions={
128+
<>
129+
<ControlButton
130+
label="Cancel"
131+
onClick={() => setShowSaveOverlay(false)}
132+
options={{ minimal: false }}
133+
/>
134+
<ControlButton
135+
label="Confirm"
136+
onClick={() => {
137+
modifyAssessment();
138+
setShowSaveOverlay(false);
139+
}}
140+
options={{ minimal: false, intent: Intent.DANGER }}
141+
/>
142+
</>
143+
}
144+
/>
143145
</Dialog>
144146
);
145147

‎src/commons/gitHubOverlay/FileExplorerDialog.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
Button,
44
Classes,
55
Dialog,
6+
DialogBody,
7+
DialogFooter,
68
InputGroup,
79
Intent,
810
Tree,
@@ -47,7 +49,7 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
4749
<div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
4850
<h3>Select a File</h3>
4951
</div>
50-
<div className={Classes.DIALOG_BODY}>
52+
<DialogBody>
5153
<Tree
5254
contents={repoFiles}
5355
onNodeClick={handleNodeClick}
@@ -71,13 +73,15 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
7173
/>
7274
</div>
7375
)}
74-
</div>
75-
<div className={Classes.DIALOG_FOOTER}>
76-
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
77-
<Button onClick={handleClose}>Close</Button>
78-
<AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY} text={props.pickerType} />
79-
</div>
80-
</div>
76+
</DialogBody>
77+
<DialogFooter
78+
actions={
79+
<>
80+
<Button onClick={handleClose}>Close</Button>
81+
<AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY} text={props.pickerType} />
82+
</>
83+
}
84+
/>
8185
</Dialog>
8286
);
8387

‎src/commons/gitHubOverlay/RepositoryDialog.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
Button,
44
Classes,
55
Dialog,
6+
DialogBody,
7+
DialogFooter,
68
Intent,
79
Radio,
810
RadioGroup
@@ -25,7 +27,7 @@ const RepositoryDialog: React.FC<RepositoryDialogProps> = props => {
2527
<div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
2628
<h3>Select a Repository</h3>
2729
</div>
28-
<div className={Classes.DIALOG_BODY}>
30+
<DialogBody>
2931
<RadioGroup
3032
className="RepositoryRadioGroup"
3133
onChange={handleSelect}
@@ -35,15 +37,17 @@ const RepositoryDialog: React.FC<RepositoryDialogProps> = props => {
3537
<Radio label={repo.name} key={repo.id} value={repo.name} />
3638
))}
3739
</RadioGroup>
38-
</div>
39-
<div className={classNames(Classes.DIALOG_FOOTER)}>
40-
<div className={classNames(Classes.DIALOG_FOOTER_ACTIONS)}>
41-
<Button onClick={handleClose}>Close</Button>
42-
<AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY}>
43-
Select
44-
</AnchorButton>
45-
</div>
46-
</div>
40+
</DialogBody>
41+
<DialogFooter
42+
actions={
43+
<>
44+
<Button onClick={handleClose}>Close</Button>
45+
<AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY}>
46+
Select
47+
</AnchorButton>
48+
</>
49+
}
50+
/>
4751
</Dialog>
4852
);
4953

‎src/commons/researchAgreementPrompt/ResearchAgreementPrompt.tsx

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Classes, Dialog, H4, Intent } from '@blueprintjs/core';
1+
import { Button, Classes, Dialog, DialogBody, DialogFooter, H4, Intent } from '@blueprintjs/core';
22
import { useDispatch } from 'react-redux';
33

44
import SessionActions from '../application/actions/SessionActions';
@@ -17,7 +17,7 @@ const ResearchAgreementPrompt: React.FC = () => {
1717
isCloseButtonShown={false}
1818
isOpen
1919
>
20-
<div className={Classes.DIALOG_BODY}>
20+
<DialogBody>
2121
<H4>Welcome to your new {Constants.sourceAcademyDeploymentName} course!</H4>
2222
<div>
2323
Here at {Constants.sourceAcademyDeploymentName}, our mission is to bring out the beauty
@@ -31,20 +31,22 @@ const ResearchAgreementPrompt: React.FC = () => {
3131
with no penalty for you whatsoever. Contact your course instructor if you have questions
3232
or concerns about this research.
3333
</div>
34-
</div>
35-
<div className={Classes.DIALOG_FOOTER}>
36-
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
37-
<Button
38-
text="I would like to opt out"
39-
onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(false))}
40-
/>
41-
<Button
42-
text="I consent!"
43-
intent={Intent.SUCCESS}
44-
onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(true))}
45-
/>
46-
</div>
47-
</div>
34+
</DialogBody>
35+
<DialogFooter
36+
actions={
37+
<>
38+
<Button
39+
text="I would like to opt out"
40+
onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(false))}
41+
/>
42+
<Button
43+
text="I consent!"
44+
intent={Intent.SUCCESS}
45+
onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(true))}
46+
/>
47+
</>
48+
}
49+
/>
4850
</Dialog>
4951
</div>
5052
);

‎src/commons/sourceRecorder/SourceRecorderDeleteCell.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Classes, Dialog } from '@blueprintjs/core';
1+
import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
22
import { IconNames } from '@blueprintjs/icons';
33
import React, { useState } from 'react';
44

@@ -35,15 +35,17 @@ const SourceRecorderDeleteCell: React.FC<SourceRecorderDeleteCellProps> = props
3535
title="Delete Sourcecast"
3636
canOutsideClickClose={true}
3737
>
38-
<div className={Classes.DIALOG_BODY}>
38+
<DialogBody>
3939
<p>Are you sure to delete this sourcecast entry?</p>
40-
</div>
41-
<div className={Classes.DIALOG_FOOTER}>
42-
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
43-
<ControlButton label="Confirm Delete" icon={IconNames.TRASH} onClick={handleDelete} />
44-
<ControlButton label="Cancel" icon={IconNames.CROSS} onClick={handleCloseDialog} />
45-
</div>
46-
</div>
40+
</DialogBody>
41+
<DialogFooter
42+
actions={
43+
<>
44+
<ControlButton label="Confirm Delete" icon={IconNames.TRASH} onClick={handleDelete} />
45+
<ControlButton label="Cancel" icon={IconNames.CROSS} onClick={handleCloseDialog} />
46+
</>
47+
}
48+
/>
4749
</Dialog>
4850
</div>
4951
);

0 commit comments

Comments
 (0)