From 01b6f1b12bdf38f2ee3748d3200dd4a3b2411c17 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 12 Feb 2024 14:05:18 +0800 Subject: [PATCH 01/14] Bump minimum Blueprint version Done to allow compatibility with new React 18 `createRoot`. --- package.json | 6 +++--- yarn.lock | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9ef4bee710..4652b022c5 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,11 @@ "prepare": "husky" }, "dependencies": { - "@blueprintjs/core": "^5.7.0", - "@blueprintjs/datetime2": "^2.2.7", + "@blueprintjs/core": "^5.9.0", + "@blueprintjs/datetime2": "^2.3.0", "@blueprintjs/icons": "^5.5.0", "@blueprintjs/popover2": "^2.0.0", - "@blueprintjs/select": "^5.0.0", + "@blueprintjs/select": "^5.1.0", "@octokit/rest": "^20.0.0", "@sentry/browser": "^7.57.0", "@sourceacademy/sharedb-ace": "^2.0.2", diff --git a/yarn.lock b/yarn.lock index 2755a15075..01755954b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1179,7 +1179,7 @@ dependencies: tslib "~2.6.2" -"@blueprintjs/core@^5.7.0", "@blueprintjs/core@^5.9.1": +"@blueprintjs/core@^5.9.0", "@blueprintjs/core@^5.9.1": version "5.9.1" resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.9.1.tgz#79e474aa063468aec4c2e82cd9b6e12d0b98b1bc" integrity sha512-/Cq6CAV/GyMhTOGrzgIBDsneduQCFWxzDwlX2f8MMAFZFO7FaeCONPvzbcxpTRAXR+RFkb4HpPdIsAslyZUMzA== @@ -1195,7 +1195,7 @@ tslib "~2.6.2" use-sync-external-store "^1.2.0" -"@blueprintjs/datetime2@^2.2.7": +"@blueprintjs/datetime2@^2.3.0": version "2.3.1" resolved "https://registry.yarnpkg.com/@blueprintjs/datetime2/-/datetime2-2.3.1.tgz#6f650998b8f94d8e0f725f3d4c68e5ed97ef7949" integrity sha512-9UsGE/fmGzqpJA1p5kciZJWQNJ6P2qZBFCnMy9XFzPtFUSmDtNrUevnkV4EBWOAi2bUcXykvZMBaKrFrLUcJHg== @@ -1242,7 +1242,7 @@ classnames "^2.3.1" tslib "~2.6.2" -"@blueprintjs/select@^5.0.0", "@blueprintjs/select@^5.1.1": +"@blueprintjs/select@^5.1.0", "@blueprintjs/select@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-5.1.1.tgz#39bda2c1c73bfa96a395a42586a8583ca38f4173" integrity sha512-5BiYtYJvQmUuPHS/2g3ZYy8I3TgAmQtkO+ksqMXVWzRibW7CdggqvszeaSWA0+RHgYw3gJEUQk53yt+rqZCF6Q== From 89bfc32c2491ee2d57b4681bb890d7b05631482c Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 12 Feb 2024 14:14:06 +0800 Subject: [PATCH 02/14] Migrate from deprecated `Tooltip2`, `Popover2` Done partially so far, with the full migration in a subsequent commit. --- src/commons/SimpleDropdown.tsx | 9 ++++----- .../achievementEditor/AchievementSettings.tsx | 7 +++---- .../AchievementUuidCopier.tsx | 7 +++---- .../achievementEditor/EditableCard.tsx | 7 +++---- .../achievementEditor/EditableDate.tsx | 7 +++---- .../achievementEditor/EditableView.tsx | 7 +++---- .../control/common/ItemDeleter.tsx | 7 +++---- .../achievement/control/common/ItemSaver.tsx | 11 +++++------ .../control/goalEditor/EditableDate.tsx | 7 +++---- .../control/goalEditor/EditableMeta.tsx | 7 +++---- .../control/goalEditor/EditableTime.tsx | 7 +++---- .../metaDetails/EditableAssessmentMeta.tsx | 11 +++++------ .../metaDetails/EditableBinaryMeta.tsx | 19 +++++++++---------- .../metaDetails/EditableEventMeta.tsx | 15 +++++++-------- .../metaDetails/EditableManualMeta.tsx | 7 +++---- src/commons/assessment/Assessment.tsx | 12 ++++++------ .../controlBar/ControlBarChapterSelect.tsx | 7 +++---- .../github/ControlBarGitHubButtons.tsx | 11 +++++------ 18 files changed, 74 insertions(+), 91 deletions(-) diff --git a/src/commons/SimpleDropdown.tsx b/src/commons/SimpleDropdown.tsx index c68c9872fd..b53a1628ca 100644 --- a/src/commons/SimpleDropdown.tsx +++ b/src/commons/SimpleDropdown.tsx @@ -1,5 +1,4 @@ -import { Button, Menu, MenuItem } from '@blueprintjs/core'; -import { Popover2 } from '@blueprintjs/popover2'; +import { Button, Menu, MenuItem, Popover } from '@blueprintjs/core'; type OptionType = { value: any; label: string }; type Props = { @@ -7,7 +6,7 @@ type Props = { selectedValue?: T['value']; onClick?: (v: T['value']) => void; buttonProps?: Partial & { 'data-testid': string }>; - popoverProps?: Partial>; + popoverProps?: Partial>; }; function SimpleDropdown(props: Props) { @@ -23,7 +22,7 @@ function SimpleDropdown(props: Props) { }; return ( - (props: Props) { } > - + ); } diff --git a/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx b/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx index cb33ac98ae..6ffaa3ba5b 100644 --- a/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx +++ b/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx @@ -1,6 +1,5 @@ -import { Button, Checkbox, Dialog, EditableText } from '@blueprintjs/core'; +import { Button, Checkbox, Dialog, EditableText, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Tooltip2 } from '@blueprintjs/popover2'; import React, { useState } from 'react'; import { AchievementItem } from 'src/features/achievement/AchievementTypes'; @@ -34,9 +33,9 @@ const AchievementSettings: React.FC = props => { return ( <> - + - + = ({ changeView, view }) => { return ( <> - + - + = ({ changeMeta, meta }) => { return ( <> - + = ({ changeMeta, meta }) => { > - + = props => { return ( <> - + - - + + = props => { rightElement={

%

} value={requiredCompletionFrac * 100} /> - + ); }; diff --git a/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx b/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx index 17368edba1..49bab5c4be 100644 --- a/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx +++ b/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx @@ -1,6 +1,5 @@ -import { Button, EditableText, MenuItem, NumericInput } from '@blueprintjs/core'; +import { Button, EditableText, MenuItem, NumericInput, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Tooltip2 } from '@blueprintjs/popover2'; import { ItemRenderer, Select } from '@blueprintjs/select'; import React from 'react'; import { BinaryMeta, GoalMeta } from 'src/features/achievement/AchievementTypes'; @@ -113,26 +112,26 @@ const EditableBinaryMeta: React.FC = ({ binaryMeta, cha idx % 2 === 0 ? ( // the text to change the condition <> - + changeConditionArray(value, idx / 2)} multiline={true} placeholder="Enter condition here" value={op} /> - + { // should only be deleteable if not the only condition conditions.length > 1 && ( - + diff --git a/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx b/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx index d58c818a09..de1d48b0b6 100644 --- a/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx +++ b/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx @@ -1,6 +1,5 @@ -import { Button, Classes } from '@blueprintjs/core'; +import { Button, Classes, Popover } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Popover2 } from '@blueprintjs/popover2'; import classNames from 'classnames'; import { ControlBarProps } from '../../controlBar/ControlBar'; @@ -15,12 +14,12 @@ const MobileControlBar: React.FC = props => { ); return ( - + {testcaseCards} diff --git a/src/commons/sideContent/SideContentContestLeaderboard.tsx b/src/commons/sideContent/SideContentContestLeaderboard.tsx index 85bc9d7311..8231d1ce94 100644 --- a/src/commons/sideContent/SideContentContestLeaderboard.tsx +++ b/src/commons/sideContent/SideContentContestLeaderboard.tsx @@ -1,6 +1,5 @@ -import { Button, Collapse, Icon } from '@blueprintjs/core'; +import { Button, Collapse, Icon, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Tooltip2 } from '@blueprintjs/popover2'; import React, { useMemo, useState } from 'react'; import { ContestEntry } from '../assessment/AssessmentTypes'; @@ -80,9 +79,9 @@ const SideContentContestLeaderboard: React.FunctionComponent< onClick={() => setShowLeaderboard(!showLeaderboard)} > Contest Leaderboard - + - + {contestEntryCards} From 460b26829e85b867b3f8686772e30bfa0bdddba0 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 12 Feb 2024 14:29:14 +0800 Subject: [PATCH 04/14] Update test snapshots --- .../__tests__/__snapshots__/Dropdown.tsx.snap | 4 +- .../__snapshots__/NavigationBar.tsx.snap | 60 +++++++++++++++++-- .../GitHubAssessmentsNavigationBar.tsx.snap | 22 ++++++- .../NavigationBarLangSelectButton.tsx.snap | 2 +- .../__snapshots__/Playground.tsx.snap | 16 ++--- 5 files changed, 85 insertions(+), 19 deletions(-) diff --git a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap index 8cc3132cfd..bbe96b5fc2 100644 --- a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap +++ b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap @@ -2,7 +2,7 @@ exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in 1`] = ` @@ -36,7 +36,7 @@ exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateC exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in 1`] = ` diff --git a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap index a1be3d835c..89da07571c 100644 --- a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap +++ b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap @@ -8,7 +8,9 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = ` - } + defaultIsOpen={false} disabled={true} + fill={false} + hasBackdrop={false} + hoverCloseDelay={300} + hoverOpenDelay={150} + inheritDarkTheme={true} interactionKind="hover" + matchTargetWidth={false} + minimal={false} + openOnTargetFocus={true} popoverClassName="desktop-navbar-popover" position="bottom-right" + positioningStrategy="absolute" + shouldReturnFocusOnClose={false} + targetTagName="span" + transitionDuration={300} + usePortal={true} > - + - } + defaultIsOpen={false} disabled={true} + fill={false} + hasBackdrop={false} + hoverCloseDelay={300} + hoverOpenDelay={150} + inheritDarkTheme={true} interactionKind="hover" + matchTargetWidth={false} + minimal={false} + openOnTargetFocus={true} popoverClassName="desktop-navbar-popover" position="bottom-right" + positioningStrategy="absolute" + shouldReturnFocusOnClose={false} + targetTagName="span" + transitionDuration={300} + usePortal={true} > - + - } + defaultIsOpen={false} disabled={true} + fill={false} + hasBackdrop={false} + hoverCloseDelay={300} + hoverOpenDelay={150} + inheritDarkTheme={true} interactionKind="hover" + matchTargetWidth={false} + minimal={false} + openOnTargetFocus={true} popoverClassName="desktop-navbar-popover" position="bottom-right" + positioningStrategy="absolute" + shouldReturnFocusOnClose={false} + targetTagName="span" + transitionDuration={300} + usePortal={true} > - + } + defaultIsOpen={false} + disabled={false} + fill={false} + hasBackdrop={false} + hoverCloseDelay={300} + hoverOpenDelay={150} + inheritDarkTheme={true} + interactionKind="click" + matchTargetWidth={false} + minimal={false} + openOnTargetFocus={true} placement="bottom-end" + positioningStrategy="absolute" + shouldReturnFocusOnClose={false} + targetTagName="span" + transitionDuration={300} + usePortal={true} > - + } onChange={[Function]} placeholder="Select Course" diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap index 7c74500c8a..4a517e0706 100644 --- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap +++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap @@ -2,7 +2,7 @@ exports[`NavigationBarLangSelectButton should render correctly 1`] = ` diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap index 5e10aeac31..08e04d685e 100644 --- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap +++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap @@ -48,7 +48,7 @@ exports[`Playground tests Playground renders correctly 1`] = ` {contestEntryCards} diff --git a/src/commons/sideContent/SideContentEnvVisualizer.tsx b/src/commons/sideContent/SideContentEnvVisualizer.tsx index 1650a769c2..0b51d68e4b 100644 --- a/src/commons/sideContent/SideContentEnvVisualizer.tsx +++ b/src/commons/sideContent/SideContentEnvVisualizer.tsx @@ -5,23 +5,26 @@ import { Checkbox, Classes, Divider, - Slider + Slider, + Tooltip } from '@blueprintjs/core'; -import { Tooltip2 } from '@blueprintjs/popover2'; import classNames from 'classnames'; import { debounce } from 'lodash'; import * as React from 'react'; import { HotKeys } from 'react-hotkeys'; -import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'; -import { bindActionCreators, Dispatch } from 'redux'; +import { connect,MapDispatchToProps, MapStateToProps } from 'react-redux'; +import { bindActionCreators,Dispatch } from 'redux'; import EnvVisualizer from 'src/features/envVisualizer/EnvVisualizer'; import { Layout } from 'src/features/envVisualizer/EnvVisualizerLayout'; import { OverallState } from '../application/ApplicationTypes'; import { HighlightedLines } from '../editor/EditorTypes'; import Constants, { Links } from '../utils/Constants'; -import { setEditorHighlightedLinesControl, updateEnvSteps } from '../workspace/WorkspaceActions'; -import { evalEditor } from '../workspace/WorkspaceActions'; +import { + evalEditor, + setEditorHighlightedLinesControl, + updateEnvSteps +} from '../workspace/WorkspaceActions'; import { WorkspaceLocation } from '../workspace/WorkspaceTypes'; type State = { @@ -197,7 +200,7 @@ class SideContentEnvVisualizer extends React.Component
- + { if (this.state.visualization && EnvVisualizer.getCompactLayout()) { @@ -214,8 +217,8 @@ class SideContentEnvVisualizer extends React.Component - - + + { if (this.state.visualization && EnvVisualizer.getControlStash()) { @@ -232,7 +235,7 @@ class SideContentEnvVisualizer extends React.Component - +
{' '} diff --git a/src/commons/sideContent/githubAssessments/SideContentTestcaseEditor.tsx b/src/commons/sideContent/githubAssessments/SideContentTestcaseEditor.tsx index 34d3f93c28..2a8a95e91a 100644 --- a/src/commons/sideContent/githubAssessments/SideContentTestcaseEditor.tsx +++ b/src/commons/sideContent/githubAssessments/SideContentTestcaseEditor.tsx @@ -1,6 +1,5 @@ -import { Button, Collapse, Icon, PopoverPosition } from '@blueprintjs/core'; +import { Button, Collapse, Icon, PopoverPosition, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Tooltip2 } from '@blueprintjs/popover2'; import * as React from 'react'; import AceEditor from 'react-ace'; @@ -180,9 +179,9 @@ const SideContentTestcaseEditor: React.FunctionComponent< onClick={toggleTestcases} > Testcases - + - +
diff --git a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx index 7ce1da2e4f..4393c16cbe 100644 --- a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx +++ b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx @@ -1,5 +1,5 @@ +import { Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Tooltip2 } from '@blueprintjs/popover2'; import React from 'react'; import { PlaybackData, SourcecastData } from '../../features/sourceRecorder/SourceRecorderTypes'; @@ -35,9 +35,9 @@ const SourceRecorderSelectCell: React.FC = ({ }; return ( - + - + ); }; diff --git a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx index 6c6afc9ce7..32ff297c3b 100644 --- a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx +++ b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx @@ -1,5 +1,5 @@ +import { Popover, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Popover2, Tooltip2 } from '@blueprintjs/popover2'; import React, { useRef, useState } from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; @@ -29,24 +29,24 @@ const SourceRecorderShareCell: React.FC = props => const shareButtonPopoverContent = (
- + - +
); return ( - - + - - + + ); }; diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx index 481eb38279..06122c450e 100644 --- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx +++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx @@ -5,9 +5,9 @@ import { Dialog, FormGroup, HTMLSelect, - InputGroup + InputGroup, + Tooltip } from '@blueprintjs/core'; -import { Tooltip2 } from '@blueprintjs/popover2'; import classNames from 'classnames'; import React from 'react'; import { QrReader } from 'react-qr-reader'; @@ -81,9 +81,9 @@ export default function RemoteExecutionDeviceDialog({ }; const scanButton = ( - + -

+

Call {this.state.currentStep + 1}/{this.state.steps.length}