├── .circleci
    ├── compile.sh
    ├── config.yml
    ├── dependencies.sh
    ├── deploy.sh
    ├── export-version.sh
    ├── install-node.sh
    ├── release-github.sh
    ├── release.sh
    ├── smoke-test.sh
    ├── test.sh
    └── update-version.sh
├── .editorconfig
├── .github
    ├── CODE_OF_CONDUCT.md
    ├── CONTRIBUTING.md
    ├── ISSUE_TEMPLATE
    │   ├── Bug_report.md
    │   └── Feature_request.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── nevergreen.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .sdkmanrc
├── Dockerfile
├── LICENSE
├── README.md
├── cctray_xml_feed_mock
    ├── .npmrc
    ├── .nvmrc
    ├── package-lock.json
    ├── package.json
    ├── resources
    │   ├── cctray.xml
    │   ├── circle_ci.xml
    │   ├── go_cd.xml
    │   ├── jenkins.xml
    │   └── screenshot.xml
    └── src
    │   └── server.js
├── config
    ├── check-prerequisites.sh
    ├── eslint.config.mjs
    ├── webpack.base.config.js
    ├── webpack.dev.config.js
    └── webpack.prod.config.js
├── cypress.config.ts
├── develop.sh
├── doc
    ├── backup_v1.0.0.json
    ├── backup_v2.0.0.json
    ├── backup_v3.2.0.json
    ├── backup_v4.0.0.json
    ├── backup_v5.0.1.json
    ├── backup_v6.0.0.json
    ├── backup_v7.0.0.json
    ├── screenshot_monitor.png
    ├── screenshot_monitor_mobile.png
    ├── screenshot_monitor_tablet.png
    └── screenshot_tracking.png
├── journey
    ├── backup.cy.ts
    ├── index.d.ts
    ├── monitoring.cy.ts
    ├── settings.cy.ts
    ├── support.ts
    └── tsconfig.json
├── lein.sh
├── package-lock.json
├── package.json
├── pre-push.sh
├── project.clj
├── resources
    ├── logback.xml
    ├── preview.xml
    ├── version.txt
    ├── version_meta.txt
    └── version_name.txt
├── src
    ├── client
    │   ├── App.tsx
    │   ├── AppRoutes.tsx
    │   ├── Banner.test.tsx
    │   ├── Banner.tsx
    │   ├── CheckForNewVersionHook.ts
    │   ├── FontMetrics.tsx
    │   ├── HideMenusHook.ts
    │   ├── NavigationShortcutsHook.ts
    │   ├── Nevergreen.test.tsx
    │   ├── Nevergreen.tsx
    │   ├── ServiceWorkerHook.ts
    │   ├── SkipToContent.tsx
    │   ├── UnhandledError.tsx
    │   ├── UnhandledErrorMessage.tsx
    │   ├── banner.scss
    │   ├── common
    │   │   ├── AspectRatioHook.ts
    │   │   ├── AudioPlayer.ts
    │   │   ├── AutoHideMenusHook.ts
    │   │   ├── BrowserTitleHook.ts
    │   │   ├── DateTime.test.ts
    │   │   ├── DateTime.ts
    │   │   ├── Duration.test.tsx
    │   │   ├── Duration.tsx
    │   │   ├── ExternalLink.test.tsx
    │   │   ├── ExternalLink.tsx
    │   │   ├── ForceFocusHook.ts
    │   │   ├── Json.ts
    │   │   ├── Keyboard.ts
    │   │   ├── LinkButton.tsx
    │   │   ├── Loading.test.tsx
    │   │   ├── Loading.tsx
    │   │   ├── Logger.ts
    │   │   ├── Main.tsx
    │   │   ├── Messages.test.tsx
    │   │   ├── Messages.tsx
    │   │   ├── Modal.tsx
    │   │   ├── Page.tsx
    │   │   ├── ResizableHook.ts
    │   │   ├── ScaleText.test.ts
    │   │   ├── ScaleText.tsx
    │   │   ├── Style.ts
    │   │   ├── SuccessImage.tsx
    │   │   ├── SuccessMessage.tsx
    │   │   ├── Summary.test.tsx
    │   │   ├── Summary.tsx
    │   │   ├── SystemNotifications.ts
    │   │   ├── Timed.tsx
    │   │   ├── TimedMessages.tsx
    │   │   ├── Title.test.tsx
    │   │   ├── Title.tsx
    │   │   ├── Types.ts
    │   │   ├── URL.test.tsx
    │   │   ├── URL.tsx
    │   │   ├── Utils.test.ts
    │   │   ├── Utils.ts
    │   │   ├── VisuallyHidden.tsx
    │   │   ├── Words.ts
    │   │   ├── _accessibility.scss
    │   │   ├── _colours.scss
    │   │   ├── _layout.scss
    │   │   ├── _links.scss
    │   │   ├── _typography.scss
    │   │   ├── card
    │   │   │   ├── Card.tsx
    │   │   │   ├── CardHeading.tsx
    │   │   │   ├── CardList.tsx
    │   │   │   ├── card-heading.scss
    │   │   │   ├── card-list.scss
    │   │   │   └── card.scss
    │   │   ├── fonts
    │   │   │   ├── Roboto-700
    │   │   │   │   ├── LICENSE.txt
    │   │   │   │   ├── Roboto-700.svg
    │   │   │   │   ├── Roboto-700.ttf
    │   │   │   │   ├── Roboto-700.woff
    │   │   │   │   └── Roboto-700.woff2
    │   │   │   ├── Roboto-Mono-regular
    │   │   │   │   ├── LICENSE.txt
    │   │   │   │   ├── Roboto-Mono-regular.svg
    │   │   │   │   ├── Roboto-Mono-regular.ttf
    │   │   │   │   ├── Roboto-Mono-regular.woff
    │   │   │   │   └── Roboto-Mono-regular.woff2
    │   │   │   ├── Roboto-regular
    │   │   │   │   ├── LICENSE.txt
    │   │   │   │   ├── Roboto-regular.svg
    │   │   │   │   ├── Roboto-regular.ttf
    │   │   │   │   ├── Roboto-regular.woff
    │   │   │   │   └── Roboto-regular.woff2
    │   │   │   └── fonts.scss
    │   │   ├── forms
    │   │   │   ├── Button.test.tsx
    │   │   │   ├── Button.tsx
    │   │   │   ├── Checkbox.tsx
    │   │   │   ├── ColourPicker.tsx
    │   │   │   ├── DropDown.test.tsx
    │   │   │   ├── DropDown.tsx
    │   │   │   ├── Form.tsx
    │   │   │   ├── Group.tsx
    │   │   │   ├── Input.test.tsx
    │   │   │   ├── Input.tsx
    │   │   │   ├── Password.test.tsx
    │   │   │   ├── Password.tsx
    │   │   │   ├── Radio.tsx
    │   │   │   ├── Slider.tsx
    │   │   │   ├── Validation.ts
    │   │   │   ├── _forms.scss
    │   │   │   ├── button.scss
    │   │   │   ├── checkbox.scss
    │   │   │   ├── colour-picker.scss
    │   │   │   ├── drop-down.scss
    │   │   │   ├── form.scss
    │   │   │   ├── group.scss
    │   │   │   ├── input.scss
    │   │   │   ├── radio.scss
    │   │   │   └── slider.scss
    │   │   ├── icons
    │   │   │   ├── AidKit.tsx
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowUp.tsx
    │   │   │   ├── Bell.tsx
    │   │   │   ├── Bin.tsx
    │   │   │   ├── CheckboxChecked.tsx
    │   │   │   ├── CheckboxUnchecked.tsx
    │   │   │   ├── Checkmark.tsx
    │   │   │   ├── CircleCi.tsx
    │   │   │   ├── Clock.tsx
    │   │   │   ├── CloudDownload.tsx
    │   │   │   ├── CloudUpload.tsx
    │   │   │   ├── Cog.tsx
    │   │   │   ├── Cogs.tsx
    │   │   │   ├── Cross.tsx
    │   │   │   ├── Dice.tsx
    │   │   │   ├── Display.tsx
    │   │   │   ├── Eye.tsx
    │   │   │   ├── EyeBlocked.tsx
    │   │   │   ├── FloppyDisk.tsx
    │   │   │   ├── FolderOpen.tsx
    │   │   │   ├── GitHubLogo.tsx
    │   │   │   ├── GitLabLogo.tsx
    │   │   │   ├── GoCd.tsx
    │   │   │   ├── Icon.tsx
    │   │   │   ├── Image.tsx
    │   │   │   ├── Info.tsx
    │   │   │   ├── JsonLogo.tsx
    │   │   │   ├── List.tsx
    │   │   │   ├── Lock.tsx
    │   │   │   ├── Loop.tsx
    │   │   │   ├── MenuClose.tsx
    │   │   │   ├── MenuOpen.tsx
    │   │   │   ├── Mute.tsx
    │   │   │   ├── Note.tsx
    │   │   │   ├── PaintFormat.tsx
    │   │   │   ├── Paste.tsx
    │   │   │   ├── Play.tsx
    │   │   │   ├── Plus.tsx
    │   │   │   ├── Question.tsx
    │   │   │   ├── Stop.tsx
    │   │   │   ├── Unlocked.tsx
    │   │   │   ├── Warning.tsx
    │   │   │   ├── Xml.tsx
    │   │   │   ├── icon.scss
    │   │   │   └── prognosis
    │   │   │   │   ├── IconError.tsx
    │   │   │   │   ├── IconHealthy.tsx
    │   │   │   │   ├── IconHealthyBuilding.tsx
    │   │   │   │   ├── IconPrognosis.tsx
    │   │   │   │   ├── IconSick.tsx
    │   │   │   │   ├── IconSickBuilding.tsx
    │   │   │   │   ├── IconUnknown.tsx
    │   │   │   │   ├── error-192x192.png
    │   │   │   │   ├── error.svg
    │   │   │   │   ├── healthy-192x192.png
    │   │   │   │   ├── healthy-building-192x192.png
    │   │   │   │   ├── healthy-building.svg
    │   │   │   │   ├── healthy.svg
    │   │   │   │   ├── sick-192x192.png
    │   │   │   │   ├── sick-building-192x192.png
    │   │   │   │   ├── sick-building.svg
    │   │   │   │   ├── sick.svg
    │   │   │   │   ├── unknown-192x192.png
    │   │   │   │   └── unknown.svg
    │   │   ├── link-button.scss
    │   │   ├── loading.scss
    │   │   ├── main.scss
    │   │   ├── messages.scss
    │   │   ├── modal.scss
    │   │   ├── page.scss
    │   │   ├── responsive.scss
    │   │   ├── scaled-text.scss
    │   │   ├── success-image.scss
    │   │   ├── success-message.scss
    │   │   ├── summary.scss
    │   │   ├── timed.scss
    │   │   ├── url.scss
    │   │   └── visually-hidden.scss
    │   ├── configuration
    │   │   ├── Configuration.test.ts
    │   │   ├── Configuration.ts
    │   │   ├── ConfigurationHook.ts
    │   │   ├── Hooks.ts
    │   │   ├── LocalRepository.ts
    │   │   ├── Migrate.test.ts
    │   │   ├── Migrate.ts
    │   │   ├── MigrationsReducer.ts
    │   │   ├── ReduxStore.ts
    │   │   └── migrations
    │   │   │   ├── 001_MoveAudioVisualToSettings.test.ts
    │   │   │   ├── 001_MoveAudioVisualToSettings.ts
    │   │   │   ├── 002_PrefixEncryptedValues.test.ts
    │   │   │   ├── 002_PrefixEncryptedValues.ts
    │   │   │   ├── 003_FlattenProjects.test.ts
    │   │   │   ├── 003_FlattenProjects.ts
    │   │   │   ├── 004_AddTrayIdToProjects.test.ts
    │   │   │   ├── 004_AddTrayIdToProjects.ts
    │   │   │   ├── 005_SetAuthType.test.ts
    │   │   │   ├── 005_SetAuthType.ts
    │   │   │   ├── 006_RemoveBrokenBuildTime.test.ts
    │   │   │   ├── 006_RemoveShowBrokenBuildTime.ts
    │   │   │   ├── 007_SetProjectDescription.test.ts
    │   │   │   ├── 007_SetProjectDescription.ts
    │   │   │   ├── 008_UpdateMaxProjectsToShow.test.ts
    │   │   │   ├── 008_UpdateMaxProjectsToShow.ts
    │   │   │   ├── 009_RemoveProjects.test.ts
    │   │   │   ├── 009_RemoveProjects.ts
    │   │   │   ├── 010_SetTrackingMode.test.ts
    │   │   │   ├── 010_SetTrackingMode.ts
    │   │   │   ├── 011_RemoveOldKeys.test.ts
    │   │   │   ├── 011_RemoveOldKeys.ts
    │   │   │   ├── 012_MoveNotificationSettings.test.ts
    │   │   │   ├── 012_MoveNotificationSettings.ts
    │   │   │   ├── 013_MigrateNotifications.test.ts
    │   │   │   ├── 013_MigrateNotifications.ts
    │   │   │   ├── 014_MigratePersonalSettings.test.ts
    │   │   │   ├── 014_MigratePersonalSettings.ts
    │   │   │   ├── 015_MigrateRemoteLocationTimestamps.test.ts
    │   │   │   ├── 015_MigrateRemoteLocationTimestamps.ts
    │   │   │   ├── 016_MigrateSuccess.test.ts
    │   │   │   ├── 016_MigrateSuccess.ts
    │   │   │   ├── 017_MoveClickToShowMenuSetting.test.ts
    │   │   │   ├── 017_MoveClickToShowMenuSetting.ts
    │   │   │   ├── 018_CombineFeedAuthSettings.test.ts
    │   │   │   ├── 018_CombineFeedAuthSettings.ts
    │   │   │   ├── 019_MigratePrognosisSettings.test.ts
    │   │   │   ├── 019_MigratePrognosisSettings.ts
    │   │   │   ├── index.test.ts
    │   │   │   └── index.ts
    │   ├── defaults.scss
    │   ├── domain
    │   │   ├── FeedError.test.ts
    │   │   ├── FeedError.ts
    │   │   ├── Project.test.ts
    │   │   ├── Project.ts
    │   │   ├── Url.test.ts
    │   │   └── Url.ts
    │   ├── favicons
    │   │   ├── apple-touch-icon.png
    │   │   ├── canaries.svg
    │   │   ├── favicon-96x96.png
    │   │   ├── favicon.ico
    │   │   ├── site.webmanifest
    │   │   ├── web-app-manifest-192x192.png
    │   │   └── web-app-manifest-512x512.png
    │   ├── font-metrics.scss
    │   ├── footer
    │   │   ├── AboutPage.tsx
    │   │   ├── Footer.test.tsx
    │   │   ├── Footer.tsx
    │   │   ├── SubmitAnIssue.tsx
    │   │   ├── about-page.scss
    │   │   └── footer.scss
    │   ├── gateways
    │   │   ├── BackupGateway.test.ts
    │   │   ├── BackupGateway.ts
    │   │   ├── Gateway.ts
    │   │   ├── ProjectsGateway.ts
    │   │   ├── SecurityGateway.test.ts
    │   │   └── SecurityGateway.ts
    │   ├── header
    │   │   ├── Header.tsx
    │   │   └── header.scss
    │   ├── help
    │   │   ├── Help.test.tsx
    │   │   ├── Help.tsx
    │   │   ├── HelpArticle.tsx
    │   │   ├── HelpContent.tsx
    │   │   ├── HelpForms.tsx
    │   │   ├── HelpLink.tsx
    │   │   ├── KeyboardShortcuts.tsx
    │   │   ├── help-article.scss
    │   │   ├── help-content.scss
    │   │   ├── help-forms.scss
    │   │   ├── help-link.scss
    │   │   ├── help.scss
    │   │   └── keyboard-shortcuts.scss
    │   ├── index.html
    │   ├── index.tsx
    │   ├── monitor
    │   │   ├── InterestingProjects.test.tsx
    │   │   ├── InterestingProjects.tsx
    │   │   ├── InterestingProjectsHook.ts
    │   │   ├── Monitor.test.tsx
    │   │   ├── Monitor.tsx
    │   │   ├── MonitorHelp.tsx
    │   │   ├── ScaledGrid.tsx
    │   │   ├── ScaledTile.tsx
    │   │   ├── Success.test.tsx
    │   │   ├── Success.tsx
    │   │   ├── TileProject.tsx
    │   │   ├── TileProjectsNotShown.tsx
    │   │   ├── interesting-projects.scss
    │   │   ├── monitor.scss
    │   │   ├── notifications
    │   │   │   ├── AudioNotificationsHook.ts
    │   │   │   ├── BrowserTitleSummaryHook.ts
    │   │   │   ├── NotificationsHook.test.tsx
    │   │   │   ├── NotificationsHook.ts
    │   │   │   └── SystemNotificationsHook.ts
    │   │   ├── scaled-grid.scss
    │   │   ├── scaled-tile.scss
    │   │   ├── tile-project.scss
    │   │   └── tile-projects-not-shown.scss
    │   ├── nevergreen.scss
    │   ├── queryClient.ts
    │   ├── robots.txt
    │   ├── settings
    │   │   ├── AddLink.tsx
    │   │   ├── PersonalSettingsReducer.test.ts
    │   │   ├── PersonalSettingsReducer.ts
    │   │   ├── Preview.tsx
    │   │   ├── Settings.tsx
    │   │   ├── add-link.scss
    │   │   ├── backup
    │   │   │   ├── AddBackupHelp.tsx
    │   │   │   ├── AddBackupPage.test.tsx
    │   │   │   ├── AddBackupPage.tsx
    │   │   │   ├── AutomaticBackupListener.test.ts
    │   │   │   ├── AutomaticBackupListener.ts
    │   │   │   ├── BackupActionCreators.test.ts
    │   │   │   ├── BackupActionCreators.ts
    │   │   │   ├── BackupHelp.tsx
    │   │   │   ├── BackupLogo.tsx
    │   │   │   ├── BackupPage.test.tsx
    │   │   │   ├── BackupPage.tsx
    │   │   │   ├── BackupSummary.tsx
    │   │   │   ├── FileSystem.ts
    │   │   │   ├── LocalBackupCard.tsx
    │   │   │   ├── RemoteBackupCard.test.tsx
    │   │   │   ├── RemoteBackupCard.tsx
    │   │   │   ├── RemoteBackupDetailsPage.test.tsx
    │   │   │   ├── RemoteBackupDetailsPage.tsx
    │   │   │   ├── RemoteBackupDetailsPageHelp.tsx
    │   │   │   ├── RemoteLocationOptions.ts
    │   │   │   ├── RemoteLocationPage.tsx
    │   │   │   ├── RemoteLocationsActions.ts
    │   │   │   ├── RemoteLocationsReducer.test.ts
    │   │   │   ├── RemoteLocationsReducer.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── add-backup.scss
    │   │   │   ├── export
    │   │   │   │   ├── ClipboardHook.ts
    │   │   │   │   ├── ExportLocalHelp.tsx
    │   │   │   │   ├── ExportLocallyPage.test.tsx
    │   │   │   │   ├── ExportLocallyPage.tsx
    │   │   │   │   ├── ExportRemoteHelp.tsx
    │   │   │   │   ├── ExportRemotePage.test.tsx
    │   │   │   │   ├── ExportRemotePage.tsx
    │   │   │   │   └── export-locally-page.scss
    │   │   │   ├── import
    │   │   │   │   ├── FileDropTarget.tsx
    │   │   │   │   ├── ImportLocalHelp.tsx
    │   │   │   │   ├── ImportLocalPage.test.tsx
    │   │   │   │   ├── ImportLocalPage.tsx
    │   │   │   │   ├── ImportRemoteHelp.tsx
    │   │   │   │   ├── ImportRemotePage.test.tsx
    │   │   │   │   ├── ImportRemotePage.tsx
    │   │   │   │   ├── ImportSuccessPage.test.tsx
    │   │   │   │   ├── ImportSuccessPage.tsx
    │   │   │   │   ├── InputFile.tsx
    │   │   │   │   ├── StopDefaultDragAndDropBehaviourHook.tsx
    │   │   │   │   ├── import-page.scss
    │   │   │   │   ├── import-success-page.scss
    │   │   │   │   └── input-file.scss
    │   │   │   ├── local-backup-card.scss
    │   │   │   ├── remote-backup-details-page.scss
    │   │   │   └── text-area.scss
    │   │   ├── colours
    │   │   │   ├── ChangeColoursSection.tsx
    │   │   │   ├── ContrastHook.tsx
    │   │   │   └── change-colours-section.scss
    │   │   ├── display
    │   │   │   ├── DisplaySettingsHelp.tsx
    │   │   │   ├── DisplaySettingsPage.test.tsx
    │   │   │   ├── DisplaySettingsPage.tsx
    │   │   │   ├── DisplaySettingsReducer.test.ts
    │   │   │   ├── DisplaySettingsReducer.ts
    │   │   │   └── display-settings-page.scss
    │   │   ├── notifications
    │   │   │   ├── NotificationSettingsHelp.tsx
    │   │   │   ├── NotificationSettingsPage.test.tsx
    │   │   │   ├── NotificationSettingsPage.tsx
    │   │   │   ├── NotificationsReducer.test.ts
    │   │   │   ├── NotificationsReducer.ts
    │   │   │   ├── NotificationsSystem.test.tsx
    │   │   │   ├── NotificationsSystem.tsx
    │   │   │   ├── notifications-settings.scss
    │   │   │   ├── pacman_death.mp3
    │   │   │   └── test_audio_volume.mp3
    │   │   ├── other
    │   │   │   ├── OtherSettingsPage.test.tsx
    │   │   │   ├── OtherSettingsPage.tsx
    │   │   │   ├── OtherSettingsPageHelp.tsx
    │   │   │   ├── OtherSettingsReducer.test.ts
    │   │   │   ├── OtherSettingsReducer.ts
    │   │   │   └── other-settings-page.scss
    │   │   ├── preview.scss
    │   │   ├── prognosis
    │   │   │   ├── PrognosisEditPage.test.tsx
    │   │   │   ├── PrognosisEditPage.tsx
    │   │   │   ├── PrognosisEditPageHelp.tsx
    │   │   │   ├── PrognosisSettingsHelp.tsx
    │   │   │   ├── PrognosisSettingsPage.test.tsx
    │   │   │   ├── PrognosisSettingsPage.tsx
    │   │   │   ├── PrognosisSettingsReducer.ts
    │   │   │   └── prognosis-settings-page.scss
    │   │   ├── settings.scss
    │   │   ├── success
    │   │   │   ├── AddMessagePage.test.tsx
    │   │   │   ├── AddMessagePage.tsx
    │   │   │   ├── AddMessagePageHelp.tsx
    │   │   │   ├── SuccessMessagesPage.test.tsx
    │   │   │   ├── SuccessMessagesPage.tsx
    │   │   │   ├── SuccessMessagesPageHelp.tsx
    │   │   │   ├── SuccessReducer.test.ts
    │   │   │   ├── SuccessReducer.ts
    │   │   │   ├── add-message-page.scss
    │   │   │   └── success-messages-page.scss
    │   │   └── tracking
    │   │   │   ├── AddFeedHelp.tsx
    │   │   │   ├── AddFeedPage.test.tsx
    │   │   │   ├── AddFeedPage.tsx
    │   │   │   ├── ConnectionForm.tsx
    │   │   │   ├── ConnectionFormHelp.tsx
    │   │   │   ├── FeedCard.test.tsx
    │   │   │   ├── FeedCard.tsx
    │   │   │   ├── FeedLogo.tsx
    │   │   │   ├── FeedPage.tsx
    │   │   │   ├── FeedsReducer.test.ts
    │   │   │   ├── FeedsReducer.ts
    │   │   │   ├── SelectedReducer.test.ts
    │   │   │   ├── SelectedReducer.ts
    │   │   │   ├── TestConnection.test.tsx
    │   │   │   ├── TestConnection.tsx
    │   │   │   ├── TrackingActionCreators.ts
    │   │   │   ├── TrackingPage.test.tsx
    │   │   │   ├── TrackingPage.tsx
    │   │   │   ├── TrackingPageHelp.tsx
    │   │   │   ├── connection-form.scss
    │   │   │   ├── projects
    │   │   │       ├── AvailableProjects.tsx
    │   │   │       ├── AvailableProjectsHelp.tsx
    │   │   │       ├── ManageProjectsPage.test.tsx
    │   │   │       ├── ManageProjectsPage.tsx
    │   │   │       ├── ProjectsHook.ts
    │   │   │       ├── Refresh.test.tsx
    │   │   │       ├── Refresh.tsx
    │   │   │       ├── available-projects.scss
    │   │   │       ├── manage-projects-page.scss
    │   │   │       └── refresh.scss
    │   │   │   ├── settings
    │   │   │       ├── UpdateConnectionHelp.tsx
    │   │   │       ├── UpdateConnectionPage.test.tsx
    │   │   │       ├── UpdateConnectionPage.tsx
    │   │   │       ├── UpdateDetailsHelp.tsx
    │   │   │       ├── UpdateDetailsPage.test.tsx
    │   │   │       ├── UpdateDetailsPage.tsx
    │   │   │       └── update-details-page.scss
    │   │   │   ├── test-connection.scss
    │   │   │   └── tracking-page.scss
    │   ├── skip-to-content.scss
    │   ├── styleGuide
    │   │   ├── Element.tsx
    │   │   ├── Forms.tsx
    │   │   ├── Icons.tsx
    │   │   ├── Layout.tsx
    │   │   ├── StyleGuide.tsx
    │   │   ├── StyleGuideSection.tsx
    │   │   ├── Typography.tsx
    │   │   ├── forms.scss
    │   │   ├── icons.scss
    │   │   └── style-guide-section.scss
    │   ├── testUtils
    │   │   ├── builders.ts
    │   │   ├── fileMock.js
    │   │   ├── fileTransformer.js
    │   │   ├── mockApcaW3.js
    │   │   ├── setupTestEnv.js
    │   │   └── testHelpers.tsx
    │   ├── typings.d.ts
    │   └── unhandled-error-message.scss
    ├── logback-tests.xml
    └── server
    │   └── nevergreen
    │       ├── api
    │           ├── security.clj
    │           └── version.clj
    │       ├── api_routes.clj
    │       ├── app.clj
    │       ├── app_routes.clj
    │       ├── backup
    │           ├── custom_gateway.clj
    │           ├── custom_gateway_test.clj
    │           ├── export.clj
    │           ├── export_test.clj
    │           ├── github_gateway.clj
    │           ├── github_gateway_test.clj
    │           ├── gitlab_gateway.clj
    │           ├── gitlab_gateway_test.clj
    │           ├── import.clj
    │           └── import_test.clj
    │       ├── config.clj
    │       ├── config_test.clj
    │       ├── crypto.clj
    │       ├── crypto_test.clj
    │       ├── errors.clj
    │       ├── errors_test.clj
    │       ├── gateway.clj
    │       ├── gateway_test.clj
    │       ├── logging.clj
    │       ├── logging_test.clj
    │       ├── middleware
    │           ├── wrap_cache_control.clj
    │           ├── wrap_cache_control_test.clj
    │           ├── wrap_content_security_policy.clj
    │           ├── wrap_content_security_policy_test.clj
    │           ├── wrap_convert_keys.clj
    │           ├── wrap_convert_keys_test.clj
    │           ├── wrap_cors_headers.clj
    │           ├── wrap_cors_headers_test.clj
    │           ├── wrap_exceptions.clj
    │           ├── wrap_exceptions_test.clj
    │           ├── wrap_permissions_policy.clj
    │           ├── wrap_permissions_policy_test.clj
    │           ├── wrap_referrer_policy.clj
    │           └── wrap_referrer_policy_test.clj
    │       └── projects
    │           ├── ci_gateway.clj
    │           ├── ci_gateway_test.clj
    │           ├── ci_server.clj
    │           ├── ci_server_test.clj
    │           ├── preview.clj
    │           ├── projects.clj
    │           └── projects_test.clj
└── tsconfig.json


/.circleci/compile.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -eu
 2 | 
 3 | echo "cleaning build folders"
 4 | npm run clean:all
 5 | 
 6 | echo "type checking"
 7 | npm run check-types
 8 | 
 9 | echo "building"
10 | npm run build
11 | ./lein.sh uberjar
12 | 


--------------------------------------------------------------------------------
/.circleci/dependencies.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash -eu
2 | 
3 | echo "downloading ui dependencies"
4 | npm ci
5 | 
6 | echo "downloading server dependencies"
7 | npm run install:server
8 | 


--------------------------------------------------------------------------------
/.circleci/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash -eu
2 | 
3 | echo "deploying to staging"
4 | scp ./target/nevergreen-standalone.jar nevergreen@35.176.75.186:/home/nevergreen/deploy/staging
5 | ssh nevergreen@35.176.75.186 "sudo /bin/systemctl restart nevergreen-staging-1"
6 | 


--------------------------------------------------------------------------------
/.circleci/export-version.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -eu
 2 | 
 3 | versionFile="./resources/version.txt"
 4 | metaFile="./resources/version_meta.txt"
 5 | nameFile="./resources/version_name.txt"
 6 | 
 7 | version=$(cat ${versionFile})
 8 | versionMeta=$(cat ${metaFile})
 9 | versionName=$(cat ${nameFile})
10 | 
11 | echo "export VERSION=\"$version\"" >> $BASH_ENV
12 | echo "export VERSION_META=\"$versionMeta\"" >> $BASH_ENV
13 | echo "export VERSION_NAME=\"$versionName\"" >> $BASH_ENV
14 | echo "export FULL_VERSION=\"$version+$versionMeta\"" >> $BASH_ENV
15 | 


--------------------------------------------------------------------------------
/.circleci/install-node.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | echo "downloading nvm"
 4 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
 5 | 
 6 | echo "sourcing nvm"
 7 | export NVM_DIR="$HOME/.nvm"
 8 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 9 | 
10 | echo "installing node"
11 | nvm install
12 | 


--------------------------------------------------------------------------------
/.circleci/release-github.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -eu
 2 | 
 3 | body="### New Features\r\n\r\n### Closed Bugs\r\n\r\n### Improvements\r\n\r\n### Misc\r\n"
 4 | 
 5 | echo "Creating a GitHub release with tag [${VERSION}] and name [${VERSION_NAME}]"
 6 | 
 7 | responseJson=$(curl \
 8 |   -X POST \
 9 |   -H "Accept: application/vnd.github+json" \
10 |   -H "Authorization: Bearer ${GITHUB_TOKEN}" \
11 |   -d "{\"tag_name\": \"v${VERSION}\", \"target_commitish\": \"main\", \"name\": \"${VERSION_NAME}\", \"body\": \"${body}\", \"draft\": true, \"prerelease\": false}" \
12 |   https://api.github.com/repos/build-canaries/nevergreen/releases)
13 | 
14 | echo "Got response [${responseJson}]"
15 | 
16 | uploadUrl=$(echo ${responseJson} | jq -r '.upload_url' | sed "s|{?name,label}||")
17 | 
18 | echo "Adding the nevergreen-standalone.jar as an asset using URL [${uploadUrl}]"
19 | 
20 | curl \
21 |   -X POST \
22 |   -H "Authorization: Bearer ${GITHUB_TOKEN}" \
23 |   -H "Accept: application/vnd.github+json" \
24 |   -H "Content-Type: application/zip" \
25 |   --data-binary '@./target/nevergreen-standalone.jar' \
26 |   "${uploadUrl}?name=nevergreen-standalone.jar"
27 | 


--------------------------------------------------------------------------------
/.circleci/release.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash -eu
2 | 
3 | echo "deploying to production"
4 | scp ./target/nevergreen-standalone.jar nevergreen@35.176.75.186:/home/nevergreen/deploy/production
5 | ssh nevergreen@35.176.75.186 "sudo /bin/systemctl restart nevergreen-production-1"
6 | ssh nevergreen@35.176.75.186 "sudo /bin/systemctl restart nevergreen-production-2"
7 | 


--------------------------------------------------------------------------------
/.circleci/smoke-test.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -u
 2 | # Don't set the e flag as we want to retry if the curl command fails
 3 | 
 4 | expectedVersion=${FULL_VERSION}
 5 | 
 6 | url="$HOST/api/version"
 7 | version='unknown'
 8 | 
 9 | echo "running smoke test using url [$url] with expected version [$expectedVersion]"
10 | echo
11 | 
12 | attempts=0
13 | while [ ${attempts} -lt 30 ]; do
14 |   version=$(curl -s -f -k --connect-timeout 10 -m 5 ${url})
15 | 
16 |   if [ "${expectedVersion}" == "${version}" ]
17 |   then
18 |     echo
19 |     echo "smoke test success, version [${version}] was deployed"
20 |     exit 0
21 |   fi
22 | 
23 |   if [ "${version}" != "" ]
24 |   then
25 |     echo
26 |     echo "smoke test failed, got version [${version}] but was expecting [${expectedVersion}]"
27 |     exit 1
28 |   else
29 |     echo -ne "."
30 |   fi
31 | 
32 |   sleep 1
33 |   attempts=$((attempts+1))
34 | done
35 | 
36 | echo
37 | echo "smoke test failed, the server did not respond after ~30 seconds"
38 | exit 1
39 | 


--------------------------------------------------------------------------------
/.circleci/test.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -eu
 2 | 
 3 | echo "running linting"
 4 | npm run prettier:check
 5 | npm run lint:all
 6 | 
 7 | echo "running unit tests"
 8 | mkdir -p ./target/test-reports/client
 9 | mkdir -p ./target/test-reports/server
10 | 
11 | npm run test:coverage
12 | 
13 | # We use cloverage to create the coverage report, but it can also create a junit XML report for us.
14 | # So we want to stop test failures from exiting the script immediately so we can move the junit report to the correct
15 | # folder
16 | 
17 | EXIT_STATUS=0
18 | 
19 | ./lein.sh coverage || EXIT_STATUS=$?
20 | 
21 | if [ -f ./target/coverage-reports/server/junit.xml ]; then
22 |   mv ./target/coverage-reports/server/junit.xml ./target/test-reports/server/test-results.xml
23 | fi
24 | 
25 | if [ $EXIT_STATUS -ne 0 ]; then
26 |   exit ${EXIT_STATUS}
27 | fi
28 | 


--------------------------------------------------------------------------------
/.circleci/update-version.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -eu
 2 | 
 3 | metaFile="./resources/version_meta.txt"
 4 | 
 5 | BUILD_NUM=$CIRCLE_BUILD_NUM
 6 | COMMIT_HASH=${CIRCLE_SHA1:0:7}
 7 | 
 8 | echo "updating version meta with commit hash [$COMMIT_HASH] and build number [$BUILD_NUM] in file [$metaFile] ..."
 9 | echo -n "$BUILD_NUM.$COMMIT_HASH" > ${metaFile}
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | charset = utf-8
10 | end_of_line = lf
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | indent_size = 4
17 | 
18 | [*.txt]
19 | insert_final_newline = false
20 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Submit a bug report if something isn't working how you'd expect
 4 | labels: bug
 5 | ---
 6 | 
 7 | ## Bug report
 8 | 
 9 | **How are you running?**
10 | 
11 | <!-- e.g. downloaded jar or compiled from source or docker or nevergreen.io -->
12 | 
13 | **Nevergreen version?**
14 | 
15 | <!-- Please include the full version e.g. v1.0.0+695.31a2522 -->
16 | 
17 | **What are you running on?**
18 | 
19 | <!-- Please specify the browser and OS including version e.g. Chrome 70.0.3538.102 on Mac OSX 10.14.1 -->
20 | 
21 | **Which CI server(s) are you monitoring?**
22 | 
23 | <!-- e.g. Jenkins or GoCD etc -->
24 | 
25 | **Expected behaviour?**
26 | 
27 | <!-- Tell us what you expected to happen -->
28 | 
29 | **Actual behaviour?**
30 | 
31 | <!-- Tell us what actually happened -->
32 | 
33 | **Steps to reproduce?**
34 | 
35 | 1.
36 | 2.
37 | 3.
38 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Request a new feature or improvement
 4 | labels: new feature
 5 | ---
 6 | 
 7 | ## Feature Request
 8 | 
 9 | **What would you like to be able to do?**
10 | 
11 | <!-- Provide a description of the change or addition you are proposing -->
12 | 
13 | **What problem would it solve?**
14 | 
15 | <!-- Knowing why can help us prioritise and possibly provide simpler alternatives -->
16 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Fixes issue #
2 | 
3 | @build-canaries/owners
4 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock = true
2 | save-exact = true
3 | audit = false
4 | update-notifier = false
5 | fund = false
6 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 23.11.0
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | target
2 | doc/backup*.json
3 | resources/public
4 | 


--------------------------------------------------------------------------------
/.sdkmanrc:
--------------------------------------------------------------------------------
1 | java=23.0.2-zulu
2 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM azul/zulu-openjdk-alpine:23.0.2-jre
 2 | 
 3 | MAINTAINER Build Canaries <team@nevergreen.io>
 4 | 
 5 | RUN adduser -D -g '' nevergreenuser
 6 | 
 7 | USER nevergreenuser
 8 | 
 9 | WORKDIR /home/nevergreenuser
10 | 
11 | COPY target/nevergreen-standalone.jar nevergreen-standalone.jar
12 | 
13 | EXPOSE 5000
14 | 
15 | CMD java \
16 |     --illegal-access=deny \
17 |     -Duser.timezone="UTC" \
18 |     -jar "nevergreen-standalone.jar"
19 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock = true
2 | save-exact = true
3 | audit = false
4 | update-notifier = false
5 | fund = false
6 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/.nvmrc:
--------------------------------------------------------------------------------
1 | 23.11.0
2 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cctray-xml-feed-mock",
 3 |   "version": "0.1.0",
 4 |   "description": "A server that mocks out a CCTray XML feed for testing",
 5 |   "private": true,
 6 |   "author": "Build Canaries",
 7 |   "homepage": "https://github.com/build-canaries/nevergreen",
 8 |   "license": "EPL-2.0",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/build-canaries/nevergreen.git"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/build-canaries/nevergreen/issues"
15 |   },
16 |   "scripts": {
17 |     "start": "node src/server"
18 |   },
19 |   "dependencies": {
20 |     "basic-auth-connect": "1.1.0",
21 |     "express": "4.21.2"
22 |   },
23 |   "devDependencies": {}
24 | }
25 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/resources/cctray.xml:
--------------------------------------------------------------------------------
1 | <Projects>
2 |   <Project name="success-sleeping-project" activity="Sleeping" lastBuildStatus="Success" lastBuildTime="2015-12-09T10:31:10Z" lastBuildLabel="648" webUrl="1"/>
3 |   <Project name="success-building-project" activity="Building" lastBuildStatus="Success" lastBuildTime="2015-12-09T10:31:10Z" lastBuildLabel="1090" webUrl="2"/>
4 |   <Project name="failure_sleeping_project" activity="Sleeping" lastBuildStatus="Failure" lastBuildTime="2015-12-09T10:31:10Z" lastBuildLabel="4729.016bdd45611fc709a88bc2b7bee99c969a8c1377" webUrl="3"/>
5 |   <Project name="failure_building_project" activity="Building" lastBuildStatus="Failure" lastBuildTime="2015-12-09T10:31:10Z" lastBuildLabel="919" webUrl="4"/>
6 |   <random stuff="random-stuff"/>
7 | </Projects>
8 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/resources/circle_ci.xml:
--------------------------------------------------------------------------------
1 | <Projects>
2 |   <Project name="owner/example-service" activity="Sleeping" webUrl="https://circleci.com/gh/owner/example-service/tree/branch" lastBuildStatus="Success" lastBuildLabel="39" lastBuildTime="2016-07-23T10:34:33.757Z"/>
3 | </Projects>
4 | 


--------------------------------------------------------------------------------
/cctray_xml_feed_mock/resources/jenkins.xml:
--------------------------------------------------------------------------------
1 | <Projects>
2 |   <Project webUrl="https://host/view/Example-Service-Pipeline/job/example-service-1/" name="example-service-1" lastBuildLabel="429" lastBuildTime="2015-01-16T14:54:59Z" lastBuildStatus="Success" activity="Sleeping"/>
3 |   <Project webUrl="https://host/view/Example-Service-Pipeline/job/example-service-2/" name="example-service-2" lastBuildLabel="32" lastBuildTime="2015-01-16T14:58:25Z" lastBuildStatus="Success" activity="Sleeping"/>
4 |   <Project webUrl="https://host/view/Example-Service-Pipeline/job/example-service-3/" name="example-service-3" lastBuildLabel="1" lastBuildTime="2015-01-16T15:01:02Z" lastBuildStatus="Success" activity="Sleeping"/>
5 | </Projects>
6 | 


--------------------------------------------------------------------------------
/config/check-prerequisites.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -eo pipefail
 3 | 
 4 | if [ -f ~/.nvm/nvm.sh ]; then
 5 |     echo "nvm.sh found, using to set the correct version of Node"
 6 |     . ~/.nvm/nvm.sh
 7 |     nvm install
 8 |     nvm use
 9 | else
10 |     echo "$HOME/.nvm/nvm.sh file not found, you will need to manually install the correct version of Node. See wiki/contributing for more details."
11 | fi
12 | 
13 | hash node 2>/dev/null || {
14 |     echo >&2 "node command not found, you need to install Node. See wiki/contributing for more details."
15 |     exit 1
16 | }
17 | 
18 | if [ -f ~/.sdkman/bin/sdkman-init.sh ]; then
19 |     echo "sdkman found, using to set the correct version of Java"
20 |     . ~/.sdkman/bin/sdkman-init.sh
21 |     sdk env install
22 | else
23 |   echo "sdkman not found, you will need to manually install the correct version of Java. See wiki/contributing for more details."
24 | fi
25 | 
26 | hash java 2>/dev/null || {
27 |     echo >&2 "java command not found, you need to install Java. See wiki/contributing for more details."
28 |     exit 1
29 | }
30 | 
31 | java -version
32 | 
33 | hash circleci 2>/dev/null || {
34 |     echo "circleci command not found, it's recommended to install. See wiki/contributing for more details."
35 | }
36 | 


--------------------------------------------------------------------------------
/config/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const { merge } = require('webpack-merge')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | const baseConfig = require('./webpack.base.config.js')
 6 | 
 7 | module.exports = merge(baseConfig, {
 8 |   mode: 'development',
 9 |   devtool: 'inline-source-map',
10 |   plugins: [
11 |     new HtmlWebpackPlugin({
12 |       template: './src/client/index.html',
13 |     }),
14 |   ],
15 | })
16 | 


--------------------------------------------------------------------------------
/config/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const { merge } = require('webpack-merge')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | const { GenerateSW } = require('workbox-webpack-plugin')
 5 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 6 | 
 7 | const baseConfig = require('./webpack.base.config.js')
 8 | 
 9 | module.exports = merge(baseConfig, {
10 |   mode: 'production',
11 |   plugins: [
12 |     new HtmlWebpackPlugin({
13 |       template: './src/client/index.html',
14 |       minify: {
15 |         collapseWhitespace: true,
16 |         removeComments: true,
17 |         removeRedundantAttributes: true,
18 |       },
19 |     }),
20 |     new GenerateSW({
21 |       swDest: 'service-worker.js',
22 |       cacheId: 'nevergreen',
23 |       exclude: [/\.map$/],
24 |       clientsClaim: true,
25 |       skipWaiting: true,
26 |       navigateFallback: '/index.html',
27 |       navigateFallbackDenylist: [
28 |         new RegExp('/[^/]+\\.[^/]+$'), // Exclude URLs containing a dot, as they're likely a resource in public
29 |       ],
30 |     }),
31 |   ],
32 |   optimization: {
33 |     minimize: true,
34 |     minimizer: ['...', new CssMinimizerPlugin()],
35 |   },
36 | })
37 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'cypress'
 2 | 
 3 | export default defineConfig({
 4 |   e2e: {
 5 |     baseUrl: 'http://localhost:5000',
 6 |     projectId: 'oc7zg3',
 7 |     reporter: 'junit',
 8 |     reporterOptions: {
 9 |       mochaFile: './target/test-reports/journey/test-results.xml',
10 |     },
11 |     fixturesFolder: false,
12 |     specPattern: './journey/*.cy.ts',
13 |     supportFile: './journey/support.ts',
14 |     videosFolder: './target/test-reports/journey/',
15 |     screenshotsFolder: './target/test-reports/journey/',
16 |     viewportWidth: 1920,
17 |     viewportHeight: 1080,
18 |     env: {
19 |       TRAY_URL: 'http://localhost:5050/secure/cctray.xml',
20 |       TRAY_URL_TOKEN: 'http://localhost:5050/token/cctray.xml',
21 |       TRAY_TOKEN: 'abc123',
22 |       TRAY_USERNAME: 'u',
23 |       TRAY_PASSWORD: 'p',
24 |     },
25 |     blockHosts: ['api.github.com'],
26 |   },
27 | })
28 | 


--------------------------------------------------------------------------------
/develop.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -eo pipefail
 3 | 
 4 | if pgrep -fl pre-push.sh &>/dev/null; then
 5 |   echo -e "\x1B[31mpre-push.sh is running, it needs to finish before you can run develop\x1B[0m"
 6 |   exit 1
 7 | fi
 8 | 
 9 | . ./config/check-prerequisites.sh
10 | 
11 | npm run clean:all
12 | npm run install:all
13 | npm run start:all
14 | 


--------------------------------------------------------------------------------
/doc/screenshot_monitor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/doc/screenshot_monitor.png


--------------------------------------------------------------------------------
/doc/screenshot_monitor_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/doc/screenshot_monitor_mobile.png


--------------------------------------------------------------------------------
/doc/screenshot_monitor_tablet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/doc/screenshot_monitor_tablet.png


--------------------------------------------------------------------------------
/doc/screenshot_tracking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/doc/screenshot_tracking.png


--------------------------------------------------------------------------------
/journey/index.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace Cypress {
2 |   interface Chainable {
3 |     locate(thing: string): Chainable<Element>
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/journey/support.ts:
--------------------------------------------------------------------------------
 1 | import '@testing-library/cypress/add-commands'
 2 | 
 3 | Cypress.Promise.onPossiblyUnhandledRejection((error) => {
 4 |   throw error
 5 | })
 6 | 
 7 | Cypress.Keyboard.defaults({
 8 |   keystrokeDelay: 0,
 9 | })
10 | 
11 | Cypress.Commands.add('locate', (thing: string) => {
12 |   cy.get(`[data-locator=${thing}]`)
13 | })
14 | 
15 | Cypress.on('window:before:load', (win) => {
16 |   win.indexedDB.deleteDatabase('nevergreen')
17 |   // Stop the code from registering the service worker as it messes up the tests
18 |   // @ts-ignore
19 |   // noinspection JSConstantReassignment
20 |   delete win.navigator.__proto__.serviceWorker
21 | })
22 | 


--------------------------------------------------------------------------------
/journey/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.json",
3 |   "compilerOptions": {
4 |     "noEmit": true,
5 |     "types": ["cypress", "@testing-library/cypress"]
6 |   },
7 |   "include": ["./**/*.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/resources/logback.xml:
--------------------------------------------------------------------------------
 1 | <configuration debug="true">
 2 |   <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
 3 |     <encoder>
 4 |       <pattern>%d{"yyyy-MM-dd'T'HH:mm:ss.SSSZ"} [%thread] %-5level %logger{36} - %msg%n</pattern>
 5 |     </encoder>
 6 |   </appender>
 7 | 
 8 |   <logger name="org.eclipse.jetty.util.thread" level="info"/>
 9 |   <logger name="org.eclipse.jetty.http" level="info"/>
10 |   <logger name="org.eclipse.jetty.server" level="info"/>
11 |   <logger name="org.eclipse.jetty.io" level="info"/>
12 |   <logger name="org.apache.http" level="info"/>
13 |   <logger name="org.apache.http.headers" level="info"/>
14 |   <logger name="org.apache.http.wire" level="info"/>
15 | 
16 |   <root level="info">
17 |     <appender-ref ref="STDOUT"/>
18 |   </root>
19 | </configuration>
20 | 


--------------------------------------------------------------------------------
/resources/version.txt:
--------------------------------------------------------------------------------
1 | 7.24.5


--------------------------------------------------------------------------------
/resources/version_meta.txt:
--------------------------------------------------------------------------------
1 | 0.local


--------------------------------------------------------------------------------
/resources/version_name.txt:
--------------------------------------------------------------------------------
1 | Razzmatazz


--------------------------------------------------------------------------------
/src/client/App.tsx:
--------------------------------------------------------------------------------
 1 | import type { RootState } from './configuration/ReduxStore'
 2 | import type { ReactElement } from 'react'
 3 | import { useEffect } from 'react'
 4 | import type { Store } from '@reduxjs/toolkit'
 5 | import type { createBrowserRouter } from 'react-router'
 6 | import { RouterProvider } from 'react-router'
 7 | import { Provider } from 'react-redux'
 8 | import { UnhandledError } from './UnhandledError'
 9 | import Modal from 'react-modal'
10 | import { QueryClientProvider } from '@tanstack/react-query'
11 | import { queryClient } from './queryClient'
12 | 
13 | interface AppProps {
14 |   readonly appElement: string
15 |   readonly store: Store<RootState>
16 |   readonly router: ReturnType<typeof createBrowserRouter>
17 | }
18 | 
19 | export function App({ appElement, store, router }: AppProps): ReactElement {
20 |   useEffect(() => {
21 |     Modal.setAppElement(appElement)
22 |   }, [appElement])
23 | 
24 |   return (
25 |     <UnhandledError>
26 |       <QueryClientProvider client={queryClient}>
27 |         <Provider store={store}>
28 |           <RouterProvider router={router} />
29 |         </Provider>
30 |       </QueryClientProvider>
31 |     </UnhandledError>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/src/client/Banner.test.tsx:
--------------------------------------------------------------------------------
 1 | import { Banner } from './Banner'
 2 | import { render } from './testUtils/testHelpers'
 3 | import noop from 'lodash/noop'
 4 | import { screen } from '@testing-library/react'
 5 | 
 6 | const defaultProps = {
 7 |   message: '',
 8 |   onDismiss: noop,
 9 |   hide: false,
10 | }
11 | 
12 | it('should not render anything if notification is empty', () => {
13 |   const props = { ...defaultProps, message: '' }
14 |   const { container } = render(<Banner {...props} />)
15 |   // eslint-disable-next-line testing-library/no-node-access
16 |   expect(container.firstChild).toBeNull()
17 | })
18 | 
19 | it('should be able to dismiss', async () => {
20 |   const onDismiss = jest.fn()
21 |   const props = { ...defaultProps, message: 'some notification', onDismiss }
22 | 
23 |   const { user } = render(<Banner {...props} />)
24 |   expect(screen.getByText('some notification')).toBeInTheDocument()
25 | 
26 |   await user.click(
27 |     screen.getByRole('button', { name: 'Dismiss info messages' }),
28 |   )
29 |   expect(onDismiss).toHaveBeenCalled()
30 | })
31 | 


--------------------------------------------------------------------------------
/src/client/Banner.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import cn from 'classnames'
 3 | import { Bell } from './common/icons/Bell'
 4 | import { Messages, MessagesType } from './common/Messages'
 5 | import styles from './banner.scss'
 6 | 
 7 | interface BannerProps {
 8 |   readonly message: string
 9 |   readonly onDismiss: () => void
10 |   readonly hide: boolean
11 | }
12 | 
13 | export function Banner({
14 |   message,
15 |   onDismiss,
16 |   hide,
17 | }: BannerProps): ReactElement {
18 |   const notificationClassNames = cn(styles.messages, {
19 |     [styles.hide]: hide,
20 |   })
21 | 
22 |   return (
23 |     <Messages
24 |       className={notificationClassNames}
25 |       type={MessagesType.info}
26 |       messages={message}
27 |       icon={<Bell />}
28 |       onDismiss={onDismiss}
29 |     />
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client/FontMetrics.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, Ref } from 'react'
 2 | import { createContext, useImperativeHandle, useRef } from 'react'
 3 | import styles from './font-metrics.scss'
 4 | 
 5 | export interface Measurable {
 6 |   readonly width: number
 7 |   readonly height: number
 8 | }
 9 | 
10 | export const DEFAULT_FONT_METRICS: Measurable = {
11 |   width: 0,
12 |   height: 0,
13 | }
14 | 
15 | const fontMeasureSize: number = 100 // px
16 | 
17 | export function FontMetrics({ ref }: { ref: Ref<Measurable> }): ReactElement {
18 |   const measureNode = useRef<HTMLSpanElement>(null)
19 | 
20 |   useImperativeHandle(ref, () => {
21 |     const width = measureNode.current?.offsetWidth as number
22 |     const height = measureNode.current?.offsetHeight as number
23 |     return {
24 |       width: width / fontMeasureSize,
25 |       height: height / fontMeasureSize,
26 |     }
27 |   }, [])
28 | 
29 |   return (
30 |     <span
31 |       className={styles.body}
32 |       style={{ fontSize: `${fontMeasureSize.toString()}px` }}
33 |       ref={measureNode}
34 |       aria-hidden
35 |     >
36 |       a
37 |     </span>
38 |   )
39 | }
40 | 
41 | export const FontMetricsContext =
42 |   createContext<Measurable>(DEFAULT_FONT_METRICS)
43 | 


--------------------------------------------------------------------------------
/src/client/HideMenusHook.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect, useRef, useState } from 'react'
 2 | 
 3 | interface HideMenusHookResponse {
 4 |   readonly menusHidden: boolean
 5 |   readonly toggleMenusHidden: (hide: boolean) => void
 6 |   readonly showMenus: () => void
 7 | }
 8 | 
 9 | const fiveSeconds = 5 * 1000
10 | 
11 | export function useHideMenus(): HideMenusHookResponse {
12 |   const timer = useRef(0)
13 |   const [menusHidden, setMenusHidden] = useState(false)
14 |   const [hideMenusRequested, toggleMenusHidden] = useState(false)
15 | 
16 |   const showMenus = useCallback(() => {
17 |     clearTimeout(timer.current)
18 | 
19 |     if (menusHidden) {
20 |       setMenusHidden(false)
21 |     }
22 | 
23 |     if (hideMenusRequested) {
24 |       timer.current = window.setTimeout(() => {
25 |         setMenusHidden(true)
26 |       }, fiveSeconds)
27 |     }
28 |   }, [menusHidden, hideMenusRequested])
29 | 
30 |   useEffect(() => {
31 |     setMenusHidden(hideMenusRequested)
32 |     if (!hideMenusRequested) {
33 |       clearTimeout(timer.current)
34 |     }
35 |   }, [hideMenusRequested])
36 | 
37 |   return { menusHidden, toggleMenusHidden, showMenus }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/client/NavigationShortcutsHook.ts:
--------------------------------------------------------------------------------
 1 | import { useShortcut } from './common/Keyboard'
 2 | import { useNavigate } from 'react-router'
 3 | import { RoutePaths } from './AppRoutes'
 4 | 
 5 | export function useNavigationShortcut(
 6 |   keys: string | string[],
 7 |   route: string,
 8 | ): void {
 9 |   const navigate = useNavigate()
10 |   useShortcut(keys, () => {
11 |     void navigate(route, { replace: true })
12 |   }, [route, navigate])
13 | }
14 | 
15 | export function useNavigationShortcuts(): void {
16 |   useNavigationShortcut(['m', '1'], RoutePaths.monitor)
17 |   useNavigationShortcut([',', 's', '2'], RoutePaths.settings)
18 |   useNavigationShortcut('t', RoutePaths.tracking)
19 |   useNavigationShortcut('v', RoutePaths.success)
20 |   useNavigationShortcut('d', RoutePaths.display)
21 |   useNavigationShortcut('b', RoutePaths.backup)
22 |   useNavigationShortcut('n', RoutePaths.notifications)
23 |   useNavigationShortcut('p', RoutePaths.prognosis)
24 | }
25 | 


--------------------------------------------------------------------------------
/src/client/SkipToContent.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import styles from './skip-to-content.scss'
 3 | import { PrimaryButton } from './common/forms/Button'
 4 | 
 5 | export function SkipToContent(): ReactElement {
 6 |   return (
 7 |     <PrimaryButton
 8 |       onClick={() => {
 9 |         document.getElementsByTagName('h1').item(0)?.focus()
10 |       }}
11 |       className={styles.skipButton}
12 |     >
13 |       Skip to content
14 |     </PrimaryButton>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/src/client/UnhandledError.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactNode } from 'react'
 2 | import { Component } from 'react'
 3 | import { UnhandledErrorMessage } from './UnhandledErrorMessage'
 4 | 
 5 | interface UnhandledErrorProps {
 6 |   readonly children: ReactNode
 7 | }
 8 | 
 9 | interface UnhandledErrorState {
10 |   readonly hasError: boolean
11 | }
12 | 
13 | export class UnhandledError extends Component<
14 |   UnhandledErrorProps,
15 |   UnhandledErrorState
16 | > {
17 |   public constructor(props: UnhandledErrorProps) {
18 |     super(props)
19 |     this.state = { hasError: false }
20 |   }
21 | 
22 |   public componentDidCatch(): void {
23 |     this.setState({ hasError: true })
24 |   }
25 | 
26 |   public render(): ReactNode {
27 |     if (this.state.hasError) {
28 |       return <UnhandledErrorMessage />
29 |     }
30 |     return this.props.children
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/client/banner.scss:
--------------------------------------------------------------------------------
1 | .hide {
2 |   display: none;
3 | }
4 | 
5 | .messages {
6 |   margin: 0;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/common/AspectRatioHook.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { useWindowResized } from './ResizableHook'
 3 | 
 4 | export function useAspectRatio(): string {
 5 |   const [aspectRatio, setAspectRatio] = useState(
 6 |     `${window.innerWidth.toString()} / ${window.innerHeight.toString()}`,
 7 |   )
 8 | 
 9 |   useWindowResized(() => {
10 |     setAspectRatio(
11 |       `${window.innerWidth.toString()} / ${window.innerHeight.toString()}`,
12 |     )
13 |   })
14 | 
15 |   return aspectRatio
16 | }
17 | 


--------------------------------------------------------------------------------
/src/client/common/AudioPlayer.ts:
--------------------------------------------------------------------------------
 1 | const cachedAudio = new Map<string, HTMLAudioElement>()
 2 | 
 3 | function stop(audio?: HTMLAudioElement): void {
 4 |   if (audio) {
 5 |     audio.pause()
 6 |     audio.currentTime = 0
 7 |   }
 8 | }
 9 | 
10 | export function playAudio(
11 |   src: string,
12 |   volume: number,
13 |   onStop?: () => void,
14 | ): Promise<void> {
15 |   const audio = cachedAudio.get(src) ?? new Audio(src)
16 |   audio.volume = volume
17 | 
18 |   cachedAudio.set(src, audio)
19 |   if (onStop) {
20 |     audio.addEventListener('ended', onStop)
21 |     audio.addEventListener('pause', onStop)
22 |   }
23 |   return audio.play()
24 | }
25 | 
26 | export function stopAudio(src: string): void {
27 |   const audio = cachedAudio.get(src)
28 |   stop(audio)
29 | }
30 | 
31 | export function stopAnyPlayingAudio(): void {
32 |   for (const audio of cachedAudio.values()) {
33 |     stop(audio)
34 |   }
35 | }
36 | 
37 | export function anyAudioPlaying(): boolean {
38 |   for (const audio of cachedAudio.values()) {
39 |     if (!audio.paused) {
40 |       return true
41 |     }
42 |   }
43 |   return false
44 | }
45 | 
46 | export function deleteAudio(src: string): void {
47 |   cachedAudio.delete(src)
48 | }
49 | 


--------------------------------------------------------------------------------
/src/client/common/AutoHideMenusHook.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { useNevergreenContext } from '../Nevergreen'
 3 | 
 4 | export function useAutoHideMenus(): boolean {
 5 |   const { menusHidden, toggleMenusHidden } = useNevergreenContext()
 6 | 
 7 |   useEffect(() => {
 8 |     toggleMenusHidden(true)
 9 |     return () => {
10 |       toggleMenusHidden(false)
11 |     }
12 |   }, [toggleMenusHidden])
13 | 
14 |   return menusHidden
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/common/BrowserTitleHook.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import set from 'lodash/set'
 3 | 
 4 | export function useUpdateBrowserTitle(
 5 |   title: string,
 6 |   faviconHref = '/canaries.svg',
 7 | ): void {
 8 |   useEffect(() => {
 9 |     document.title = title
10 |     const favicon = document.querySelector('#favicon')
11 |     if (favicon) {
12 |       set(favicon, 'href', faviconHref)
13 |     }
14 |     return () => {
15 |       document.title = 'Nevergreen'
16 |       if (favicon) {
17 |         set(favicon, 'href', '/canaries.svg')
18 |       }
19 |     }
20 |   }, [title, faviconHref])
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/common/Duration.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render, setSystemTime } from '../testUtils/testHelpers'
 2 | import { Duration } from './Duration'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should display the given prefix and suffix', () => {
 6 |   setSystemTime('2018-02-18T23:38:00Z')
 7 |   const props = {
 8 |     abbreviate: false,
 9 |     timestamp: '2000-12-01T00:00:00Z',
10 |     prefix: 'some prefix',
11 |     suffix: 'some suffix',
12 |   }
13 |   render(<Duration {...props} />)
14 |   expect(
15 |     screen.getByText('some prefix about 17 years some suffix'),
16 |   ).toBeInTheDocument()
17 | })
18 | 


--------------------------------------------------------------------------------
/src/client/common/Duration.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { formatAsDuration } from './DateTime'
 3 | import { isBlank } from './Utils'
 4 | import { useQuery } from '@tanstack/react-query'
 5 | 
 6 | interface DurationProps {
 7 |   readonly timestamp?: string | null
 8 |   readonly prefix?: string
 9 |   readonly suffix?: string
10 | }
11 | 
12 | export function Duration({
13 |   timestamp,
14 |   prefix,
15 |   suffix,
16 | }: DurationProps): ReactElement {
17 |   const { data: duration } = useQuery({
18 |     queryKey: ['duration', timestamp],
19 |     queryFn: () => formatAsDuration(timestamp),
20 |     initialData: formatAsDuration(timestamp),
21 |     staleTime: 59 * 1000,
22 |     refetchInterval: 60 * 1000,
23 |     refetchIntervalInBackground: true,
24 |   })
25 | 
26 |   const fullDescription = [prefix, duration, suffix]
27 |     .filter((text) => !isBlank(text))
28 |     .join(' ')
29 | 
30 |   return <span data-locator="duration">{fullDescription}</span>
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client/common/ExternalLink.test.tsx:
--------------------------------------------------------------------------------
 1 | import { ExternalLink } from './ExternalLink'
 2 | import { render } from '../testUtils/testHelpers'
 3 | import { VISUALLY_HIDDEN_ATTRIBUTE } from './VisuallyHidden'
 4 | import { screen } from '@testing-library/react'
 5 | 
 6 | // https://mathiasbynens.github.io/rel-noopener/
 7 | it('should have the correct target, defend against "reverse tabnabbing" and let screen readers know it opens in a new window', () => {
 8 |   render(<ExternalLink href="irrelevant">child</ExternalLink>)
 9 | 
10 |   const anchor = screen.getByRole('link')
11 |   expect(anchor).toHaveAttribute('target', '_blank')
12 |   expect(anchor).toHaveAttribute('rel', 'noopener noreferrer')
13 |   expect(screen.queryByText('(opens in a new window)')).toHaveAttribute(
14 |     VISUALLY_HIDDEN_ATTRIBUTE,
15 |   )
16 | })
17 | 


--------------------------------------------------------------------------------
/src/client/common/ExternalLink.tsx:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   AnchorHTMLAttributes,
 3 |   DetailedHTMLProps,
 4 |   ReactElement,
 5 |   ReactNode,
 6 | } from 'react'
 7 | import { VisuallyHidden } from './VisuallyHidden'
 8 | 
 9 | type ExternalLinkProps = {
10 |   readonly children: ReactNode
11 |   readonly href: string
12 | } & DetailedHTMLProps<
13 |   AnchorHTMLAttributes<HTMLAnchorElement>,
14 |   HTMLAnchorElement
15 | >
16 | 
17 | export function ExternalLink({
18 |   children,
19 |   ...aProps
20 | }: ExternalLinkProps): ReactElement {
21 |   return (
22 |     <a {...aProps} target="_blank" rel="noopener noreferrer">
23 |       {children}
24 |       <VisuallyHidden> (opens in a new window)</VisuallyHidden>
25 |     </a>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/common/ForceFocusHook.ts:
--------------------------------------------------------------------------------
 1 | import { Ref, useEffect, useRef } from 'react'
 2 | 
 3 | export function useForceFocus<T extends HTMLElement>(
 4 |   focus = true,
 5 |   deps: ReadonlyArray<unknown> = [],
 6 | ): Ref<T> {
 7 |   const el = useRef<T>(null)
 8 | 
 9 |   useEffect(() => {
10 |     if (el.current && focus) {
11 |       el.current.focus()
12 |     }
13 |     // eslint-disable-next-line react-hooks/exhaustive-deps
14 |   }, [focus, ...deps])
15 | 
16 |   return el
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/common/Json.ts:
--------------------------------------------------------------------------------
1 | export function toJson(o: unknown): string {
2 |   return JSON.stringify(o, null, 2)
3 | }
4 | 
5 | export function fromJson(s: string): Record<string, unknown> {
6 |   return JSON.parse(s) as Record<string, unknown>
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/common/Keyboard.ts:
--------------------------------------------------------------------------------
 1 | import Mousetrap, { ExtendedKeyboardEvent } from 'mousetrap'
 2 | import 'mousetrap/plugins/pause/mousetrap-pause'
 3 | import { useCallback, useEffect } from 'react'
 4 | 
 5 | type Callback = (e: ExtendedKeyboardEvent, combo: string) => void
 6 | 
 7 | export function triggerShortcut(keys: string): void {
 8 |   Mousetrap.trigger(keys)
 9 | }
10 | 
11 | export function pauseShortcuts(): void {
12 |   Mousetrap.pause()
13 | }
14 | 
15 | export function unpauseShortcuts(): void {
16 |   Mousetrap.unpause()
17 | }
18 | 
19 | export function useShortcut(
20 |   keys: string | string[],
21 |   callback: Callback,
22 |   deps: ReadonlyArray<unknown> = [],
23 | ): void {
24 |   // eslint-disable-next-line react-hooks/exhaustive-deps
25 |   const memoCallback = useCallback(callback, deps)
26 | 
27 |   useEffect(() => {
28 |     Mousetrap.bind(keys, memoCallback)
29 |     return () => {
30 |       Mousetrap.unbind(keys)
31 |     }
32 |   }, [keys, memoCallback])
33 | }
34 | 


--------------------------------------------------------------------------------
/src/client/common/LinkButton.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { Link, LinkProps } from 'react-router'
 3 | import cn from 'classnames'
 4 | import styles from './link-button.scss'
 5 | 
 6 | export interface LinkButtonProps extends LinkProps {
 7 |   readonly icon?: ReactElement
 8 | }
 9 | 
10 | export function LinkButton({
11 |   className,
12 |   icon,
13 |   children,
14 |   ...props
15 | }: LinkButtonProps): ReactElement {
16 |   return (
17 |     <Link className={cn(styles.linkButton, className)} {...props}>
18 |       {icon}
19 |       {children}
20 |     </Link>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/src/client/common/Loading.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '../testUtils/testHelpers'
 2 | import { Loading } from './Loading'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should render progress but not children if not loaded', () => {
 6 |   render(
 7 |     <Loading isLoading title="">
 8 |       <div>content</div>
 9 |     </Loading>,
10 |   )
11 |   expect(screen.queryByText('content')).not.toBeInTheDocument()
12 |   expect(screen.getByRole('progressbar')).toBeInTheDocument()
13 | })
14 | 
15 | it('should still render progress so focus does not get reset as well as children when loaded', () => {
16 |   render(
17 |     <Loading isLoading={false} title="">
18 |       <div>content</div>
19 |     </Loading>,
20 |   )
21 |   expect(screen.getByText('content')).toBeInTheDocument()
22 |   expect(screen.getByRole('progressbar')).toBeInTheDocument()
23 | })
24 | 
25 | it('should allow getting focus for more accessible loading feedback', () => {
26 |   render(
27 |     <Loading focus isLoading title="">
28 |       <div>content</div>
29 |     </Loading>,
30 |   )
31 |   expect(screen.getByRole('progressbar')).toHaveFocus()
32 | })
33 | 


--------------------------------------------------------------------------------
/src/client/common/Main.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import styles from './main.scss'
 3 | 
 4 | interface MainProps {
 5 |   readonly children: ReactNode
 6 | }
 7 | 
 8 | export function Main({ children }: MainProps): ReactElement {
 9 |   return (
10 |     <main className={styles.main} role="main">
11 |       {children}
12 |     </main>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/src/client/common/Style.ts:
--------------------------------------------------------------------------------
 1 | // These need to match those in src/client/common/responsive.scss
 2 | const tabletBreakpoint = 768 // px
 3 | const desktopBreakpoint = 1440 // px
 4 | 
 5 | export function isMobile(width = window.innerWidth): boolean {
 6 |   return width < tabletBreakpoint
 7 | }
 8 | 
 9 | export function isTablet(width = window.innerWidth): boolean {
10 |   return width >= tabletBreakpoint && width < desktopBreakpoint
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/common/SuccessImage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { useAppSelector } from '../configuration/Hooks'
 3 | import {
 4 |   getSuccessBackgroundColour,
 5 |   getSuccessTextColour,
 6 | } from '../settings/success/SuccessReducer'
 7 | import { useAspectRatio } from './AspectRatioHook'
 8 | import styles from './success-image.scss'
 9 | 
10 | interface SuccessImageProps {
11 |   readonly url: string
12 | }
13 | 
14 | export function SuccessImage({ url }: SuccessImageProps): ReactElement {
15 |   const backgroundColor = useAppSelector(getSuccessBackgroundColour)
16 |   const color = useAppSelector(getSuccessTextColour)
17 |   const aspectRatio = useAspectRatio()
18 | 
19 |   return (
20 |     <div style={{ color, backgroundColor }}>
21 |       <img
22 |         src={url}
23 |         className={styles.image}
24 |         alt="success"
25 |         style={{ aspectRatio }}
26 |       />
27 |     </div>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/client/common/SuccessMessage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { ScaleText } from './ScaleText'
 3 | import { useAppSelector } from '../configuration/Hooks'
 4 | import {
 5 |   getSuccessBackgroundColour,
 6 |   getSuccessTextColour,
 7 | } from '../settings/success/SuccessReducer'
 8 | import styles from './success-message.scss'
 9 | 
10 | interface SuccessMessageProps {
11 |   readonly message: string
12 | }
13 | 
14 | export function SuccessMessage({ message }: SuccessMessageProps): ReactElement {
15 |   const backgroundColor = useAppSelector(getSuccessBackgroundColour)
16 |   const color = useAppSelector(getSuccessTextColour)
17 | 
18 |   return (
19 |     <div className={styles.successMessage} style={{ backgroundColor, color }}>
20 |       <ScaleText sentences={[message]}>{message}</ScaleText>
21 |     </div>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/src/client/common/Summary.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen } from '@testing-library/react'
 2 | import { render } from '../testUtils/testHelpers'
 3 | import { Summary } from './Summary'
 4 | 
 5 | it('should filter out null values', () => {
 6 |   const values = [{ label: 'label', value: null }]
 7 |   render(<Summary values={values} />)
 8 |   expect(screen.queryByText('label')).not.toBeInTheDocument()
 9 | })
10 | 


--------------------------------------------------------------------------------
/src/client/common/Summary.tsx:
--------------------------------------------------------------------------------
 1 | import type { DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react'
 2 | import cn from 'classnames'
 3 | import styles from './summary.scss'
 4 | 
 5 | export interface SummaryValues {
 6 |   readonly label: string
 7 |   readonly value: ReactElement | string | null
 8 | }
 9 | 
10 | export interface SummaryProps
11 |   extends DetailedHTMLProps<
12 |     HTMLAttributes<HTMLDListElement>,
13 |     HTMLDListElement
14 |   > {
15 |   readonly values: ReadonlyArray<SummaryValues>
16 | }
17 | 
18 | export function Summary({
19 |   values,
20 |   className,
21 |   ...props
22 | }: SummaryProps): ReactElement {
23 |   return (
24 |     <dl className={cn(styles.summaryList, className)} {...props}>
25 |       {values
26 |         .filter(({ value }) => value !== null)
27 |         .map(({ label, value }) => {
28 |           return (
29 |             <div className={styles.summaryListRow} key={label}>
30 |               <dt className={styles.key}>{label}</dt>
31 |               <dd className={styles.value} aria-label={label}>
32 |                 {value}
33 |               </dd>
34 |             </div>
35 |           )
36 |         })}
37 |     </dl>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/src/client/common/Timed.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactElement, useRef } from 'react'
 2 | import { useEffect, useState } from 'react'
 3 | import { CSSTransition } from 'react-transition-group'
 4 | import styles from './timed.scss'
 5 | 
 6 | interface TimedProps {
 7 |   readonly show: boolean
 8 |   readonly onTimeout: () => void
 9 |   readonly children: ReactElement
10 |   readonly timeout?: number
11 | }
12 | 
13 | export function Timed({
14 |   show,
15 |   onTimeout,
16 |   children,
17 |   timeout = 20000,
18 | }: TimedProps): ReactElement {
19 |   const [showing, setShowing] = useState(show)
20 |   useEffect(() => {
21 |     setShowing(show)
22 |   }, [show])
23 |   const nodeRef = useRef(null)
24 | 
25 |   return (
26 |     <CSSTransition
27 |       in={showing}
28 |       timeout={300}
29 |       classNames={{ ...styles }}
30 |       onExited={onTimeout}
31 |       mountOnEnter
32 |       unmountOnExit
33 |       nodeRef={nodeRef}
34 |     >
35 |       <div
36 |         className={styles.progress}
37 |         style={{ animationDuration: `${timeout.toString()}ms` }}
38 |         onAnimationEnd={() => {
39 |           setShowing(false)
40 |         }}
41 |       >
42 |         {children}
43 |       </div>
44 |     </CSSTransition>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/src/client/common/Title.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '../testUtils/testHelpers'
 2 | import { Title } from './Title'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should set the document title', () => {
 6 |   const { unmount } = render(<Title>some-title</Title>)
 7 |   expect(document).toHaveProperty('title', 'some-title')
 8 |   unmount()
 9 |   expect(document).toHaveProperty('title', 'Nevergreen')
10 | })
11 | 
12 | it('should focus so keyboard users can start tabbing directly into the page and it also makes screen readers announce the title', () => {
13 |   render(<Title focus>some-title</Title>)
14 |   const title = screen.getByRole('heading')
15 |   expect(title).toHaveFocus()
16 |   expect(title).toHaveProperty('tabIndex', -1) // make sure not part of the normal tab flow
17 | })
18 | 
19 | it('should allow to not force focus', () => {
20 |   render(<Title focus={false}>some-title</Title>)
21 |   expect(screen.getByRole('heading')).not.toHaveFocus()
22 | })
23 | 


--------------------------------------------------------------------------------
/src/client/common/Title.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { VisuallyHidden } from './VisuallyHidden'
 3 | import { useForceFocus } from './ForceFocusHook'
 4 | import { useUpdateBrowserTitle } from './BrowserTitleHook'
 5 | 
 6 | interface TitleProps {
 7 |   readonly children: string
 8 |   readonly show?: boolean
 9 |   readonly icon?: ReactElement
10 |   readonly focus?: boolean
11 | }
12 | 
13 | export function Title({
14 |   show = false,
15 |   children,
16 |   icon,
17 |   focus,
18 | }: TitleProps): ReactElement {
19 |   const titleEl = useForceFocus<HTMLHeadingElement>(focus)
20 | 
21 |   useUpdateBrowserTitle(children)
22 | 
23 |   const title = (
24 |     <h1 ref={titleEl} tabIndex={-1}>
25 |       {icon}
26 |       {children}
27 |     </h1>
28 |   )
29 | 
30 |   if (show) {
31 |     return title
32 |   } else {
33 |     return <VisuallyHidden>{title}</VisuallyHidden>
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/client/common/Types.ts:
--------------------------------------------------------------------------------
1 | // From https://stackoverflow.com/a/51365037
2 | export type RecursivePartial<T> = {
3 |   [P in keyof T]?: T[P] extends (infer U)[]
4 |     ? RecursivePartial<U>[]
5 |     : T[P] extends object
6 |       ? RecursivePartial<T[P]>
7 |       : T[P]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/common/VisuallyHidden.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import styles from './visually-hidden.scss'
 3 | 
 4 | interface VisuallyHiddenProps {
 5 |   readonly children: ReactNode
 6 | }
 7 | 
 8 | export const VISUALLY_HIDDEN_ATTRIBUTE = 'data-visually-hidden'
 9 | 
10 | export function VisuallyHidden({
11 |   children,
12 | }: VisuallyHiddenProps): ReactElement {
13 |   const hiddenAttribute = { [VISUALLY_HIDDEN_ATTRIBUTE]: true }
14 |   return (
15 |     <span className={styles.content} {...hiddenAttribute}>
16 |       {children}
17 |     </span>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/src/client/common/_colours.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:color';
 2 | 
 3 | $black: black;
 4 | $off-black: #212121;
 5 | $white: #fff;
 6 | $off-white: #fffed7;
 7 | $light-grey: #bbb;
 8 | $mid-grey: #797676;
 9 | $blue: #0279c4;
10 | $yellow: #fdc626;
11 | $sick: #b30400;
12 | $error: #de3535;
13 | $outline: #fecf49;
14 | $version-color: #e3256b;
15 | 
16 | // Decorations
17 | 
18 | $shadow: 0 2px 5px color.adjust($black, $alpha: -0.74);
19 | $color-change-percentage: 9%;
20 | $input-border: 1px solid $light-grey;
21 | $border-radius: 2px;
22 | 


--------------------------------------------------------------------------------
/src/client/common/_layout.scss:
--------------------------------------------------------------------------------
 1 | @use 'responsive';
 2 | 
 3 | // Sizes
 4 | $spacing-height: 2em;
 5 | $spacing-width: 1em;
 6 | $max-page-width: 1280px;
 7 | $outline-size: 5px;
 8 | 
 9 | // Cards
10 | $card-header-padding: 0.75rem;
11 | 
12 | // Z Index
13 | $header-footer-index: 100;
14 | $focus-index: 1000;
15 | $model-index: 9999;
16 | 
17 | @mixin fixed-width($width) {
18 |   @include responsive.respond-to(tablet, desktop) {
19 |     width: $width;
20 |   }
21 | }
22 | 
23 | @mixin fill-parent {
24 |   display: block;
25 |   height: 100%;
26 |   width: 100%;
27 | }
28 | 
29 | @mixin blocking($margin-top: $spacing-height) {
30 |   @include responsive.respond-to(tablet, desktop) {
31 |     display: block;
32 |     margin: $margin-top 0 0 0;
33 |   }
34 | }
35 | 
36 | @mixin grid($mobile-columns: 1, $tablet-columns: 2, $desktop-columns: 3) {
37 |   display: grid;
38 |   gap: 1em;
39 |   grid-template-columns: repeat($mobile-columns, minmax(0, 1fr));
40 | 
41 |   @include responsive.respond-to(tablet) {
42 |     grid-template-columns: repeat($tablet-columns, minmax(0, 1fr));
43 |   }
44 | 
45 |   @include responsive.respond-to(desktop) {
46 |     grid-template-columns: repeat($desktop-columns, minmax(0, 1fr));
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/client/common/_links.scss:
--------------------------------------------------------------------------------
 1 | @use 'accessibility';
 2 | @use 'colours';
 3 | 
 4 | @mixin link(
 5 |   $color: colours.$blue,
 6 |   $visited-color: colours.$blue,
 7 |   $interactive-color: colours.$black,
 8 |   $interactive-background-color: colours.$white
 9 | ) {
10 |   background: none;
11 |   border: none;
12 |   color: $color;
13 |   margin: 0;
14 |   padding: 0;
15 | 
16 |   &:visited {
17 |     color: $visited-color;
18 |   }
19 | 
20 |   @include accessibility.interactive(
21 |     $color: $interactive-color,
22 |     $background-color: $interactive-background-color,
23 |     $border-color: transparent,
24 |     $hover-color-change-percentage: 0%,
25 |     $focus-color-change-percentage: 0%
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/common/_typography.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:math';
 2 | 
 3 | $normal-font: roboto, sans-serif;
 4 | $monospace-font:
 5 |   roboto mono,
 6 |   monospace;
 7 | 
 8 | @mixin font-scale($value) {
 9 |   // 1.2 = minor third
10 |   font-size: #{math.pow(1.2, $value)}rem;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/common/card/Card.tsx:
--------------------------------------------------------------------------------
 1 | import type { CSSProperties, ReactElement } from 'react'
 2 | import cn from 'classnames'
 3 | import styles from './card.scss'
 4 | 
 5 | interface CardProps {
 6 |   readonly header: ReactElement
 7 |   readonly children: string | ReactElement | ReadonlyArray<ReactElement>
 8 |   readonly className?: string
 9 |   readonly classNameBody?: string
10 |   readonly classNameHeader?: string
11 |   readonly styleHeader?: CSSProperties
12 | }
13 | 
14 | export function Card({
15 |   header,
16 |   children,
17 |   className,
18 |   classNameBody,
19 |   classNameHeader,
20 |   styleHeader,
21 | }: CardProps): ReactElement {
22 |   return (
23 |     <section className={cn(styles.card, className)}>
24 |       <div className={cn(styles.header, classNameHeader)} style={styleHeader}>
25 |         {header}
26 |       </div>
27 |       <div className={cn(styles.body, classNameBody)}>{children}</div>
28 |     </section>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/src/client/common/card/CardHeading.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { DangerButton } from '../forms/Button'
 3 | import { Bin } from '../icons/Bin'
 4 | import styles from './card-heading.scss'
 5 | 
 6 | interface CardHeadingProps {
 7 |   readonly icon?: ReactElement
 8 |   readonly title: ReactElement | string
 9 |   readonly onRemove?: () => void
10 | }
11 | 
12 | export function CardHeading({
13 |   icon,
14 |   title,
15 |   onRemove,
16 | }: CardHeadingProps): ReactElement {
17 |   return (
18 |     <>
19 |       {icon && <div className={styles.icon}>{icon}</div>}
20 |       <h2 className={styles.title}>{title}</h2>
21 |       {onRemove && (
22 |         <DangerButton onClick={onRemove} icon={<Bin />} iconOnly>
23 |           Remove {title}
24 |         </DangerButton>
25 |       )}
26 |     </>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/client/common/card/CardList.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import { Children } from 'react'
 3 | import styles from './card-list.scss'
 4 | 
 5 | interface CardListProps {
 6 |   readonly children: ReactNode
 7 | }
 8 | 
 9 | export function CardList({ children }: CardListProps): ReactElement {
10 |   return (
11 |     <ul className={styles.container}>
12 |       {Children.map(children, (child) => {
13 |         return <li>{child}</li>
14 |       })}
15 |     </ul>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/common/card/card-heading.scss:
--------------------------------------------------------------------------------
 1 | @use '../layout';
 2 | @use '../typography';
 3 | @use '../responsive';
 4 | 
 5 | .icon {
 6 |   @include typography.font-scale(2);
 7 | 
 8 |   display: flex;
 9 | 
10 |   @include responsive.respond-to(very-small) {
11 |     display: none;
12 |   }
13 | }
14 | 
15 | .title {
16 |   flex-grow: 1;
17 |   margin: 0 layout.$spacing-width 0 0;
18 |   overflow: hidden;
19 |   text-overflow: ellipsis;
20 |   white-space: nowrap;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/common/card/card-list.scss:
--------------------------------------------------------------------------------
1 | .container {
2 |   list-style: none;
3 |   margin: 0;
4 | 
5 |   & > li:first-child > *:first-child {
6 |     margin: 0;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/common/card/card.scss:
--------------------------------------------------------------------------------
 1 | @use '../colours';
 2 | @use '../layout';
 3 | 
 4 | .card {
 5 |   border: 1px solid colours.$mid-grey;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   margin: layout.$spacing-height 0 0 0;
 9 |   width: 100%;
10 | 
11 |   &:focus-within {
12 |     border-color: colours.$black;
13 |   }
14 | }
15 | 
16 | .header {
17 |   align-items: center;
18 |   background-color: #ececec;
19 |   display: flex;
20 |   padding: layout.$card-header-padding;
21 | }
22 | 
23 | .body {
24 |   padding: 1em;
25 | 
26 |   & > *:first-child {
27 |     margin-top: 0;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-700/Roboto-700.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-700/Roboto-700.ttf


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-700/Roboto-700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-700/Roboto-700.woff


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-700/Roboto-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-700/Roboto-700.woff2


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.ttf


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.woff


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-Mono-regular/Roboto-Mono-regular.woff2


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-regular/Roboto-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-regular/Roboto-regular.ttf


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-regular/Roboto-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-regular/Roboto-regular.woff


--------------------------------------------------------------------------------
/src/client/common/fonts/Roboto-regular/Roboto-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/fonts/Roboto-regular/Roboto-regular.woff2


--------------------------------------------------------------------------------
/src/client/common/forms/Button.test.tsx:
--------------------------------------------------------------------------------
1 | import { PrimaryButton } from './Button'
2 | import { render } from '../../testUtils/testHelpers'
3 | import { screen } from '@testing-library/react'
4 | 
5 | it('should explicitly set the type as the default is "submit"', () => {
6 |   render(<PrimaryButton>label</PrimaryButton>)
7 |   expect(screen.getByText('label')).toHaveAttribute('type', 'button')
8 | })
9 | 


--------------------------------------------------------------------------------
/src/client/common/forms/ColourPicker.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import type { InputProps } from './Input'
 3 | import { Input } from './Input'
 4 | import styles from './colour-picker.scss'
 5 | 
 6 | export function ColourPicker({
 7 |   children,
 8 |   value,
 9 |   ...props
10 | }: Omit<InputProps, 'type' | 'classNameInput'>): ReactElement {
11 |   return (
12 |     <Input
13 |       value={value}
14 |       classNameInput={styles.textInput}
15 |       classNameContainer={styles.textContainer}
16 |       {...props}
17 |       button={
18 |         <Input
19 |           type="color"
20 |           classNameInput={styles.colorInput}
21 |           classNameContainer={styles.colorContainer}
22 |           value={value}
23 |           {...props}
24 |         >
25 |           <span />
26 |         </Input>
27 |       }
28 |     >
29 |       {children}
30 |     </Input>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/client/common/forms/DropDown.test.tsx:
--------------------------------------------------------------------------------
 1 | import { DropDown } from './DropDown'
 2 | import { render } from '../../testUtils/testHelpers'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should add all the given options', () => {
 6 |   const options = [
 7 |     { value: 'a', display: 'A' },
 8 |     { value: 'b', display: 'B' },
 9 |     { value: 'c', display: 'C' },
10 |   ]
11 |   render(<DropDown options={options}>label</DropDown>)
12 |   expect(screen.getByText('A')).toBeInTheDocument()
13 |   expect(screen.getByText('B')).toBeInTheDocument()
14 |   expect(screen.getByText('C')).toBeInTheDocument()
15 | })
16 | 


--------------------------------------------------------------------------------
/src/client/common/forms/Group.tsx:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   DetailedHTMLProps,
 3 |   InputHTMLAttributes,
 4 |   ReactElement,
 5 | } from 'react'
 6 | import cn from 'classnames'
 7 | import styles from './group.scss'
 8 | 
 9 | interface GroupProps
10 |   extends DetailedHTMLProps<
11 |     InputHTMLAttributes<HTMLFieldSetElement>,
12 |     HTMLFieldSetElement
13 |   > {
14 |   readonly title: string
15 | }
16 | 
17 | export function Group({
18 |   title,
19 |   children,
20 |   className,
21 |   ...props
22 | }: GroupProps): ReactElement {
23 |   return (
24 |     <fieldset className={cn(styles.container, className)} {...props}>
25 |       <legend>{title}</legend>
26 |       <div className={styles.children}>{children}</div>
27 |     </fieldset>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/client/common/forms/Input.test.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from './Input'
 2 | import { render } from '../../testUtils/testHelpers'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should apply the read only attribute and display an icon', () => {
 6 |   const props = { readOnly: true }
 7 |   render(<Input {...props}>label</Input>)
 8 |   expect(screen.getByRole('textbox')).toHaveAttribute('readOnly')
 9 |   expect(screen.getByText('read only')).toBeInTheDocument()
10 | })
11 | 
12 | it('should display given error message', () => {
13 |   const props = { error: 'some validation error' }
14 |   render(<Input {...props}>label</Input>)
15 |   expect(screen.getByText('some validation error')).toBeInTheDocument()
16 | })
17 | 


--------------------------------------------------------------------------------
/src/client/common/forms/Password.test.tsx:
--------------------------------------------------------------------------------
 1 | import { Password } from './Password'
 2 | import { render } from '../../testUtils/testHelpers'
 3 | import { screen } from '@testing-library/react'
 4 | 
 5 | it('should allow the password to be shown', async () => {
 6 |   const { user } = render(<Password>label</Password>)
 7 |   expect(screen.getByLabelText('label')).toHaveAttribute('type', 'password')
 8 |   await user.click(screen.getByRole('button', { name: 'show password' }))
 9 |   expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text')
10 | })
11 | 


--------------------------------------------------------------------------------
/src/client/common/forms/Slider.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import type { InputProps } from './Input'
 3 | import { Input } from './Input'
 4 | import styles from './slider.scss'
 5 | 
 6 | export function Slider({
 7 |   children,
 8 |   ...props
 9 | }: Omit<InputProps, 'type' | 'classNameInput'>): ReactElement {
10 |   return (
11 |     <Input {...props} type="range" classNameInput={styles.slider}>
12 |       {children}
13 |     </Input>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/common/forms/Validation.ts:
--------------------------------------------------------------------------------
 1 | export type FormErrors<Fields extends string> = Array<{
 2 |   readonly field: Fields
 3 |   readonly message: string
 4 | }>
 5 | 
 6 | export function firstError<Fields extends string>(
 7 |   field: Fields,
 8 |   errors: Readonly<FormErrors<Fields>>,
 9 | ): string {
10 |   return errors.find((e) => e.field === field)?.message ?? ''
11 | }
12 | 
13 | export function allErrors<Fields extends string>(
14 |   field: Fields,
15 |   errors: Readonly<FormErrors<Fields>>,
16 | ): ReadonlyArray<string> {
17 |   return errors.filter((e) => e.field === field).map((e) => e.message)
18 | }
19 | 


--------------------------------------------------------------------------------
/src/client/common/forms/_forms.scss:
--------------------------------------------------------------------------------
 1 | @use '../colours';
 2 | @use '../responsive';
 3 | @use '../layout';
 4 | 
 5 | $standard-input-size-mobile: 40px;
 6 | $standard-input-size-above-mobile: 44px;
 7 | 
 8 | @mixin standard-input-dimensions($fix-width: false, $adjust-px: 0) {
 9 |   height: $standard-input-size-mobile - $adjust-px;
10 |   min-height: $standard-input-size-mobile - $adjust-px;
11 | 
12 |   @if $fix-width {
13 |     min-width: $standard-input-size-mobile - $adjust-px;
14 |     width: $standard-input-size-mobile - $adjust-px;
15 |   }
16 | 
17 |   @include responsive.respond-to(tablet, desktop) {
18 |     height: $standard-input-size-above-mobile - $adjust-px;
19 |     min-height: $standard-input-size-above-mobile - $adjust-px;
20 | 
21 |     @if $fix-width {
22 |       min-width: $standard-input-size-above-mobile - $adjust-px;
23 |       width: $standard-input-size-above-mobile - $adjust-px;
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/client/common/forms/colour-picker.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/accessibility';
 2 | @use '../../common/typography';
 3 | @use '../../common/colours';
 4 | @use '../../common/responsive';
 5 | @use '../../common/layout';
 6 | @use 'forms';
 7 | @use 'sass:color';
 8 | 
 9 | .textContainer {
10 |   width: fit-content;
11 | }
12 | 
13 | .textInput {
14 |   font-family: typography.$monospace-font;
15 |   width: 6em;
16 | }
17 | 
18 | .colorContainer {
19 |   margin-top: 0;
20 |   width: auto;
21 | }
22 | 
23 | .colorInput {
24 |   border: colours.$input-border;
25 |   border-radius: 0 colours.$border-radius colours.$border-radius 0;
26 |   flex-grow: unset;
27 |   padding: 0;
28 | 
29 |   @include forms.standard-input-dimensions($fix-width: true);
30 | 
31 |   &::-webkit-color-swatch-wrapper {
32 |     padding: 0;
33 |   }
34 | 
35 |   &::-webkit-color-swatch {
36 |     border: 0;
37 |   }
38 | 
39 |   &:enabled {
40 |     @include accessibility.interactive($focus-color-change-percentage: 0%) {
41 |       box-shadow: 0 4px 8px 0 color.adjust(colours.$black, $alpha: -0.74);
42 |     }
43 |   }
44 | }
45 | 
46 | span:has(> .colorInput) {
47 |   height: 0;
48 |   margin: 0;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/client/common/forms/drop-down.scss:
--------------------------------------------------------------------------------
 1 | @use 'forms';
 2 | @use '../layout';
 3 | @use '../colours';
 4 | @use '../accessibility';
 5 | 
 6 | .inputContainer {
 7 |   margin-top: layout.$spacing-height;
 8 |   min-width: 1em;
 9 |   width: 100%;
10 | }
11 | 
12 | .inputLabel {
13 |   display: block;
14 | }
15 | 
16 | // based on https://moderncss.dev/custom-select-styles-with-pure-css/
17 | 
18 | .container {
19 |   align-items: center;
20 |   background-color: colours.$white;
21 |   display: grid;
22 |   flex-grow: 1;
23 |   grid-template-areas: 'select';
24 |   margin-top: 0.5em;
25 |   width: 100%;
26 | 
27 |   &::after {
28 |     background-color: colours.$off-black;
29 |     clip-path: polygon(100% 0%, 0 0%, 50% 100%);
30 |     content: '';
31 |     grid-area: select;
32 |     height: 0.5em;
33 |     justify-self: end;
34 |     margin-right: 0.5em;
35 |     width: 0.8em;
36 |   }
37 | }
38 | 
39 | .select {
40 |   appearance: none;
41 |   background-color: transparent;
42 |   border: colours.$input-border;
43 |   border-radius: 2px;
44 |   grid-area: select;
45 |   padding: 0.5em 1.5em 0.5em 0.5em;
46 |   text-overflow: ellipsis;
47 | 
48 |   @include forms.standard-input-dimensions;
49 | 
50 |   &:not(:disabled) {
51 |     @include accessibility.interactive($focus-color-change-percentage: 0%);
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/client/common/forms/form.scss:
--------------------------------------------------------------------------------
 1 | @use '../colours';
 2 | @use '../responsive';
 3 | @use '../layout';
 4 | 
 5 | .form {
 6 |   background-color: colours.$white;
 7 | 
 8 |   @include responsive.respond-to(very-small) {
 9 |     overflow: scroll;
10 |   }
11 | }
12 | 
13 | .formErrors {
14 |   margin: 0 0 layout.$spacing-height 0;
15 | }
16 | 
17 | .submitButton {
18 |   margin: layout.$spacing-height 0 0 0;
19 | 
20 |   @include responsive.respond-to(tablet, desktop) {
21 |     margin: layout.$spacing-height layout.$spacing-width 0 0;
22 |   }
23 | }
24 | 
25 | .cancelButton {
26 |   margin: layout.$spacing-height 0 0 0;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/common/forms/group.scss:
--------------------------------------------------------------------------------
 1 | @use '../colours';
 2 | @use '../layout';
 3 | @use '../accessibility';
 4 | 
 5 | .container {
 6 |   border: none;
 7 | }
 8 | 
 9 | .children {
10 |   margin: 1em 0 0;
11 | 
12 |   & *:first-child {
13 |     margin-top: 0;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/common/icons/AidKit.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function AidKit(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M28 8h-6V4c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v4H4c-2.2 0-4 1.8-4 4v16c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4V12c0-2.2-1.8-4-4-4zM12 4h8v4h-8V4zm12 18h-6v6h-4v-6H8v-4h6v-6h4v6h6v4z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/ArrowLeft.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function ArrowLeft(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="m12.586 27.414-10-10a2 2 0 0 1 0-2.828l10-10a2 2 0 1 1 2.828 2.828L8.828 14H28a2 2 0 1 1 0 4H8.828l6.586 6.586c.39.39.586.902.586 1.414s-.195 1.024-.586 1.414a2 2 0 0 1-2.828 0z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/ArrowUp.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function ArrowUp(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="m27.414 12.586-10-10a2 2 0 0 0-2.828 0l-10 10a2 2 0 1 0 2.828 2.828L14 8.828V28a2 2 0 1 0 4 0V8.828l6.586 6.586c.39.39.902.586 1.414.586s1.024-.195 1.414-.586a2 2 0 0 0 0-2.828z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Bell.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Bell(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M32.047 25c0-9-8-7-8-14 0-.58-.056-1.076-.158-1.498-.526-3.532-2.88-6.366-5.93-7.23.027-.123.041-.251.041-.382 0-1.04-.9-1.891-2-1.891S14 .85 14 1.89c0 .131.014.258.041.382-3.421.969-5.966 4.416-6.039 8.545L8 11c0 7-8 5-8 14 0 2.382 5.331 4.375 12.468 4.878a3.998 3.998 0 007.064 0C26.669 29.375 32 27.383 32 25l-.001-.021.048.021zm-6.227 1.691c-1.695.452-3.692.777-5.837.958a4 4 0 00-7.968 0c-2.144-.18-4.142-.506-5.837-.958-2.332-.622-3.447-1.318-3.855-1.691.408-.372 1.523-1.068 3.855-1.691 2.712-.724 6.199-1.122 9.82-1.122s7.109.398 9.82 1.122c2.332.622 3.447 1.318 3.855 1.691-.408.372-1.523 1.068-3.855 1.691z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Bin.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Bin(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M4 10v20c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10H4zm6 18H8V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zM26.5 4H20V1.5c0-.825-.675-1.5-1.5-1.5h-7c-.825 0-1.5.675-1.5 1.5V4H3.5C2.675 4 2 4.675 2 5.5V8h26V5.5c0-.825-.675-1.5-1.5-1.5zM18 4h-6V2.025h6V4z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/CheckboxChecked.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function CheckboxChecked(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M28 0H4C1.8 0 0 1.8 0 4v24c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zM14 24.828l-7.414-7.414 2.828-2.828L14 19.172l9.586-9.586 2.828 2.828L14 24.828z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/CheckboxUnchecked.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function CheckboxUnchecked(
 5 |   props: SVGProps<SVGSVGElement>,
 6 | ): ReactElement {
 7 |   return (
 8 |     <Icon {...props}>
 9 |       <path
10 |         fill="#444"
11 |         d="M28 0H4C1.8 0 0 1.8 0 4v24c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm0 28H4V4h24v24z"
12 |       />
13 |     </Icon>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Checkmark.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Checkmark(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path fill="#444" d="M27 4L12 19l-7-7-5 5 12 12L32 9z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/CircleCi.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function CircleCi(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M11.951 16a3.806 3.806 0 013.807-3.807A3.817 3.817 0 0119.566 16a3.817 3.817 0 01-3.808 3.808A3.818 3.818 0 0111.951 16zm3.806-16C8.286 0 2.029 5.12.253 12.033c-.013.048-.013.093-.013.16 0 .417.336.768.767.768h6.447a.734.734 0 00.689-.444c1.329-2.88 4.24-4.896 7.616-4.896 4.621 0 8.381 3.76 8.381 8.383 0 4.627-3.76 8.387-8.387 8.387-3.373 0-6.285-2-7.613-4.897-.129-.253-.387-.448-.689-.448H1.007a.768.768 0 00-.767.768c0 .049.019.096.019.16 1.76 6.907 8.027 12.027 15.499 12.027 8.832 0 16-7.167 16-16 0-8.831-7.168-16-16-16z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Clock.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Clock(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M20.586 23.414L14 16.828V8h4v7.172l5.414 5.414zM16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 28C9.373 28 4 22.627 4 16S9.373 4 16 4s12 5.373 12 12-5.373 12-12 12z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/CloudDownload.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function CloudDownload(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M27.844 11.252A7.438 7.438 0 0020.411 4a7.42 7.42 0 00-5.839 2.835 4.168 4.168 0 00-3.303-1.624 4.177 4.177 0 00-4.133 4.771 6.056 6.056 0 00-7.134 5.96A6.056 6.056 0 006.056 22h2.868l7.078 7.328L23.08 22h3.484a5.45 5.45 0 001.282-10.747zM16 26l-6-6h4v-6h4v6h4l-6 6z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/CloudUpload.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function CloudUpload(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M27.883 12.078a5 5 0 00-6.168-5.911 6.003 6.003 0 00-11.475.151A8 8 0 108 22h4v6h8v-6h7a5 5 0 00.883-9.922zM18 20v6h-4v-6H9l7-7 7 7h-5z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Cog.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Cog(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M29.181 19.07c-1.679-2.908-.669-6.634 2.255-8.328l-3.145-5.447a6.022 6.022 0 01-3.058.829c-3.361 0-6.085-2.742-6.085-6.125h-6.289a6.023 6.023 0 01-.811 3.07C10.369 5.977 6.637 6.966 3.709 5.28L.565 10.727a6.023 6.023 0 012.246 2.234c1.676 2.903.672 6.623-2.241 8.319l3.145 5.447a6.022 6.022 0 013.044-.82c3.35 0 6.067 2.725 6.084 6.092h6.289a6.032 6.032 0 01.811-3.038c1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447a6.032 6.032 0 01-2.232-2.226zM16 22.479A6.48 6.48 0 1116 9.52a6.48 6.48 0 010 12.959z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Cross.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Cross(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M31.708 25.708L22 16l9.708-9.708a1 1 0 000-1.414L27.122.292a1 1 0 00-1.414-.001L16 9.999 6.292.291a.998.998 0 00-1.414.001L.292 4.878a1 1 0 000 1.414L10 16 .292 25.708a.999.999 0 000 1.414l4.586 4.586a1 1 0 001.414 0L16 22l9.708 9.708a1 1 0 001.414 0l4.586-4.586a.999.999 0 000-1.414z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Dice.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Dice(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M27 6H11c-2.75 0-5 2.25-5 5v16c0 2.75 2.25 5 5 5h16c2.75 0 5-2.25 5-5V11c0-2.75-2.25-5-5-5zM13 28a3 3 0 110-6 3 3 0 010 6zm0-12a3 3 0 110-6 3 3 0 010 6zm6 6a3 3 0 110-6 3 3 0 010 6zm6 6a3 3 0 110-6 3 3 0 010 6zm0-12a3 3 0 110-6 3 3 0 010 6zm.899-12C25.432 1.725 23.408 0 21 0H5C2.25 0 0 2.25 0 5v16c0 2.408 1.725 4.432 4 4.899V6c0-1.1.9-2 2-2h19.899z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Display.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Display(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M0 2v20h32V2H0zm30 18H2V4h28v16zm-9 4H11l-1 4-2 2h16l-2-2z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Eye.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Eye(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M16 6C9.021 6 2.972 10.064 0 16c2.972 5.936 9.021 10 16 10s13.027-4.064 16-10c-2.972-5.936-9.021-10-16-10zm7.889 5.303A15.212 15.212 0 0128.559 16a15.223 15.223 0 01-4.67 4.697C21.527 22.204 18.799 23 16 23s-5.527-.796-7.889-2.303A15.212 15.212 0 013.441 16a15.223 15.223 0 015.041-4.925 8 8 0 1015.036 0c.124.074.248.15.371.228zM16 13a3 3 0 11-6 0 3 3 0 016 0z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/EyeBlocked.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function EyeBlocked(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M29.561.439a1.5 1.5 0 00-2.121 0l-6.318 6.318A17.626 17.626 0 0016 6C9.021 6 2.972 10.064 0 16a18.323 18.323 0 005.407 6.472L.439 27.44a1.5 1.5 0 102.122 2.121l27-27a1.5 1.5 0 000-2.121zM13 10a3 3 0 012.841 2.037l-3.804 3.804A3 3 0 0113 10zm-9.559 6a15.223 15.223 0 015.041-4.925A7.985 7.985 0 008 13.812c0 1.715.54 3.304 1.459 4.607l-1.904 1.904A15.219 15.219 0 013.441 16zM24 13.813c0-.849-.133-1.667-.378-2.434L13.566 21.435a8 8 0 0010.435-7.622z"
10 |       />
11 |       <path
12 |         fill="#444"
13 |         d="M25.938 9.062L23.77 11.23l.118.074a15.212 15.212 0 014.67 4.697 15.223 15.223 0 01-4.67 4.697 14.642 14.642 0 01-11.45 1.864l-2.403 2.403a17.587 17.587 0 005.964 1.036c6.978 0 13.027-4.064 16-10a18.292 18.292 0 00-6.062-6.938z"
14 |       />
15 |     </Icon>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/common/icons/FloppyDisk.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function FloppyDisk(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M28 0H0v32h32V4l-4-4zM16 4h4v8h-4V4zm12 24H4V4h2v10h18V4h2.343L28 5.657V28z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/FolderOpen.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function FolderOpen(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path fill="#444" d="M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/GitHubLogo.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function GitHubLogo(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M16 .396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18.8.151 1.093-.344 1.093-.769 0-.38-.013-1.387-.02-2.72-4.451.965-5.389-2.147-5.389-2.147-.728-1.847-1.78-2.34-1.78-2.34-1.449-.992.112-.972.112-.972 1.607.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331.144-1.035.556-1.74 1.013-2.14-3.553-.4-7.288-1.776-7.288-7.907 0-1.747.62-3.173 1.647-4.293-.18-.404-.72-2.031.14-4.235 0 0 1.34-.429 4.4 1.64 1.28-.356 2.64-.532 4-.54 1.36.008 2.72.184 4 .54 3.04-2.069 4.38-1.64 4.38-1.64.86 2.204.32 3.831.16 4.235 1.02 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893.56.48 1.08 1.461 1.08 2.96 0 2.141-.02 3.861-.02 4.381 0 .42.28.92 1.1.76C27.42 29.455 32 23.455 32 16.395c0-8.836-7.164-16-16-16z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/GitLabLogo.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function GitLabLogo(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M6.459 1.205a1.344 1.344 0 00-1.271.913l-.003.009-3.373 10.377c0 .009-.007.016-.009.027L.094 17.779a1.911 1.911 0 00.691 2.139l.005.004 14.763 10.727a.75.75 0 00.895-.006l-.002.001 14.765-10.72a1.913 1.913 0 00.692-2.16l.004.014-1.68-5.156a.726.726 0 00-.043-.143l.002.005-3.368-10.367a1.341 1.341 0 00-1.269-.912H25.531c-.585 0-1.082.382-1.252.911l-.003.009-3.208 9.877H10.937L7.724 2.125a1.318 1.318 0 00-1.255-.92h-.002zm-.008 1.894l2.899 8.904H3.566zm19.104 0l2.891 8.904h-5.789zM11.429 13.512h9.149l-2.867 8.824-1.712 5.255zm-7.353.007h5.763l4.115 12.667zm18.091 0h5.768l-9.883 12.669 3.945-12.144zm-19.367.83l9.304 11.929L1.68 18.702a.407.407 0 01-.149-.458l-.001.003zm26.4 0l1.269 3.896a.406.406 0 01-.146.454l-.001.001v.003l-10.427 7.573.033-.047z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/GoCd.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function GoCd(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon viewBox="0 0 138 138" {...props}>
 7 |       <g data-name="Layer 2">
 8 |         <path
 9 |           d="M103.75 76.11l-51.22 34.13a8.45 8.45 0 01-4.73 1.44 8.33 8.33 0 01-4-1 8.51 8.51 0 01-4.51-7.52V69a8.52 8.52 0 1117 0v18.19L83.59 69 43 42a8.54 8.54 0 119.5-14.27l51.25 34.16a8.58 8.58 0 010 14.22M69 0a69 69 0 1069 69A69.07 69.07 0 0069 0"
10 |           data-name="Layer 1"
11 |         />
12 |       </g>
13 |     </Icon>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Icon.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import cn from 'classnames'
 3 | import styles from './icon.scss'
 4 | 
 5 | /**
 6 |  * Icons from: https://icomoon.io/app
 7 |  * Optimise using: https://react-svgr.com/playground/?icon=true&typescript=true
 8 |  */
 9 | export function Icon({
10 |   children,
11 |   className,
12 |   ...props
13 | }: SVGProps<SVGSVGElement>): ReactElement {
14 |   return (
15 |     <svg
16 |       xmlns="http://www.w3.org/2000/svg"
17 |       width="1em"
18 |       height="1em"
19 |       viewBox="0 0 32 32"
20 |       aria-hidden
21 |       className={cn(className, styles.icon)}
22 |       {...props}
23 |     >
24 |       {children}
25 |     </svg>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Image.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Image(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M29.996 4l.004.004v23.993l-.004.004H2.003l-.004-.004V4.004L2.003 4h27.993zM30 2H2C.9 2 0 2.9 0 4v24c0 1.1.9 2 2 2h28c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"
10 |       />
11 |       <path
12 |         fill="#444"
13 |         d="M26 9a3 3 0 11-6 0 3 3 0 016 0zM28 26H4v-4l7-12 8 10h2l7-6z"
14 |       />
15 |     </Icon>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Info.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Info(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M14 9.5c0-.825.675-1.5 1.5-1.5h1c.825 0 1.5.675 1.5 1.5v1c0 .825-.675 1.5-1.5 1.5h-1c-.825 0-1.5-.675-1.5-1.5v-1zM20 24h-8v-2h2v-6h-2v-2h6v8h2z"
10 |       />
11 |       <path
12 |         fill="#444"
13 |         d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 29C8.82 29 3 23.18 3 16S8.82 3 16 3s13 5.82 13 13-5.82 13-13 13z"
14 |       />
15 |     </Icon>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/common/icons/List.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function List(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M0 0h8v8H0zm12 2h20v4H12zM0 12h8v8H0zm12 2h20v4H12zM0 24h8v8H0zm12 2h20v4H12z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Lock.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Lock(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M18.5 14H18V8c0-3.308-2.692-6-6-6H8C4.692 2 2 4.692 2 8v6h-.5c-.825 0-1.5.675-1.5 1.5v15c0 .825.675 1.5 1.5 1.5h17c.825 0 1.5-.675 1.5-1.5v-15c0-.825-.675-1.5-1.5-1.5zM6 8c0-1.103.897-2 2-2h4c1.103 0 2 .897 2 2v6H6V8z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Loop.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | import cn from 'classnames'
 4 | import styles from './icon.scss'
 5 | 
 6 | interface LoopProps extends SVGProps<SVGSVGElement> {
 7 |   readonly isLoading?: boolean
 8 | }
 9 | 
10 | export function Loop({
11 |   isLoading,
12 |   className,
13 |   ...props
14 | }: LoopProps): ReactElement {
15 |   return (
16 |     <Icon className={cn(className, { [styles.loop]: isLoading })} {...props}>
17 |       <path
18 |         fill="#444"
19 |         d="M27.802 5.197A15.958 15.958 0 0015.999 0c-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322L20.999 12h11V1l-4.198 4.197zM29 16c0 7.18-5.82 13-13 13a12.965 12.965 0 01-9.678-4.322L11 20H0v11l4.197-4.197A15.958 15.958 0 0016 32c8.837 0 16-7.163 16-16h-3z"
20 |       />
21 |     </Icon>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/src/client/common/icons/MenuClose.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function MenuClose(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props} width={44} viewBox={'0 0 44 32'}>
 7 |       <path d="M0 6h28v6H0V6zm0 8h28v6H0v-6zm0 8h28v6H0v-6zM31 20l6-6 6 6z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/MenuOpen.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function MenuOpen(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props} width={44} viewBox={'0 0 44 32'}>
 7 |       <path d="M0 6h28v6H0V6zm0 8h28v6H0v-6zm0 8h28v6H0v-6zM31 14l6 6 6-6z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Mute.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Mute(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M30 19.348V22h-2.652L24 18.652 20.652 22H18v-2.652L21.348 16 18 12.652V10h2.652L24 13.348 27.348 10H30v2.652L26.652 16 30 19.348zM13 30a1 1 0 0 1-.707-.293L4.586 22H1a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h3.586l7.707-7.707A1 1 0 0 1 14 3v26a1.002 1.002 0 0 1-1 1z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Note.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Note(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M30 0h2v23c0 2.761-3.134 5-7 5s-7-2.239-7-5 3.134-5 7-5c1.959 0 3.729.575 5 1.501V8l-16 3.556V27c0 2.761-3.134 5-7 5s-7-2.239-7-5 3.134-5 7-5c1.959 0 3.729.575 5 1.501V4l18-4z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/PaintFormat.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function PaintFormat(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M32 18v-12h-6v-2c0-1.1-0.9-2-2-2h-22c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h22c1.1 0 2-0.9 2-2v-2h4v8h-18v4h-1c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-10c0-0.552-0.448-1-1-1h-1v-2h18zM24 6h-22v-2h22v2z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Paste.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Paste(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M22 4h-4V2c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H6v4h16V4zm-6 0h-4V2.004L12.004 2h3.993l.004.004V4zm10 6V5c0-.55-.45-1-1-1h-2v2h1v4h-6l-6 6v8H4V6h1V4H3c-.55 0-1 .45-1 1v20c0 .55.45 1 1 1h9v6h20V10h-6zm-8 2.828V16h-3.172L18 12.828zM30 30H14V18h6v-6h10v18z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Play.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Play(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path fill="#444" d="M6 4l20 12L6 28z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Plus.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Plus(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M31 12H20V1a1 1 0 00-1-1h-6a1 1 0 00-1 1v11H1a1 1 0 00-1 1v6a1 1 0 001 1h11v11a1 1 0 001 1h6a1 1 0 001-1V20h11a1 1 0 001-1v-6a1 1 0 00-1-1z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Question.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Question(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M14 22h4v4h-4zm8-14a2 2 0 012 2v6l-6 4h-4v-2l6-4v-2H10V8h12zm-6-5c-3.472 0-6.737 1.352-9.192 3.808S3 12.528 3 16c0 3.472 1.352 6.737 3.808 9.192S12.528 29 16 29c3.472 0 6.737-1.352 9.192-3.808S29 19.472 29 16c0-3.472-1.352-6.737-3.808-9.192S19.472 3 16 3zm0-3c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Stop.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Stop(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path fill="#444" d="M4 4h24v24H4z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Unlocked.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Unlocked(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M24 2c3.308 0 6 2.692 6 6v6h-4V8c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v6h.5c.825 0 1.5.675 1.5 1.5v15c0 .825-.675 1.5-1.5 1.5h-17C.675 32 0 31.325 0 30.5v-15c0-.825.675-1.5 1.5-1.5H14V8c0-3.308 2.692-6 6-6h4z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Warning.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Warning(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M16 3c-3.472 0-6.737 1.352-9.192 3.808S3 12.528 3 16c0 3.472 1.352 6.737 3.808 9.192S12.528 29 16 29c3.472 0 6.737-1.352 9.192-3.808S29 19.472 29 16c0-3.472-1.352-6.737-3.808-9.192S19.472 3 16 3zm0-3c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm-2 22h4v4h-4zm0-16h4v12h-4z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/Xml.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from './Icon'
 3 | 
 4 | export function Xml(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         fill="#444"
 9 |         d="M18 23l3 3 10-10L21 6l-3 3 7 7zM14 9l-3-3L1 16l10 10 3-3-7-7z"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/icon.scss:
--------------------------------------------------------------------------------
 1 | .icon {
 2 |   margin: 0 0.5em 0 0;
 3 | 
 4 |   & > path {
 5 |     fill: currentcolor;
 6 |   }
 7 | }
 8 | 
 9 | .loop {
10 |   animation: spin 4s linear infinite;
11 | }
12 | 
13 | @keyframes spin {
14 |   0% {
15 |     transform: rotate(0deg);
16 |   }
17 | 
18 |   100% {
19 |     transform: rotate(360deg);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconError.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconError(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path
 8 |         d="M11.56 11.005c-.03.034-3.555-1.836-3.595-1.82-.053.022-3.557 4.744-3.613 4.75-.042.005-.838-4.431-.873-4.458-.046-.034-6.382.119-6.418.075C-2.967 9.52.416 5.322.41 5.28c-.006-.055-3.229-3.792-3.22-3.849.008-.043 4.28-.033 4.308-.065.037-.042 1.581-6.318 1.631-6.346.038-.021 2.242 4.218 2.284 4.228.054.013 4.814-2.773 4.865-2.75.04.017-.536 4.3-.516 4.341.025.053 5.021 2.833 5.04 2.887.015.042-4.392 2.116-4.405 2.159-.016.057 1.201 5.077 1.161 5.121z"
 9 |         transform="matrix(1.60586 0 0 1.5034 6.496 9.25)"
10 |       />
11 |     </Icon>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconHealthy.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconHealthy(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M4.904 26.063 14.967 16 4.904 5.937A15 15 0 0 0 1 16a15 15 0 0 0 3.904 10.063ZM26.063 27.096 16 17.033 5.937 27.096A15 15 0 0 0 16 31a15 15 0 0 0 10.063-3.904ZM17.033 16l10.063 10.063A15 15 0 0 0 31 16a15 15 0 0 0-3.893-10.074ZM5.938 4.904 16 14.967 26.074 4.893A15 15 0 0 0 16 1 15 15 0 0 0 5.937 4.904Z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconHealthyBuilding.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconHealthyBuilding(
 5 |   props: SVGProps<SVGSVGElement>,
 6 | ): ReactElement {
 7 |   return (
 8 |     <Icon {...props}>
 9 |       <path d="M4.904 26.063 14.967 16 4.904 5.937A15 15 0 0 0 1 16a15 15 0 0 0 3.904 10.063ZM26.063 27.096 16 17.033 5.937 27.096A15 15 0 0 0 16 31a15 15 0 0 0 10.063-3.904ZM17.033 16l10.063 10.063A15 15 0 0 0 31 16a15 15 0 0 0-3.893-10.074Z" />
10 |     </Icon>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconSick.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconSick(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M1 1h14.5v14.5H1Zm15.5 0H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0H31V31H16.5Z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconSickBuilding.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconSickBuilding(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M16.5 1H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0H31V31H16.5Z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/IconUnknown.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { Icon } from '../Icon'
 3 | 
 4 | export function IconUnknown(props: SVGProps<SVGSVGElement>): ReactElement {
 5 |   return (
 6 |     <Icon {...props}>
 7 |       <path d="M16.5 1H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0V31a15.27 15.285 0 0 0 10.051-4.437A15.27 15.285 0 0 0 31 16.5Zm-1-1V1A15.27 15.285 0 0 0 5.444 5.437a15.27 15.285 0 0 0-4.441 10.058Z" />
 8 |     </Icon>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/error-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/error-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/error.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M11.56 11.005c-.03.034-3.555-1.836-3.595-1.82-.053.022-3.557 4.744-3.613 4.75-.042.005-.838-4.431-.873-4.458-.046-.034-6.382.119-6.418.075C-2.967 9.52.416 5.322.41 5.28c-.006-.055-3.229-3.792-3.22-3.849.008-.043 4.28-.033 4.308-.065.037-.042 1.581-6.318 1.631-6.346.038-.021 2.242 4.218 2.284 4.228.054.013 4.814-2.773 4.865-2.75.04.017-.536 4.3-.516 4.341.025.053 5.021 2.833 5.04 2.887.015.042-4.392 2.116-4.405 2.159-.016.057 1.201 5.077 1.161 5.121z" transform="matrix(1.60586 0 0 1.5034 6.496 9.25)" fill="#0279c4"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/healthy-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/healthy-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/healthy-building-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/healthy-building-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/healthy-building.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M4.904 26.063 14.967 16 4.904 5.937A15 15 0 0 0 1 16a15 15 0 0 0 3.904 10.063ZM26.063 27.096 16 17.033 5.937 27.096A15 15 0 0 0 16 31a15 15 0 0 0 10.063-3.904ZM17.033 16l10.063 10.063A15 15 0 0 0 31 16a15 15 0 0 0-3.893-10.074Z" fill="#0279c4"/></svg>


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/healthy.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M4.904 26.063 14.967 16 4.904 5.937A15 15 0 0 0 1 16a15 15 0 0 0 3.904 10.063ZM26.063 27.096 16 17.033 5.937 27.096A15 15 0 0 0 16 31a15 15 0 0 0 10.063-3.904ZM17.033 16l10.063 10.063A15 15 0 0 0 31 16a15 15 0 0 0-3.893-10.074ZM5.938 4.904 16 14.967 26.074 4.893A15 15 0 0 0 16 1 15 15 0 0 0 5.937 4.904Z" fill="#0279c4"/></svg>


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/sick-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/sick-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/sick-building-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/sick-building-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/sick-building.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 1H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0H31V31H16.5Z" fill="#0279c4"/></svg>


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/sick.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M1 1h14.5v14.5H1Zm15.5 0H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0H31V31H16.5Z" fill="#0279c4"/></svg>


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/unknown-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/common/icons/prognosis/unknown-192x192.png


--------------------------------------------------------------------------------
/src/client/common/icons/prognosis/unknown.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 1H31v14.5H16.5ZM1 16.5h14.5V31H1Zm15.5 0V31a15.27 15.285 0 0 0 10.051-4.437A15.27 15.285 0 0 0 31 16.5Zm-1-1V1A15.27 15.285 0 0 0 5.444 5.437a15.27 15.285 0 0 0-4.441 10.058Z" fill="#0279c4"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/client/common/link-button.scss:
--------------------------------------------------------------------------------
1 | @use 'layout';
2 | 
3 | .linkButton {
4 |   align-items: center;
5 |   display: inline-flex;
6 |   margin: layout.$spacing-height layout.$spacing-width 0 0;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/common/loading.scss:
--------------------------------------------------------------------------------
 1 | @use 'colours';
 2 | @use 'layout';
 3 | 
 4 | .loading {
 5 |   @include layout.fill-parent;
 6 | 
 7 |   align-items: center;
 8 |   background-color: colours.$white;
 9 |   display: flex;
10 |   justify-content: center;
11 |   padding-bottom: 1em;
12 |   padding-top: 1em;
13 | }
14 | 
15 | .pulse {
16 |   animation: dot-flashing 1.5s infinite linear alternate;
17 |   background-color: colours.$off-black;
18 |   border-radius: colours.$border-radius;
19 |   display: inline-block;
20 |   height: 1.5rem;
21 |   margin: 0 0.5rem 0 0;
22 |   width: 1.5rem;
23 | 
24 |   &:nth-of-type(2) {
25 |     animation-delay: 0.5s;
26 |   }
27 | 
28 |   &:nth-of-type(3) {
29 |     animation-delay: 1s;
30 |   }
31 | 
32 |   @keyframes dot-flashing {
33 |     0% {
34 |       opacity: 1;
35 |     }
36 | 
37 |     50%,
38 |     100% {
39 |       opacity: 0.2;
40 |     }
41 |   }
42 | }
43 | 
44 | .dark {
45 |   background-color: colours.$off-black;
46 | 
47 |   & .pulse {
48 |     background-color: colours.$white;
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/client/common/main.scss:
--------------------------------------------------------------------------------
1 | @use 'colours';
2 | 
3 | .main {
4 |   background-color: colours.$black;
5 |   display: flex;
6 |   flex-grow: 1;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/common/modal.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:color';
 2 | @use 'colours';
 3 | @use 'responsive';
 4 | @use 'layout';
 5 | 
 6 | .overlay {
 7 |   align-items: center;
 8 |   background-color: color.adjust(colours.$black, $alpha: -0.3);
 9 |   display: flex;
10 |   inset: 0;
11 |   justify-content: center;
12 |   position: fixed;
13 |   z-index: layout.$model-index;
14 | }
15 | 
16 | .modal {
17 |   background-color: #fff;
18 |   border: 1px solid #ececec;
19 |   box-shadow: 0 2px 5px color.adjust(colours.$black, $alpha: -0.74);
20 |   color: #212121;
21 |   display: flex;
22 |   flex-direction: column;
23 |   max-height: calc(100vh - #{layout.$spacing-height * 2});
24 |   max-width: 52em;
25 |   overflow: scroll;
26 |   padding: 1em;
27 |   width: calc(100vw - 3em);
28 | 
29 |   &:focus-visible {
30 |     outline: none;
31 |   }
32 | 
33 |   @include responsive.respond-to(very-small) {
34 |     max-height: 100vh;
35 |     width: 100vw;
36 |   }
37 | }
38 | 
39 | .header {
40 |   align-items: flex-start;
41 |   display: flex;
42 |   flex-shrink: 0;
43 |   flex-wrap: nowrap;
44 |   justify-content: space-between;
45 | }
46 | 
47 | .content {
48 |   flex-grow: 1;
49 | }
50 | 
51 | .title {
52 |   margin: 0 1em 0 0;
53 | 
54 |   &::before {
55 |     margin-right: 0.5em;
56 |   }
57 | }
58 | 
59 | .modelOpen {
60 |   overflow: hidden;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/client/common/page.scss:
--------------------------------------------------------------------------------
 1 | @use 'colours';
 2 | @use 'responsive';
 3 | @use 'layout';
 4 | 
 5 | .page {
 6 |   background: colours.$white;
 7 |   height: 100%;
 8 |   margin: auto;
 9 |   max-width: layout.$max-page-width;
10 |   padding: 1em;
11 |   width: 100%;
12 | 
13 |   & > *:first-child {
14 |     margin-top: 0;
15 |   }
16 | 
17 |   @include responsive.respond-to(desktop) {
18 |     padding: 2em;
19 |   }
20 | }
21 | 
22 | .backToTop {
23 |   margin-top: layout.$spacing-height * 2;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/client/common/responsive.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:map';
 2 | 
 3 | $breakpoints: (
 4 |   very-small: '(min-width: 0) and (max-width: 320px)',
 5 |   mobile: '(min-width: 0) and (max-width: 767px)',
 6 |   tablet: '(min-width: 768px) and (max-width: 1439px)',
 7 |   desktop: '(min-width: 1440px)',
 8 | );
 9 | 
10 | @mixin respond-to($medias...) {
11 |   @each $media in $medias {
12 |     @media #{map.get($breakpoints, $media)} {
13 |       @content;
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/client/common/scaled-text.scss:
--------------------------------------------------------------------------------
 1 | @use 'layout';
 2 | 
 3 | .body {
 4 |   @include layout.fill-parent;
 5 | 
 6 |   align-items: center;
 7 |   display: flex;
 8 |   justify-content: center;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/client/common/success-image.scss:
--------------------------------------------------------------------------------
1 | @use 'layout';
2 | 
3 | .image {
4 |   @include layout.fill-parent;
5 | 
6 |   display: block;
7 |   object-fit: contain;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/common/success-message.scss:
--------------------------------------------------------------------------------
1 | @use 'layout';
2 | @use 'typography';
3 | 
4 | .successMessage {
5 |   @include layout.fill-parent;
6 | 
7 |   font-family: typography.$monospace-font;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/common/summary.scss:
--------------------------------------------------------------------------------
 1 | @use './responsive';
 2 | 
 3 | .summaryList {
 4 |   div:last-child > dd {
 5 |     margin-bottom: 0;
 6 |   }
 7 | 
 8 |   @include responsive.respond-to(tablet, desktop) {
 9 |     width: 100%;
10 |   }
11 | }
12 | 
13 | .summaryListRow {
14 |   @include responsive.respond-to(tablet, desktop) {
15 |     column-gap: 0.5em;
16 |     display: grid;
17 |     grid-template-columns: 30% 70%;
18 |   }
19 | }
20 | 
21 | .key {
22 |   font-weight: bold;
23 |   overflow: hidden;
24 |   text-overflow: ellipsis;
25 | }
26 | 
27 | .value {
28 |   margin-bottom: 1em;
29 |   overflow: hidden;
30 |   text-overflow: ellipsis;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client/common/url.scss:
--------------------------------------------------------------------------------
1 | @use 'typography';
2 | 
3 | .url {
4 |   font-family: typography.$monospace-font;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/common/visually-hidden.scss:
--------------------------------------------------------------------------------
1 | @use 'accessibility';
2 | 
3 | .content {
4 |   @include accessibility.visually-hidden;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/configuration/Hooks.ts:
--------------------------------------------------------------------------------
1 | import type { TypedUseSelectorHook } from 'react-redux'
2 | import { useDispatch, useSelector } from 'react-redux'
3 | import type { AppDispatch, RootState } from './ReduxStore'
4 | 
5 | export const useAppDispatch: () => AppDispatch = useDispatch
6 | export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
7 | 


--------------------------------------------------------------------------------
/src/client/configuration/LocalRepository.ts:
--------------------------------------------------------------------------------
 1 | import localforage from 'localforage'
 2 | import toPairs from 'lodash/toPairs'
 3 | import type { RootState } from './ReduxStore'
 4 | 
 5 | export type UntrustedData = Record<string, unknown>
 6 | 
 7 | export async function init(): Promise<void> {
 8 |   localforage.config({ name: 'nevergreen', storeName: 'nevergreen' })
 9 |   return localforage.ready()
10 | }
11 | 
12 | export async function save(data: RootState): Promise<void> {
13 |   await Promise.all(
14 |     toPairs(data).map(([key, value]) => {
15 |       return localforage.setItem(key, value)
16 |     }),
17 |   )
18 | }
19 | 
20 | export async function load(): Promise<UntrustedData> {
21 |   const configuration: UntrustedData = {}
22 |   await localforage.iterate((value, key) => {
23 |     configuration[key] = value
24 |   })
25 |   return configuration
26 | }
27 | 
28 | export async function clear(): Promise<void> {
29 |   return localforage.clear()
30 | }
31 | 


--------------------------------------------------------------------------------
/src/client/configuration/MigrationsReducer.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | import { configurationImported } from '../settings/backup/BackupActionCreators'
 3 | import { z } from 'zod'
 4 | 
 5 | export const migrationsRoot = 'appliedMigrations'
 6 | 
 7 | const AppliedMigration = z.object({
 8 |   id: z.string(),
 9 |   timestamp: z.string(),
10 | })
11 | 
12 | export const AppliedMigrationsState = z.array(AppliedMigration)
13 | 
14 | export type AppliedMigration = z.infer<typeof AppliedMigration>
15 | export type AppliedMigrationsState = z.infer<typeof AppliedMigrationsState>
16 | 
17 | const initialState: AppliedMigrationsState = []
18 | 
19 | const slice = createSlice({
20 |   name: migrationsRoot,
21 |   initialState,
22 |   reducers: {},
23 |   extraReducers: (builder) => {
24 |     builder.addCase(configurationImported, (draft, action) => {
25 |       return action.payload.configuration.appliedMigrations ?? draft
26 |     })
27 |   },
28 | })
29 | 
30 | export const { reducer } = slice
31 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/001_MoveAudioVisualToSettings.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './001_MoveAudioVisualToSettings'
 2 | 
 3 | it('should return the given data if it does not contain audioVisual', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it('should move audioVisual to settings', () => {
10 |   const data = { audioVisual: { foo: 'bar' } }
11 |   migrate(data)
12 |   expect(data).toHaveProperty('settings', { foo: 'bar' })
13 |   expect(data).not.toHaveProperty('audioVisual')
14 | })
15 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/001_MoveAudioVisualToSettings.ts:
--------------------------------------------------------------------------------
1 | import { moveData } from '../Migrate'
2 | import { Migrate } from './index'
3 | 
4 | export const id = '001_MoveAudioVisualToSettings'
5 | 
6 | export const migrate: Migrate = (data) => {
7 |   moveData(data, 'audioVisual', 'settings')
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/002_PrefixEncryptedValues.ts:
--------------------------------------------------------------------------------
 1 | import { forEachObjectAt, moveData } from '../Migrate'
 2 | import { Migrate } from './index'
 3 | 
 4 | export const id = '002_PrefixEncryptedValues'
 5 | 
 6 | export const migrate: Migrate = (data) => {
 7 |   forEachObjectAt(data, 'trays', (feed) => {
 8 |     moveData(feed, 'password', 'encryptedPassword')
 9 |     moveData(feed, 'accessToken', 'encryptedAccessToken')
10 |   })
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/003_FlattenProjects.ts:
--------------------------------------------------------------------------------
 1 | import { forEachObjectAt } from '../Migrate'
 2 | import { Migrate } from './index'
 3 | import set from 'lodash/set'
 4 | 
 5 | export const id = '003_FlattenProjects.ts'
 6 | 
 7 | export const migrate: Migrate = (data) => {
 8 |   forEachObjectAt(data, 'projects', (projects, trayId) => {
 9 |     set(data, ['projects', trayId], Object.values(projects))
10 |   })
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/004_AddTrayIdToProjects.ts:
--------------------------------------------------------------------------------
 1 | import { forEachArrayAt } from '../Migrate'
 2 | import { Migrate } from './index'
 3 | import isObject from 'lodash/isObject'
 4 | 
 5 | export const id = '004_AddTrayIdToProjects'
 6 | 
 7 | export const migrate: Migrate = (data) => {
 8 |   forEachArrayAt(data, 'projects', (projects, trayId) => {
 9 |     projects.forEach((project) => {
10 |       if (isObject(project)) {
11 |         project.trayId = trayId
12 |       }
13 |     })
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/005_SetAuthType.ts:
--------------------------------------------------------------------------------
 1 | import { forEachObjectAt } from '../Migrate'
 2 | import { Migrate } from './index'
 3 | import has from 'lodash/has'
 4 | import { AuthTypes } from '../../settings/tracking/FeedsReducer'
 5 | import { isBlank } from '../../common/Utils'
 6 | 
 7 | export const id = '005_SetAuthType'
 8 | 
 9 | export const migrate: Migrate = (data) => {
10 |   forEachObjectAt(data, 'trays', (feed) => {
11 |     if (!has(feed, 'authType')) {
12 |       if (!isBlank(feed.username) || !isBlank(feed.encryptedPassword)) {
13 |         feed.authType = AuthTypes.basic
14 |       } else if (!isBlank(feed.encryptedAccessToken)) {
15 |         feed.authType = AuthTypes.token
16 |       } else {
17 |         feed.authType = AuthTypes.none
18 |       }
19 |     }
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/006_RemoveBrokenBuildTime.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './006_RemoveShowBrokenBuildTime'
 2 | 
 3 | it('should not modify the given data if it does not contain settings', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it('should not modify the given data if it contains the settings key but it is not an object', () => {
10 |   const data = { settings: 'invalid' }
11 |   migrate(data)
12 |   expect(data).toEqual({ settings: 'invalid' })
13 | })
14 | 
15 | it('should remove the showBrokenBuildTime setting', () => {
16 |   const data = {
17 |     settings: {
18 |       showBuildTime: true,
19 |       showBrokenBuildTime: true,
20 |     },
21 |   }
22 |   migrate(data)
23 |   expect(data).toEqual({ settings: { showBuildTime: true } })
24 | })
25 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/006_RemoveShowBrokenBuildTime.ts:
--------------------------------------------------------------------------------
1 | import { Migrate } from './index'
2 | import unset from 'lodash/unset'
3 | 
4 | export const id = '006_RemoveShowBrokenBuildTime'
5 | 
6 | export const migrate: Migrate = (data) => {
7 |   unset(data, ['settings', 'showBrokenBuildTime'])
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/007_SetProjectDescription.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import isObject from 'lodash/isObject'
 3 | import unset from 'lodash/unset'
 4 | import { forEachArrayAt } from '../Migrate'
 5 | import { isBlank } from '../../common/Utils'
 6 | 
 7 | export const id = '007_SetProjectDescription'
 8 | 
 9 | export const migrate: Migrate = (data) => {
10 |   forEachArrayAt(data, 'projects', (projects) => {
11 |     projects.forEach((project) => {
12 |       if (isObject(project)) {
13 |         project.description = isBlank(project.stage)
14 |           ? project.name
15 |           : // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
16 |             `${project.name} ${project.stage}`
17 |         unset(project, 'name')
18 |         unset(project, 'stage')
19 |       }
20 |     })
21 |   })
22 | }
23 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/008_UpdateMaxProjectsToShow.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import get from 'lodash/get'
 3 | import has from 'lodash/has'
 4 | import set from 'lodash/set'
 5 | import { MaxProjectsToShow } from '../../settings/display/DisplaySettingsReducer'
 6 | 
 7 | export const id = '008_UpdateMaxProjectsToShow'
 8 | 
 9 | export const migrate: Migrate = (data) => {
10 |   if (has(data, ['settings', 'maxProjectsToShow'])) {
11 |     const oldValue = get(data, ['settings', 'maxProjectsToShow']) as number
12 |     let newValue
13 |     if (oldValue < 12) {
14 |       newValue = MaxProjectsToShow.small
15 |     } else if (oldValue === 12) {
16 |       newValue = MaxProjectsToShow.medium
17 |     } else if (oldValue > 12 && oldValue < Number.MAX_SAFE_INTEGER) {
18 |       newValue = MaxProjectsToShow.large
19 |     } else {
20 |       newValue = MaxProjectsToShow.all
21 |     }
22 |     set(data, ['settings', 'maxProjectsToShow'], newValue)
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/009_RemoveProjects.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './009_RemoveProjects'
 2 | 
 3 | it('should not modify the given data if it does not contain projects', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it('should remove projects', () => {
10 |   const data = {
11 |     projects: {},
12 |   }
13 |   migrate(data)
14 |   expect(data).toEqual({})
15 | })
16 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/009_RemoveProjects.ts:
--------------------------------------------------------------------------------
1 | import { Migrate } from './index'
2 | import unset from 'lodash/unset'
3 | 
4 | export const id = '009_RemoveProjects'
5 | 
6 | export const migrate: Migrate = (data) => {
7 |   unset(data, 'projects')
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/010_SetTrackingMode.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import { forEachObjectAt } from '../Migrate'
 3 | import { TrackingMode } from '../../settings/tracking/FeedsReducer'
 4 | import has from 'lodash/has'
 5 | 
 6 | export const id = '010_SetTrackingMode'
 7 | 
 8 | export const migrate: Migrate = (data) => {
 9 |   forEachObjectAt(data, 'trays', (feed) => {
10 |     if (!has(feed, 'trackingMode')) {
11 |       feed.trackingMode = TrackingMode.selected
12 |     }
13 |   })
14 | }
15 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/011_RemoveOldKeys.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './011_RemoveOldKeys'
 2 | 
 3 | it('should not modify the given data if it does not contain old keys', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it.each(['nevergreen', 'github', 'gitlab', 'backup'])(
10 |   'should remove the old "%s" key',
11 |   (key) => {
12 |     const data = { [key]: {} }
13 |     migrate(data)
14 |     expect(data).not.toHaveProperty(key)
15 |   },
16 | )
17 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/011_RemoveOldKeys.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import unset from 'lodash/unset'
 3 | 
 4 | export const id = '011_RemoveOldKeys'
 5 | 
 6 | export const migrate: Migrate = (data) => {
 7 |   unset(data, 'nevergreen')
 8 |   unset(data, 'github')
 9 |   unset(data, 'gitlab')
10 |   unset(data, 'backup')
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/012_MoveNotificationSettings.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './012_MoveNotificationSettings'
 2 | 
 3 | it('should return the given data if it does not contain settings', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it('should move settings to notifications', () => {
10 |   const data = {
11 |     settings: {
12 |       enableNewVersionCheck: true,
13 |       showSystemNotifications: false,
14 |       playBrokenBuildSoundFx: false,
15 |       brokenBuildSoundFx: 'defaultSoundFx',
16 |     },
17 |   }
18 |   migrate(data)
19 |   expect(data).toEqual({
20 |     notifications: {
21 |       enableNewVersionCheck: true,
22 |       showSystemNotifications: false,
23 |       playBrokenBuildSoundFx: false,
24 |       brokenBuildSoundFx: 'defaultSoundFx',
25 |     },
26 |     settings: {},
27 |   })
28 | })
29 | 
30 | it('should keep all non notification settings', () => {
31 |   const data = {
32 |     settings: {
33 |       someKey: 'someValue',
34 |     },
35 |   }
36 |   migrate(data)
37 |   expect(data).toEqual({
38 |     settings: { someKey: 'someValue' },
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/012_MoveNotificationSettings.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import { moveData } from '../Migrate'
 3 | 
 4 | export const id = '012_MoveNotificationSettings'
 5 | 
 6 | export const migrate: Migrate = (data) => {
 7 |   moveData(
 8 |     data,
 9 |     'settings.enableNewVersionCheck',
10 |     'notifications.enableNewVersionCheck',
11 |   )
12 |   moveData(
13 |     data,
14 |     'settings.showSystemNotifications',
15 |     'notifications.showSystemNotifications',
16 |   )
17 |   moveData(
18 |     data,
19 |     'settings.playBrokenBuildSoundFx',
20 |     'notifications.playBrokenBuildSoundFx',
21 |   )
22 |   moveData(
23 |     data,
24 |     'settings.brokenBuildSoundFx',
25 |     'notifications.brokenBuildSoundFx',
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/014_MigratePersonalSettings.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './014_MigratePersonalSettings'
 2 | import { notificationsRoot } from '../../settings/notifications/NotificationsReducer'
 3 | import { personalSettingsRoot } from '../../settings/PersonalSettingsReducer'
 4 | 
 5 | it('should migrate allowAudioNotifications', () => {
 6 |   const data = {
 7 |     [notificationsRoot]: {
 8 |       allowAudioNotifications: true,
 9 |     },
10 |   }
11 |   migrate(data)
12 |   expect(data).toEqual({
13 |     [notificationsRoot]: {},
14 |     [personalSettingsRoot]: {
15 |       allowAudioNotifications: true,
16 |     },
17 |   })
18 | })
19 | 
20 | it('should migrate allowSystemNotifications', () => {
21 |   const data = {
22 |     [notificationsRoot]: {
23 |       allowSystemNotifications: true,
24 |     },
25 |   }
26 |   migrate(data)
27 |   expect(data).toEqual({
28 |     [notificationsRoot]: {},
29 |     [personalSettingsRoot]: {
30 |       allowSystemNotifications: true,
31 |     },
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/014_MigratePersonalSettings.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import { moveData } from '../Migrate'
 3 | import { personalSettingsRoot } from '../../settings/PersonalSettingsReducer'
 4 | 
 5 | export const id = '014_MigratePersonalSettings'
 6 | 
 7 | export const migrate: Migrate = (data) => {
 8 |   moveData(data, 'notifications.allowAudioNotifications', [
 9 |     personalSettingsRoot,
10 |     'allowAudioNotifications',
11 |   ])
12 |   moveData(data, 'notifications.allowSystemNotifications', [
13 |     personalSettingsRoot,
14 |     'allowSystemNotifications',
15 |   ])
16 | }
17 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/015_MigrateRemoteLocationTimestamps.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './015_MigrateRemoteLocationTimestamps'
 2 | import { personalSettingsRoot } from '../../settings/PersonalSettingsReducer'
 3 | import { remoteLocationsRoot } from '../../settings/backup/RemoteLocationsReducer'
 4 | 
 5 | it('should migrate existing remote location timestamps', () => {
 6 |   const data = {
 7 |     [remoteLocationsRoot]: {
 8 |       locationId1: {
 9 |         exportTimestamp: '1',
10 |         importTimestamp: '2',
11 |       },
12 |       locationId2: {
13 |         exportTimestamp: '3',
14 |         importTimestamp: '4',
15 |       },
16 |     },
17 |   }
18 |   migrate(data)
19 |   expect(data).toEqual({
20 |     [remoteLocationsRoot]: {
21 |       locationId1: {},
22 |       locationId2: {},
23 |     },
24 |     [personalSettingsRoot]: {
25 |       backupRemoteLocations: {
26 |         locationId1: {
27 |           exportTimestamp: '1',
28 |           importTimestamp: '2',
29 |         },
30 |         locationId2: {
31 |           exportTimestamp: '3',
32 |           importTimestamp: '4',
33 |         },
34 |       },
35 |     },
36 |   })
37 | })
38 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/015_MigrateRemoteLocationTimestamps.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import { forEachObjectAt, moveData } from '../Migrate'
 3 | import set from 'lodash/set'
 4 | 
 5 | export const id = '015_MigrateRemoteLocationTimestamps'
 6 | 
 7 | export const migrate: Migrate = (data) => {
 8 |   set(data, 'personal.backupRemoteLocations', {})
 9 |   forEachObjectAt(data, 'backupRemoteLocations', (_, id) => {
10 |     moveData(
11 |       data,
12 |       ['backupRemoteLocations', id, 'exportTimestamp'],
13 |       ['personal', 'backupRemoteLocations', id, 'exportTimestamp'],
14 |     )
15 |     moveData(
16 |       data,
17 |       ['backupRemoteLocations', id, 'importTimestamp'],
18 |       ['personal', 'backupRemoteLocations', id, 'importTimestamp'],
19 |     )
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/016_MigrateSuccess.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './016_MigrateSuccess'
 2 | import { successRoot } from '../../settings/success/SuccessReducer'
 3 | 
 4 | it('should migrate success messages', () => {
 5 |   const data = {
 6 |     [successRoot]: ['=(^.^)='],
 7 |   }
 8 |   migrate(data)
 9 |   expect(data).toEqual({
10 |     [successRoot]: {
11 |       messages: ['=(^.^)='],
12 |     },
13 |   })
14 | })
15 | 
16 | it('should migrate empty success messages', () => {
17 |   const data = {
18 |     [successRoot]: [],
19 |   }
20 |   migrate(data)
21 |   expect(data).toEqual({
22 |     [successRoot]: {
23 |       messages: [],
24 |     },
25 |   })
26 | })
27 | 
28 | it('should do nothing if no success root', () => {
29 |   const data = {}
30 |   migrate(data)
31 |   expect(data).toEqual({})
32 | })
33 | 
34 | it('should not migrate if success is not an array', () => {
35 |   const data = { [successRoot]: {} }
36 |   migrate(data)
37 |   expect(data).toEqual({ [successRoot]: {} })
38 | })
39 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/016_MigrateSuccess.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import set from 'lodash/set'
 3 | import isArray from 'lodash/isArray'
 4 | 
 5 | export const id = '016_MigrateSuccess'
 6 | 
 7 | export const migrate: Migrate = (data) => {
 8 |   if (isArray(data['success'])) {
 9 |     set(data, 'success', { messages: data['success'] })
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/017_MoveClickToShowMenuSetting.test.ts:
--------------------------------------------------------------------------------
 1 | import { migrate } from './017_MoveClickToShowMenuSetting'
 2 | 
 3 | it('should return the given data if it does not contain settings', () => {
 4 |   const data = { foo: 'bar' }
 5 |   migrate(data)
 6 |   expect(data).toEqual({ foo: 'bar' })
 7 | })
 8 | 
 9 | it('should move click to show menu to other settings', () => {
10 |   const data = {
11 |     settings: {
12 |       clickToShowMenu: true,
13 |     },
14 |   }
15 |   migrate(data)
16 |   expect(data).toEqual({
17 |     otherSettings: {
18 |       clickToShowMenu: true,
19 |     },
20 |     settings: {},
21 |   })
22 | })
23 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/017_MoveClickToShowMenuSetting.ts:
--------------------------------------------------------------------------------
1 | import { Migrate } from './index'
2 | import { moveData } from '../Migrate'
3 | 
4 | export const id = '017_MoveClickToShowMenuSetting'
5 | 
6 | export const migrate: Migrate = (data) => {
7 |   moveData(data, 'settings.clickToShowMenu', 'otherSettings.clickToShowMenu')
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/018_CombineFeedAuthSettings.ts:
--------------------------------------------------------------------------------
 1 | import { Migrate } from './index'
 2 | import { forEachObjectAt, moveData } from '../Migrate'
 3 | import get from 'lodash/get'
 4 | import { isNotBlank } from '../../common/Utils'
 5 | import unset from 'lodash/unset'
 6 | 
 7 | export const id = '018_CombineFeedAuthSettings'
 8 | 
 9 | export const migrate: Migrate = (data) => {
10 |   forEachObjectAt(data, 'trays', (feed) => {
11 |     if (isNotBlank(get(feed, 'encryptedPassword'))) {
12 |       moveData(feed, 'encryptedPassword', 'encryptedAuth')
13 |     }
14 |     if (isNotBlank(get(feed, 'encryptedAccessToken'))) {
15 |       moveData(feed, 'encryptedAccessToken', 'encryptedAuth')
16 |     }
17 |     unset(feed, 'encryptedPassword')
18 |     unset(feed, 'encryptedAccessToken')
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/src/client/configuration/migrations/index.test.ts:
--------------------------------------------------------------------------------
1 | import { getOrderedMigrations } from './'
2 | 
3 | it('every migration should have a unique id', () => {
4 |   const migrations = getOrderedMigrations()
5 |   const ids = migrations.map((migration) => migration.id)
6 |   expect(new Set(ids).size).toEqual(ids.length)
7 | })
8 | 


--------------------------------------------------------------------------------
/src/client/domain/Url.test.ts:
--------------------------------------------------------------------------------
 1 | import { isValidHttpUrl, removeScheme } from './Url'
 2 | 
 3 | describe('removeScheme', () => {
 4 |   it('should remove the scheme', () => {
 5 |     expect(removeScheme('http://some-url/')).toBe('//some-url/')
 6 |   })
 7 | 
 8 |   it('should do nothing if there is no scheme', () => {
 9 |     expect(removeScheme('some-thing')).toBe('some-thing')
10 |   })
11 | })
12 | 
13 | describe('isValidHttpUrl', () => {
14 |   it('should return true if the URL has a http scheme', () => {
15 |     expect(isValidHttpUrl('http://example.com')).toBe(true)
16 |   })
17 | 
18 |   it('should return true if the URL has a https scheme', () => {
19 |     expect(isValidHttpUrl('https://example.com')).toBe(true)
20 |   })
21 | 
22 |   it('should return false otherwise', () => {
23 |     expect(isValidHttpUrl('file://example')).toBe(false)
24 |   })
25 | })
26 | 


--------------------------------------------------------------------------------
/src/client/domain/Url.ts:
--------------------------------------------------------------------------------
 1 | export function buildUrl(value: string, base?: string): URL | null {
 2 |   try {
 3 |     return new URL(value, base)
 4 |   } catch {
 5 |     return null
 6 |   }
 7 | }
 8 | 
 9 | export function removeScheme(value: string): string {
10 |   const url = buildUrl(value)
11 |   if (url) {
12 |     return url.href.replace(url.protocol, '')
13 |   }
14 |   return value
15 | }
16 | 
17 | export function isValidHttpUrl(value: string): boolean {
18 |   const url = buildUrl(value)
19 |   return url?.protocol === 'http:' || url?.protocol === 'https:'
20 | }
21 | 


--------------------------------------------------------------------------------
/src/client/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/favicons/apple-touch-icon.png


--------------------------------------------------------------------------------
/src/client/favicons/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/favicons/favicon-96x96.png


--------------------------------------------------------------------------------
/src/client/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/favicons/favicon.ico


--------------------------------------------------------------------------------
/src/client/favicons/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Nevergreen",
 3 |   "short_name": "Nevergreen",
 4 |   "description": "Nevergreen is a build monitor with attitude. Continually deliver via fast clear feedback.",
 5 |   "icons": [
 6 |     {
 7 |       "src": "/web-app-manifest-192x192.png",
 8 |       "sizes": "192x192",
 9 |       "type": "image/png",
10 |       "purpose": "any"
11 |     },
12 |     {
13 |       "src": "/web-app-manifest-512x512.png",
14 |       "sizes": "512x512",
15 |       "type": "image/png",
16 |       "purpose": "any"
17 |     }
18 |   ],
19 |   "theme_color": "#212121",
20 |   "background_color": "#212121",
21 |   "display": "standalone",
22 |   "start_url": "/",
23 |   "screenshots": [
24 |     {
25 |       "src": "https://raw.githubusercontent.com/build-canaries/nevergreen/main/doc/screenshot_monitor.png",
26 |       "sizes": "1440x810",
27 |       "type": "image/png",
28 |       "form_factor": "wide",
29 |       "label": "Monitor"
30 |     },
31 |     {
32 |       "src": "https://raw.githubusercontent.com/build-canaries/nevergreen/main/doc/screenshot_monitor_mobile.png",
33 |       "sizes": "541x1170",
34 |       "type": "image/png",
35 |       "label": "Monitor"
36 |     }
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/src/client/favicons/web-app-manifest-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/favicons/web-app-manifest-192x192.png


--------------------------------------------------------------------------------
/src/client/favicons/web-app-manifest-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/favicons/web-app-manifest-512x512.png


--------------------------------------------------------------------------------
/src/client/font-metrics.scss:
--------------------------------------------------------------------------------
 1 | @use 'common/typography';
 2 | 
 3 | .body {
 4 |   font-family: typography.$monospace-font;
 5 |   left: -99999px;
 6 |   padding: 0;
 7 |   position: absolute;
 8 |   top: -99999px;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/client/footer/Footer.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '../testUtils/testHelpers'
 2 | import { Footer } from './Footer'
 3 | import { screen } from '@testing-library/react'
 4 | import { RoutePaths } from '../AppRoutes'
 5 | 
 6 | it('should have "about" information', async () => {
 7 |   const { user } = render(<Footer />)
 8 |   await user.click(
 9 |     screen.getByText(
10 |       /Nevergreen v[\d.]+\+\d+\.[a-zA-Z\d]+ [a-zA-Z ]+ by Build Canaries/,
11 |     ),
12 |   )
13 | 
14 |   expect(window.location.pathname).toEqual(RoutePaths.about)
15 | })
16 | 


--------------------------------------------------------------------------------
/src/client/footer/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import version from '../../../resources/version.txt'
 3 | import versionMeta from '../../../resources/version_meta.txt'
 4 | import versionName from '../../../resources/version_name.txt'
 5 | import { SubmitAnIssue } from './SubmitAnIssue'
 6 | import { Link } from 'react-router'
 7 | import { RoutePaths } from '../AppRoutes'
 8 | import styles from './footer.scss'
 9 | 
10 | export function Footer(): ReactElement {
11 |   const fullVersion = `${version}+${versionMeta}`
12 |   const versionWithName = `v${fullVersion} ${versionName}`
13 | 
14 |   return (
15 |     <footer className={styles.siteFooter}>
16 |       <Link
17 |         className={styles.about}
18 |         to={RoutePaths.about}
19 |         aria-label="About Nevergreen"
20 |       >
21 |         Nevergreen v{fullVersion} {versionName} by Build Canaries
22 |       </Link>
23 |       <SubmitAnIssue
24 |         version={versionWithName}
25 |         className={styles.submitAnIssue}
26 |       />
27 |     </footer>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/client/footer/about-page.scss:
--------------------------------------------------------------------------------
1 | @use '../common/layout';
2 | 
3 | .title {
4 |   margin-top: layout.$spacing-height;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/footer/footer.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/responsive';
 3 | @use '../common/links';
 4 | @use '../common/layout';
 5 | 
 6 | .siteFooter {
 7 |   background-color: colours.$off-black;
 8 |   border-bottom: 0.5em solid colours.$version-color;
 9 |   display: block;
10 |   padding: 1em;
11 |   z-index: layout.$header-footer-index;
12 | 
13 |   @include responsive.respond-to(tablet, desktop) {
14 |     display: flex;
15 |     justify-content: space-between;
16 |     padding-left: 2em;
17 |     padding-right: 2em;
18 |   }
19 | }
20 | 
21 | .about {
22 |   @include links.link(
23 |     $color: colours.$white,
24 |     $visited-color: colours.$white,
25 |     $interactive-color: colours.$white,
26 |     $interactive-background-color: colours.$black
27 |   );
28 | 
29 |   text-align: left;
30 |   text-decoration: none;
31 | }
32 | 
33 | .submitAnIssue {
34 |   @include links.link(
35 |     $color: colours.$white,
36 |     $visited-color: colours.$white,
37 |     $interactive-color: colours.$white,
38 |     $interactive-background-color: colours.$black
39 |   );
40 | 
41 |   display: block;
42 |   margin: layout.$spacing-height 0 0 0;
43 | 
44 |   @include responsive.respond-to(tablet, desktop) {
45 |     margin: 0;
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/client/gateways/SecurityGateway.test.ts:
--------------------------------------------------------------------------------
 1 | import { encrypt } from './SecurityGateway'
 2 | import * as gateway from '../gateways/Gateway'
 3 | 
 4 | it('should call the encrypt URL', async () => {
 5 |   jest.spyOn(gateway, 'post').mockResolvedValueOnce('')
 6 |   await encrypt('some-password')
 7 |   expect(gateway.post).toHaveBeenCalledWith({
 8 |     url: '/api/encrypt',
 9 |     data: 'some-password',
10 |     headers: { 'Content-Type': 'text/plain' },
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/src/client/gateways/SecurityGateway.ts:
--------------------------------------------------------------------------------
 1 | import { post } from './Gateway'
 2 | 
 3 | export function encrypt(data: string, signal?: AbortSignal): Promise<string> {
 4 |   return post<string>({
 5 |     url: '/api/encrypt',
 6 |     data,
 7 |     headers: { 'Content-Type': 'text/plain' },
 8 |     signal,
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/help/HelpForms.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import styles from './help-forms.scss'
 3 | 
 4 | interface HelpFormProps {
 5 |   readonly children: ReactNode
 6 | }
 7 | 
 8 | interface HelpInputProps {
 9 |   readonly name: string
10 |   readonly icon?: ReactElement
11 |   readonly children: ReactNode
12 | }
13 | 
14 | export function HelpForm({ children }: HelpFormProps): ReactElement {
15 |   return <dl className={styles.helpForm}>{children}</dl>
16 | }
17 | 
18 | export function HelpInput({
19 |   name,
20 |   icon,
21 |   children,
22 | }: HelpInputProps): ReactElement {
23 |   return (
24 |     <>
25 |       <dt>
26 |         {icon}
27 |         {name}
28 |       </dt>
29 |       <dd>{children}</dd>
30 |     </>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/client/help/HelpLink.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import styles from './help-link.scss'
 3 | 
 4 | interface HelpLinkProps {
 5 |   readonly to: string
 6 |   readonly setSearchQuery: (q: string) => void
 7 | }
 8 | 
 9 | export function HelpLink({ to, setSearchQuery }: HelpLinkProps): ReactElement {
10 |   return (
11 |     <button
12 |       className={styles.query}
13 |       onClick={() => {
14 |         setSearchQuery(to)
15 |       }}
16 |     >
17 |       (see <em>{to}</em> for more details)
18 |     </button>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/client/help/help-article.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/layout';
 3 | 
 4 | .help {
 5 |   border: colours.$input-border;
 6 |   padding: 1em;
 7 | }
 8 | 
 9 | .article {
10 |   margin: layout.$spacing-height 0;
11 | }
12 | 
13 | .keywords {
14 |   display: inline-block;
15 |   list-style: none;
16 | }
17 | 
18 | .keyword {
19 |   color: colours.$mid-grey;
20 |   display: inline-block;
21 |   margin: 0 0.5em;
22 | }
23 | 
24 | .keywordMatched {
25 |   color: colours.$off-black;
26 |   font-weight: bold;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/client/help/help-content.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/layout';
 2 | 
 3 | .articles {
 4 |   list-style: none;
 5 |   margin: layout.$spacing-height 0 0 0;
 6 | 
 7 |   > li {
 8 |     margin: 0 0 layout.$spacing-height 0;
 9 |   }
10 | 
11 |   > li:last-child {
12 |     margin: 0;
13 |   }
14 | 
15 |   &:empty {
16 |     display: none;
17 |   }
18 | }
19 | 
20 | .notFound {
21 |   display: none;
22 | 
23 |   ul:empty + & {
24 |     display: block;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/client/help/help-forms.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/layout';
 2 | 
 3 | .helpForm {
 4 |   margin: 1em 0 0;
 5 | 
 6 |   > dt {
 7 |     font-weight: bold;
 8 |     margin: 0.5em 0 0;
 9 |   }
10 | 
11 |   > dd {
12 |     margin-left: layout.$spacing-width;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/client/help/help-link.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/accessibility';
 2 | 
 3 | .query {
 4 |   @include accessibility.interactive;
 5 | 
 6 |   background: none;
 7 |   border: none;
 8 |   cursor: pointer;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/help/help.scss:
--------------------------------------------------------------------------------
1 | @use '../common/layout';
2 | 
3 | .modal {
4 |   align-self: normal;
5 |   margin: layout.$spacing-height 0;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/client/help/keyboard-shortcuts.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/typography';
 3 | @use '../common/layout';
 4 | 
 5 | .header {
 6 |   margin: layout.$spacing-height 0 0 0;
 7 | }
 8 | 
 9 | .binding {
10 |   background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
11 |   border: colours.$mid-grey 1px solid;
12 |   border-radius: 5px;
13 |   box-shadow: 0 1px 0 #919193;
14 |   color: colours.$off-black;
15 |   font-family: typography.$monospace-font;
16 |   margin: 0.1em;
17 |   padding: 0.1em 0.3em;
18 | }
19 | 
20 | .shortcut {
21 |   align-items: center;
22 |   display: flex;
23 |   justify-content: space-between;
24 |   margin: 0.5em 0 0;
25 |   padding: 0.5em;
26 | 
27 |   & .binding:first-child {
28 |     margin-left: 1em;
29 |   }
30 | }
31 | 
32 | .shortcuts {
33 |   list-style: none;
34 | 
35 |   & .shortcut:nth-child(odd) {
36 |     background: colours.$light-grey;
37 |   }
38 | }
39 | 
40 | .multipleShortcuts {
41 |   white-space: nowrap;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/client/index.tsx:
--------------------------------------------------------------------------------
 1 | import 'core-js/stable'
 2 | import 'regenerator-runtime/runtime'
 3 | import { createRoot } from 'react-dom/client'
 4 | import { App } from './App'
 5 | import { error } from './common/Logger'
 6 | import { appRoutes } from './AppRoutes'
 7 | import { store } from './configuration/ReduxStore'
 8 | 
 9 | const rootNodeId = 'root'
10 | const rootNode = document.getElementById(rootNodeId)
11 | 
12 | if (rootNode) {
13 |   const root = createRoot(rootNode)
14 |   root.render(
15 |     <App appElement={`#${rootNodeId}`} store={store} router={appRoutes()} />,
16 |   )
17 | } else {
18 |   error(`Unable to find the #${rootNodeId} node to mount!`)
19 | }
20 | 


--------------------------------------------------------------------------------
/src/client/monitor/MonitorHelp.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { HelpArticle, HelpProps } from '../help/HelpArticle'
 3 | import { RoutePaths } from '../AppRoutes'
 4 | 
 5 | const keywords = ['monitor']
 6 | 
 7 | export function MonitorHelp({
 8 |   searchQuery,
 9 |   helpLink,
10 | }: HelpProps): ReactElement {
11 |   return (
12 |     <HelpArticle
13 |       keywords={keywords}
14 |       searchQuery={searchQuery}
15 |       title="Monitor"
16 |       page={RoutePaths.monitor}
17 |     >
18 |       <p>
19 |         The Monitor page displays interesting projects once a CCTray XML feed
20 |         has been added via the Tracking settings {helpLink('tracking')}.
21 |       </p>
22 |       <p>
23 |         The Display settings contains various options that can change how the
24 |         Monitor page looks and behaves {helpLink('display')}.
25 |       </p>
26 |       <p>
27 |         If no interesting projects are being displayed then a random success
28 |         message will be displayed {helpLink('success')}.
29 |       </p>
30 |     </HelpArticle>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/client/monitor/interesting-projects.scss:
--------------------------------------------------------------------------------
1 | @use '../common/layout';
2 | 
3 | .interestingProjects {
4 |   @include layout.fill-parent;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/monitor/monitor.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:color';
 2 | @use '../common/colours';
 3 | @use '../common/typography';
 4 | 
 5 | .monitor {
 6 |   background-color: colours.$black;
 7 |   color: colours.$off-white;
 8 |   display: flex;
 9 |   font-family: typography.$monospace-font;
10 |   min-height: 100%;
11 |   width: 100%;
12 | }
13 | 
14 | .projects {
15 |   flex: 1;
16 |   position: relative;
17 | }
18 | 
19 | .projectsInner {
20 |   height: 100%;
21 |   position: absolute;
22 |   width: 100%;
23 | }
24 | 
25 | .menusHidden {
26 |   cursor: none;
27 | }
28 | 
29 | .mute {
30 |   background: color.change(colours.$off-black, $alpha: 0.6);
31 |   border-radius: 1em;
32 |   bottom: 1em;
33 |   color: color.change(colours.$off-white, $alpha: 0.8);
34 |   font-size: 2em;
35 |   margin: 0;
36 |   outline: 0.3em solid color.change(colours.$off-black, $alpha: 0.6);
37 |   position: absolute;
38 |   right: 1em;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/client/monitor/scaled-grid.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/layout';
 2 | 
 3 | .scaledGrid {
 4 |   @include layout.fill-parent;
 5 | 
 6 |   display: flex;
 7 |   flex-wrap: wrap;
 8 |   list-style-type: none;
 9 | }
10 | 
11 | .item {
12 |   display: inline-block;
13 |   min-height: 25px;
14 |   padding: 5px;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/monitor/scaled-tile.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/layout';
 2 | @use '../common/typography';
 3 | @use '../common/responsive';
 4 | 
 5 | $border-radius: 5px;
 6 | 
 7 | .tile {
 8 |   @include layout.fill-parent;
 9 | 
10 |   border-radius: $border-radius;
11 |   display: flex;
12 |   flex-direction: column;
13 |   font-family: typography.$monospace-font;
14 |   text-transform: lowercase;
15 | }
16 | 
17 | .header {
18 |   border-top-left-radius: $border-radius;
19 |   border-top-right-radius: $border-radius;
20 |   padding: 0 1em;
21 |   text-align: center;
22 |   white-space: nowrap;
23 | 
24 |   @include typography.font-scale(-1);
25 | 
26 |   @include responsive.respond-to(tablet, desktop) {
27 |     @include typography.font-scale(0);
28 |   }
29 | 
30 |   &.small {
31 |     display: none;
32 |   }
33 | }
34 | 
35 | .body {
36 |   flex-grow: 1;
37 |   overflow: hidden;
38 |   text-align: center;
39 | }
40 | 
41 | .footer {
42 |   border-bottom-left-radius: $border-radius;
43 |   border-bottom-right-radius: $border-radius;
44 |   overflow: hidden;
45 |   white-space: nowrap;
46 | 
47 |   @include typography.font-scale(-1);
48 | 
49 |   @include responsive.respond-to(tablet, desktop) {
50 |     @include typography.font-scale(0);
51 |   }
52 | 
53 |   &.small {
54 |     display: none;
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/client/monitor/tile-project.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/layout';
 3 | @use '../common/links';
 4 | @use '../common/accessibility';
 5 | 
 6 | .tile:focus-within {
 7 |   @include accessibility.focus;
 8 | }
 9 | 
10 | .identifier {
11 |   @include layout.fill-parent;
12 | 
13 |   font-size: 0.9em;
14 |   overflow: hidden;
15 |   text-overflow: ellipsis;
16 | }
17 | 
18 | .additionalInfo {
19 |   @include layout.fill-parent;
20 | 
21 |   align-items: baseline;
22 |   display: flex;
23 |   font-size: 0.9em;
24 |   justify-content: space-between;
25 |   padding: 0 1em;
26 | }
27 | 
28 | .link {
29 |   color: inherit;
30 |   text-decoration-line: none;
31 | 
32 |   &:visited {
33 |     color: inherit;
34 |   }
35 | 
36 |   &:hover {
37 |     background-color: inherit;
38 |     color: inherit;
39 |     text-decoration-line: underline;
40 |   }
41 | 
42 |   &:focus {
43 |     background-color: inherit;
44 |     color: inherit;
45 |     outline: none;
46 |   }
47 | }
48 | 
49 | .icon {
50 |   font-size: 0.75em;
51 |   margin: 0 0.5em 0 0;
52 | }
53 | 
54 | .prognosis {
55 |   margin: 0 1em 0 0;
56 | }
57 | 
58 | .buildLabel {
59 |   overflow: hidden;
60 |   padding-left: 1em;
61 |   text-overflow: ellipsis;
62 | }
63 | 


--------------------------------------------------------------------------------
/src/client/monitor/tile-projects-not-shown.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | 
 3 | .summary {
 4 |   background-color: colours.$off-black;
 5 |   color: colours.$off-white;
 6 |   text-align: center;
 7 | }
 8 | 
 9 | .footer {
10 |   display: flex;
11 |   flex-wrap: nowrap;
12 |   font-size: 0.25em;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/nevergreen.scss:
--------------------------------------------------------------------------------
 1 | @use 'defaults';
 2 | 
 3 | .nevergreen {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   min-height: 100vh;
 7 | 
 8 |   &:focus {
 9 |     outline: none;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/queryClient.ts:
--------------------------------------------------------------------------------
 1 | import { QueryClient } from '@tanstack/react-query'
 2 | 
 3 | export const queryClient = new QueryClient({
 4 |   defaultOptions: {
 5 |     queries: {
 6 |       gcTime: 0,
 7 |       staleTime: 0,
 8 |       refetchOnWindowFocus: false,
 9 |       retry: false,
10 |     },
11 |   },
12 | })
13 | 


--------------------------------------------------------------------------------
/src/client/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *


--------------------------------------------------------------------------------
/src/client/settings/AddLink.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import cn from 'classnames'
 3 | import { Plus } from '../common/icons/Plus'
 4 | import { useNavigationShortcut } from '../NavigationShortcutsHook'
 5 | import { LinkButton, LinkButtonProps } from '../common/LinkButton'
 6 | import styles from './add-link.scss'
 7 | 
 8 | export function AddLink({
 9 |   className,
10 |   ...props
11 | }: Omit<LinkButtonProps, 'to'>): ReactElement {
12 |   useNavigationShortcut('a', 'add')
13 |   return (
14 |     <LinkButton
15 |       className={cn(styles.addButton, className)}
16 |       to="add"
17 |       {...props}
18 |       icon={<Plus />}
19 |     />
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/settings/add-link.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/layout';
 3 | @use '../common/links';
 4 | 
 5 | .addButton {
 6 |   @include links.link(
 7 |     $color: colours.$white,
 8 |     $visited-color: colours.$white,
 9 |     $interactive-color: colours.$white,
10 |     $interactive-background-color: colours.$blue
11 |   );
12 | 
13 |   align-items: center;
14 |   background-color: colours.$blue;
15 |   display: inline-flex;
16 |   margin: layout.$spacing-height 0;
17 |   padding: 0.5em 1em;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/BackupActionCreators.test.ts:
--------------------------------------------------------------------------------
 1 | import { configurationImported } from './BackupActionCreators'
 2 | import { setSystemTime } from '../../testUtils/testHelpers'
 3 | 
 4 | describe(configurationImported.toString(), () => {
 5 |   it('should add the timestamp', () => {
 6 |     setSystemTime('2023-05-26T19:13:00')
 7 |     const action = configurationImported({})
 8 |     expect(action.payload.timestamp).toMatch(/2023-05-26T19:13:00/)
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/BackupActionCreators.ts:
--------------------------------------------------------------------------------
 1 | import { Configuration } from '../../configuration/Configuration'
 2 | import { createAction } from '@reduxjs/toolkit'
 3 | import { RemoteLocation } from './RemoteLocationsReducer'
 4 | import { now } from '../../common/DateTime'
 5 | 
 6 | export const configurationImported = createAction(
 7 |   'configurationImported',
 8 |   (configuration: Configuration, fromLocation?: RemoteLocation) => {
 9 |     return {
10 |       payload: {
11 |         configuration,
12 |         fromLocation,
13 |         timestamp: now(),
14 |       },
15 |     }
16 |   },
17 | )
18 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/BackupLogo.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import { RemoteLocationOptions } from './RemoteLocationOptions'
 3 | import { GitHubLogo } from '../../common/icons/GitHubLogo'
 4 | import { GitLabLogo } from '../../common/icons/GitLabLogo'
 5 | import { JsonLogo } from '../../common/icons/JsonLogo'
 6 | 
 7 | interface RemoteLocationLogoProps extends SVGProps<SVGSVGElement> {
 8 |   readonly where: RemoteLocationOptions
 9 | }
10 | 
11 | export function BackupLogo({
12 |   where,
13 |   ...props
14 | }: RemoteLocationLogoProps): ReactElement {
15 |   return (
16 |     <>
17 |       {where === RemoteLocationOptions.gitHub && <GitHubLogo {...props} />}
18 |       {where === RemoteLocationOptions.gitLab && <GitLabLogo {...props} />}
19 |       {where === RemoteLocationOptions.custom && <JsonLogo {...props} />}
20 |     </>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/BackupPage.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, waitForElementToBeRemoved } from '@testing-library/react'
 2 | import { render } from '../../testUtils/testHelpers'
 3 | import { buildRemoteBackupLocation } from '../../testUtils/builders'
 4 | import { BackupPage } from './BackupPage'
 5 | import { remoteLocationsRoot } from './RemoteLocationsReducer'
 6 | import { RemoteLocationOptions } from './RemoteLocationOptions'
 7 | 
 8 | it('should be able to remove remote locations', async () => {
 9 |   const state = {
10 |     [remoteLocationsRoot]: {
11 |       internalId: buildRemoteBackupLocation({
12 |         internalId: 'internalId',
13 |         where: RemoteLocationOptions.custom,
14 |         url: 'http://example.com',
15 |       }),
16 |     },
17 |   }
18 |   const { user } = render(<BackupPage />, { state })
19 | 
20 |   expect(screen.getByText(/http:\/\/example.com/)).toBeInTheDocument()
21 | 
22 |   void user.click(
23 |     screen.getByRole('button', {
24 |       name: 'Remove Remote Custom server location',
25 |     }),
26 |   )
27 | 
28 |   await waitForElementToBeRemoved(() =>
29 |     screen.queryByText(/http:\/\/example.com/),
30 |   )
31 | })
32 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/BackupPage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { RemoteBackupCard } from './RemoteBackupCard'
 3 | import { getBackupLocations } from './RemoteLocationsReducer'
 4 | import { LocalBackupCard } from './LocalBackupCard'
 5 | import { Page } from '../../common/Page'
 6 | import { FloppyDisk } from '../../common/icons/FloppyDisk'
 7 | import { CardList } from '../../common/card/CardList'
 8 | import { useAppSelector } from '../../configuration/Hooks'
 9 | import { AddLink } from '../AddLink'
10 | 
11 | export function BackupPage(): ReactElement {
12 |   const backupLocations = useAppSelector(getBackupLocations)
13 | 
14 |   return (
15 |     <Page title="Backup settings" icon={<FloppyDisk />}>
16 |       <LocalBackupCard />
17 |       <AddLink>Add remote location</AddLink>
18 |       <CardList>
19 |         {Object.values(backupLocations).map((backupLocation) => {
20 |           return (
21 |             <RemoteBackupCard
22 |               key={backupLocation.internalId}
23 |               location={backupLocation}
24 |             />
25 |           )
26 |         })}
27 |       </CardList>
28 |     </Page>
29 |   )
30 | }
31 | 
32 | export const Component = BackupPage
33 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/LocalBackupCard.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { Card } from '../../common/card/Card'
 3 | import { CardHeading } from '../../common/card/CardHeading'
 4 | import { VisuallyHidden } from '../../common/VisuallyHidden'
 5 | import { LinkButton } from '../../common/LinkButton'
 6 | import { FloppyDisk } from '../../common/icons/FloppyDisk'
 7 | import { FolderOpen } from '../../common/icons/FolderOpen'
 8 | import styles from './local-backup-card.scss'
 9 | 
10 | export function LocalBackupCard(): ReactElement {
11 |   const header = <CardHeading title="Backup locally to a file" />
12 | 
13 |   return (
14 |     <Card header={header}>
15 |       <LinkButton
16 |         className={styles.export}
17 |         icon={<FloppyDisk />}
18 |         to="local/export"
19 |       >
20 |         Export<VisuallyHidden> locally</VisuallyHidden>
21 |       </LinkButton>
22 |       <LinkButton
23 |         className={styles.import}
24 |         icon={<FolderOpen />}
25 |         to="local/import"
26 |       >
27 |         Import<VisuallyHidden> local</VisuallyHidden>
28 |       </LinkButton>
29 |     </Card>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/RemoteBackupDetailsPage.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen } from '@testing-library/react'
 2 | import { buildRemoteBackupLocation } from '../../testUtils/builders'
 3 | import { render } from '../../testUtils/testHelpers'
 4 | import { RemoteBackupDetailsPage } from './RemoteBackupDetailsPage'
 5 | 
 6 | it('should link to the export page', async () => {
 7 |   const outletContext = buildRemoteBackupLocation()
 8 | 
 9 |   const { user } = render(<RemoteBackupDetailsPage />, {
10 |     outletContext,
11 |   })
12 |   await user.click(screen.getByRole('link', { name: 'Export' }))
13 | 
14 |   expect(window.location.pathname).toEqual('/export')
15 | })
16 | 
17 | it('should link to the import page', async () => {
18 |   const outletContext = buildRemoteBackupLocation()
19 | 
20 |   const { user } = render(<RemoteBackupDetailsPage />, {
21 |     outletContext,
22 |   })
23 |   await user.click(screen.getByRole('link', { name: 'Import' }))
24 | 
25 |   expect(window.location.pathname).toEqual('/import')
26 | })
27 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/RemoteLocationOptions.ts:
--------------------------------------------------------------------------------
 1 | import { RemoteLocation } from './RemoteLocationsReducer'
 2 | 
 3 | export const DEFAULT_GITHUB_URL = 'https://api.github.com'
 4 | export const DEFAULT_GITLAB_URL = 'https://gitlab.com'
 5 | 
 6 | export enum RemoteLocationOptions {
 7 |   custom = 'custom',
 8 |   gitHub = 'github',
 9 |   gitLab = 'gitlab',
10 | }
11 | 
12 | export function isCustomServer(
13 |   location?: RemoteLocation,
14 | ): location is RemoteLocation {
15 |   return location?.where === RemoteLocationOptions.custom
16 | }
17 | 
18 | export function isGitHub(
19 |   location?: RemoteLocation,
20 | ): location is RemoteLocation {
21 |   return location?.where === RemoteLocationOptions.gitHub
22 | }
23 | 
24 | export function isGitHubEnterprise(
25 |   location?: RemoteLocation,
26 | ): location is RemoteLocation {
27 |   return (
28 |     location?.where === RemoteLocationOptions.gitHub &&
29 |     location.url !== DEFAULT_GITHUB_URL
30 |   )
31 | }
32 | 
33 | export function isGitLab(
34 |   location?: RemoteLocation,
35 | ): location is RemoteLocation {
36 |   return location?.where === RemoteLocationOptions.gitLab
37 | }
38 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/RemoteLocationsActions.ts:
--------------------------------------------------------------------------------
 1 | import { createAction } from '@reduxjs/toolkit'
 2 | import { now } from '../../common/DateTime'
 3 | import { RemoteLocation } from './RemoteLocationsReducer'
 4 | 
 5 | export const addBackupLocation =
 6 |   createAction<RemoteLocation>('addBackupLocation')
 7 | 
 8 | export const backupExported = createAction(
 9 |   'backupExported',
10 |   (internalId: string, externalId: string) => {
11 |     return {
12 |       payload: {
13 |         internalId,
14 |         externalId,
15 |         timestamp: now(),
16 |       },
17 |     }
18 |   },
19 | )
20 | 
21 | export const removeBackupLocation = createAction<string>('removeBackupLocation')
22 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/add-backup.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | 
 3 | .where {
 4 |   @include layout.fixed-width(20em);
 5 | }
 6 | 
 7 | .id,
 8 | .password {
 9 |   @include layout.fixed-width(38em);
10 | }
11 | 
12 | .add {
13 |   margin: layout.$spacing-height 0 0 0;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/export/ClipboardHook.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import ClipboardJS from 'clipboard'
 3 | 
 4 | export function useClipboard(
 5 |   elementSelector: string,
 6 |   onSuccess: () => void,
 7 |   onError: () => void,
 8 | ): boolean {
 9 |   const supported = ClipboardJS.isSupported()
10 | 
11 |   useEffect(() => {
12 |     if (!supported) {
13 |       return
14 |     }
15 | 
16 |     const clipboard = new ClipboardJS(elementSelector)
17 | 
18 |     clipboard.on('error', onError)
19 | 
20 |     clipboard.on('success', (evt) => {
21 |       onSuccess()
22 |       evt.clearSelection()
23 |     })
24 | 
25 |     return () => {
26 |       clipboard.destroy()
27 |     }
28 |   }, [elementSelector, onSuccess, onError, supported])
29 | 
30 |   return supported
31 | }
32 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/export/ExportRemoteHelp.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { HelpArticle, HelpProps } from '../../../help/HelpArticle'
 3 | import { HelpForm, HelpInput } from '../../../help/HelpForms'
 4 | import { RoutePaths } from '../../../AppRoutes'
 5 | 
 6 | const keywords = ['backup', 'export', 'current configuration']
 7 | 
 8 | export function ExportRemoteHelp({ searchQuery }: HelpProps): ReactElement {
 9 |   return (
10 |     <HelpArticle
11 |       keywords={keywords}
12 |       searchQuery={searchQuery}
13 |       title="Export remote"
14 |       page={RoutePaths.backupExportRemote}
15 |     >
16 |       <HelpForm>
17 |         <HelpInput name="Current configuration">
18 |           This is the current configuration that will be exported.
19 |         </HelpInput>
20 |         <HelpInput name="Export">
21 |           This will perform the export of the configuration in{' '}
22 |           <em>Current configuration</em>.
23 |         </HelpInput>
24 |         <HelpInput name="Cancel">Cancels exporting.</HelpInput>
25 |       </HelpForm>
26 |     </HelpArticle>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/export/export-locally-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../common/responsive';
 2 | @use '../../../common/layout';
 3 | 
 4 | $button-size: 220px;
 5 | 
 6 | .exportInput {
 7 |   margin: layout.$spacing-height 0 0 0;
 8 | }
 9 | 
10 | .saveFile,
11 | .copy {
12 |   margin: layout.$spacing-height 0 0 0;
13 |   min-width: $button-size;
14 | 
15 |   @include responsive.respond-to(tablet, desktop) {
16 |     display: block;
17 |   }
18 | }
19 | 
20 | .copy {
21 |   @include responsive.respond-to(tablet, desktop) {
22 |     margin: layout.$spacing-height 0 0 0;
23 |   }
24 | }
25 | 
26 | .cancel {
27 |   margin: layout.$spacing-height 0 0 0;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/ImportSuccessPage.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '../../../testUtils/testHelpers'
 2 | import { screen } from '@testing-library/react'
 3 | import { ImportSuccessPage } from './ImportSuccessPage'
 4 | 
 5 | it('should show a success message', () => {
 6 |   render(<ImportSuccessPage />)
 7 | 
 8 |   expect(
 9 |     screen.getByText('Successfully imported configuration'),
10 |   ).toBeInTheDocument()
11 | })
12 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/ImportSuccessPage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { Page } from '../../../common/Page'
 3 | import { Checkmark } from '../../../common/icons/Checkmark'
 4 | import { InfoMessages } from '../../../common/Messages'
 5 | 
 6 | export function ImportSuccessPage(): ReactElement {
 7 |   return (
 8 |     <Page title="Import successful" icon={<Checkmark />}>
 9 |       <InfoMessages messages="Successfully imported configuration" />
10 |     </Page>
11 |   )
12 | }
13 | 
14 | export const Component = ImportSuccessPage
15 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/StopDefaultDragAndDropBehaviourHook.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | 
 3 | /** This stops the browser allowing files to be dropped anywhere in the window to open them */
 4 | export function useStopDefaultDragAndDropBehaviour(): void {
 5 |   useEffect(() => {
 6 |     const listener = (evt: DragEvent) => {
 7 |       evt.preventDefault()
 8 |     }
 9 | 
10 |     window.addEventListener('dragover', listener)
11 |     window.addEventListener('drop', listener)
12 | 
13 |     return () => {
14 |       window.removeEventListener('dragover', listener)
15 |       window.removeEventListener('drop', listener)
16 |     }
17 |   }, [])
18 | }
19 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/import-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../common/responsive';
 2 | @use '../../../common/layout';
 3 | 
 4 | .tryAgain {
 5 |   @include responsive.respond-to(tablet, desktop) {
 6 |     display: inline-block;
 7 |     margin: layout.$spacing-height layout.$spacing-width 0 0;
 8 |   }
 9 | }
10 | 
11 | .cancel {
12 |   @include responsive.respond-to(tablet, desktop) {
13 |     display: inline-block;
14 |     margin: layout.$spacing-height 0 0 0;
15 |   }
16 | }
17 | 
18 | .messages {
19 |   margin: 0 0 layout.$spacing-height 0;
20 | }
21 | 
22 | .form {
23 |   margin: layout.$spacing-height 0 0 0;
24 | }
25 | 
26 | .loading {
27 |   height: auto;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/import-success-page.scss:
--------------------------------------------------------------------------------
1 | .header {
2 |   padding: 0.5em;
3 |   text-align: left;
4 | }
5 | 
6 | .number {
7 |   text-align: center;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/import/input-file.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../common/colours';
 2 | @use '../../../common/accessibility';
 3 | @use '../../../common/forms/button';
 4 | 
 5 | .openFile {
 6 |   @include accessibility.interactive;
 7 |   @extend %secondary;
 8 | 
 9 |   box-shadow: colours.$shadow;
10 |   transition: box-shadow 0.1s ease-in;
11 | }
12 | 
13 | .openFileInput {
14 |   @include accessibility.visually-hidden;
15 | 
16 |   &:focus + label {
17 |     @include accessibility.focus;
18 |   }
19 | 
20 |   &:disabled + label {
21 |     background-color: colours.$light-grey;
22 |     color: colours.$mid-grey;
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/local-backup-card.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/responsive';
 2 | @use '../../common/layout';
 3 | 
 4 | .export,
 5 | .import {
 6 |   @include responsive.respond-to(tablet, desktop) {
 7 |     margin: 0 layout.$spacing-width 0 0;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/remote-backup-details-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | @use '../../common/responsive';
 3 | 
 4 | .exportButton,
 5 | .importButton {
 6 |   @include responsive.respond-to(tablet, desktop) {
 7 |     display: inline-block;
 8 |     margin: layout.$spacing-height layout.$spacing-width 0 0;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/settings/backup/text-area.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/colours';
 2 | @use '../../common/typography';
 3 | @use '../../common/accessibility';
 4 | @use '../../common/layout';
 5 | 
 6 | .data {
 7 |   @include typography.font-scale(-2);
 8 | 
 9 |   border: 1px solid colours.$mid-grey;
10 |   font-family: typography.$monospace-font;
11 |   height: 20em;
12 |   margin: layout.$spacing-height 0 0 0;
13 |   padding: 0.5em;
14 |   resize: vertical;
15 |   vertical-align: top; // remove whitespace from the bottom
16 |   white-space: pre;
17 |   width: 100%;
18 | 
19 |   &:not(:disabled) {
20 |     &:read-write {
21 |       @include accessibility.interactive($focus-color-change-percentage: 0%);
22 |     }
23 | 
24 |     &:read-only {
25 |       &:focus {
26 |         @include accessibility.focus;
27 |       }
28 |     }
29 |   }
30 | }
31 | 
32 | .containerError {
33 |   border-left: 5px solid colours.$error;
34 |   padding-left: 1em;
35 | }
36 | 
37 | .error {
38 |   outline: layout.$outline-size solid colours.$error;
39 |   z-index: layout.$focus-index;
40 | }
41 | 
42 | .errorMessage {
43 |   color: colours.$error;
44 |   font-weight: bold;
45 |   list-style: none;
46 |   margin: 0.5em 0;
47 | }
48 | 


--------------------------------------------------------------------------------
/src/client/settings/colours/ContrastHook.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import { calcAPCA } from 'apca-w3'
 3 | 
 4 | interface ContrastCheckerHookResponse {
 5 |   readonly lightnessContrast: number
 6 |   readonly isLowContrast: boolean
 7 | }
 8 | 
 9 | export function useAPCA(
10 |   textColour: string,
11 |   backgroundColour: string,
12 | ): ContrastCheckerHookResponse {
13 |   const [lightnessContrast, setLightnessContrast] = useState(0)
14 | 
15 |   useEffect(() => {
16 |     const lc = calcAPCA(textColour, backgroundColour) as number
17 |     setLightnessContrast(Math.abs(lc))
18 |   }, [textColour, backgroundColour])
19 | 
20 |   return { lightnessContrast, isLowContrast: lightnessContrast < 60 }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/settings/colours/change-colours-section.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | 
 3 | .coloursContainer {
 4 |   @include layout.grid(
 5 |     $mobile-columns: 2,
 6 |     $tablet-columns: 2,
 7 |     $desktop-columns: 2
 8 |   );
 9 | }
10 | 
11 | .coloursInputContainer {
12 |   @include layout.grid(
13 |     $mobile-columns: 1,
14 |     $tablet-columns: 1,
15 |     $desktop-columns: 2
16 |   );
17 | }
18 | 
19 | .preview {
20 |   border-radius: 5px;
21 |   margin: layout.$spacing-height 0 0 0;
22 |   text-align: center;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/client/settings/display/display-settings-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/responsive';
 2 | 
 3 | .dropDown {
 4 |   @include responsive.respond-to(tablet, desktop) {
 5 |     width: 20em;
 6 |   }
 7 | }
 8 | 
 9 | .preview {
10 |   margin: 0;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/settings/notifications/notifications-settings.scss:
--------------------------------------------------------------------------------
1 | @use '../../common/layout';
2 | 
3 | .testVolume {
4 |   margin-left: layout.$spacing-width;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/settings/notifications/pacman_death.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/settings/notifications/pacman_death.mp3


--------------------------------------------------------------------------------
/src/client/settings/notifications/test_audio_volume.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/build-canaries/nevergreen/d9a79ce1645760ab48f67792c8b01b1bf5ef7c20/src/client/settings/notifications/test_audio_volume.mp3


--------------------------------------------------------------------------------
/src/client/settings/other/other-settings-page.scss:
--------------------------------------------------------------------------------
1 | @use '../../common/layout';
2 | 
3 | .reset {
4 |   @include layout.blocking;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/settings/preview.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/typography';
 3 | 
 4 | .preview {
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   min-height: 100%;
 8 |   width: 100%;
 9 | }
10 | 
11 | .projects {
12 |   flex: 1;
13 |   font-family: typography.$monospace-font;
14 |   position: relative;
15 | }
16 | 
17 | .projectsInner {
18 |   height: 100%;
19 |   position: absolute;
20 |   width: 100%;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/settings/prognosis/prognosis-settings-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | 
 3 | .coloursContainer {
 4 |   @include layout.grid(
 5 |     $mobile-columns: 2,
 6 |     $tablet-columns: 2,
 7 |     $desktop-columns: 2
 8 |   );
 9 | }
10 | 
11 | .preview {
12 |   border-radius: 5px;
13 |   margin: layout.$spacing-height 0 0 0;
14 |   text-align: center;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/client/settings/success/AddMessagePageHelp.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { ExternalLink } from '../../common/ExternalLink'
 3 | import { HelpArticle, HelpProps } from '../../help/HelpArticle'
 4 | import { RoutePaths } from '../../AppRoutes'
 5 | import { HelpForm, HelpInput } from '../../help/HelpForms'
 6 | 
 7 | const keywords = [
 8 |   'success',
 9 |   'messages',
10 |   'images',
11 |   'add',
12 |   'url',
13 |   'jpeg',
14 |   'gif',
15 |   'png',
16 | ]
17 | 
18 | export function AddMessagePageHelp({ searchQuery }: HelpProps): ReactElement {
19 |   return (
20 |     <HelpArticle
21 |       keywords={keywords}
22 |       searchQuery={searchQuery}
23 |       title="Add success message"
24 |       page={RoutePaths.successAdd}
25 |     >
26 |       <HelpForm>
27 |         <HelpInput name="Message">
28 |           You can add text messages or any{' '}
29 |           <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats">
30 |             valid image URLs
31 |           </ExternalLink>
32 |           .
33 |         </HelpInput>
34 |       </HelpForm>
35 |     </HelpArticle>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/client/settings/success/add-message-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | @use '../../common/typography';
 3 | 
 4 | .addMessageContainer {
 5 |   margin: 0;
 6 | }
 7 | 
 8 | .addMessageInput {
 9 |   font-family: typography.$monospace-font;
10 | }
11 | 
12 | .add {
13 |   margin: layout.$spacing-height 0 0 0;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/client/settings/success/success-messages-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | @use '../../common/responsive';
 3 | @use '../../common/forms/forms';
 4 | 
 5 | .addButton {
 6 |   margin-top: 0;
 7 | }
 8 | 
 9 | .messages {
10 |   list-style: none;
11 |   margin: 0;
12 | 
13 |   @include layout.grid($mobile-columns: 2, $desktop-columns: 2);
14 | }
15 | 
16 | .card {
17 |   margin: 0;
18 | }
19 | 
20 | .cardHeader {
21 |   background-color: black;
22 |   justify-content: flex-end;
23 |   margin-bottom: calc(
24 |     -#{layout.$card-header-padding * 2} - #{forms.$standard-input-size-mobile}
25 |   );
26 |   overflow: visible;
27 | 
28 |   @include responsive.respond-to(tablet, desktop) {
29 |     margin-bottom: calc(
30 |       -#{layout.$card-header-padding * 2} -
31 |         #{forms.$standard-input-size-above-mobile}
32 |     );
33 |   }
34 | }
35 | 
36 | .remove {
37 |   z-index: 1;
38 | }
39 | 
40 | .cardBody {
41 |   padding: 0;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/AddFeedPage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { feedAdded } from './TrackingActionCreators'
 3 | import { Page } from '../../common/Page'
 4 | import { Xml } from '../../common/icons/Xml'
 5 | import { ConnectionForm, ConnectionFormFields } from './ConnectionForm'
 6 | import { RoutePaths } from '../../AppRoutes'
 7 | import { useAppDispatch } from '../../configuration/Hooks'
 8 | import { createId } from '../../common/Utils'
 9 | 
10 | export function AddFeedPage(): ReactElement {
11 |   const dispatch = useAppDispatch()
12 | 
13 |   const onSuccess = ({
14 |     url,
15 |     authType,
16 |     username,
17 |     encryptedAuth,
18 |   }: ConnectionFormFields): string => {
19 |     const trayId = createId()
20 |     dispatch(
21 |       feedAdded({
22 |         trayId,
23 |         url,
24 |         authType,
25 |         username,
26 |         encryptedAuth,
27 |       }),
28 |     )
29 |     return `/settings/tracking/${trayId}/projects`
30 |   }
31 | 
32 |   return (
33 |     <Page title="Add CCTray XML feed" icon={<Xml />}>
34 |       <ConnectionForm onSuccess={onSuccess} onCancel={RoutePaths.tracking} />
35 |     </Page>
36 |   )
37 | }
38 | 
39 | export const Component = AddFeedPage
40 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/FeedLogo.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, SVGProps } from 'react'
 2 | import type { Feed } from './FeedsReducer'
 3 | import { ServerTypes } from './FeedsReducer'
 4 | import { Xml } from '../../common/icons/Xml'
 5 | import { CircleCi } from '../../common/icons/CircleCi'
 6 | import { GoCd } from '../../common/icons/GoCd'
 7 | 
 8 | interface FeedLogoProps extends SVGProps<SVGSVGElement> {
 9 |   readonly feed: Feed
10 | }
11 | 
12 | export function FeedLogo({ feed, ...props }: FeedLogoProps): ReactElement {
13 |   return (
14 |     <>
15 |       {feed.serverType === ServerTypes.generic && <Xml {...props} />}
16 |       {feed.serverType === ServerTypes.circle && <CircleCi {...props} />}
17 |       {feed.serverType === ServerTypes.go && <GoCd {...props} />}
18 |     </>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/FeedPage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import type { Feed } from './FeedsReducer'
 3 | import { getFeed } from './FeedsReducer'
 4 | import { Navigate, Outlet, useOutletContext, useParams } from 'react-router'
 5 | import { RoutePaths } from '../../AppRoutes'
 6 | import { useAppSelector } from '../../configuration/Hooks'
 7 | 
 8 | export function FeedPage(): ReactElement {
 9 |   const { id } = useParams()
10 |   const feed = useAppSelector(getFeed(id ?? ''))
11 | 
12 |   if (feed) {
13 |     return <Outlet context={feed} />
14 |   } else {
15 |     return <Navigate to={RoutePaths.tracking} />
16 |   }
17 | }
18 | 
19 | export function useFeedContext(): Feed {
20 |   return useOutletContext()
21 | }
22 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/TrackingActionCreators.ts:
--------------------------------------------------------------------------------
 1 | import type { Feed } from './FeedsReducer'
 2 | import { AuthTypes } from './FeedsReducer'
 3 | import { createAction } from '@reduxjs/toolkit'
 4 | 
 5 | export interface FeedAddedAction {
 6 |   readonly trayId: string
 7 |   readonly url: string
 8 |   readonly authType: AuthTypes
 9 |   readonly username?: string
10 |   readonly encryptedAuth?: string
11 | }
12 | 
13 | interface FeedUpdatedAction {
14 |   readonly trayId: string
15 |   readonly feed: Partial<Feed>
16 |   readonly selectedProjects?: ReadonlyArray<string>
17 | }
18 | 
19 | export const feedAdded = createAction<FeedAddedAction>('tracking/feedAdded')
20 | export const feedUpdated = createAction<FeedUpdatedAction>(
21 |   'tracking/feedUpdated',
22 | )
23 | export const feedRemoved = createAction<string>('tracking/feedRemoved')
24 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/connection-form.scss:
--------------------------------------------------------------------------------
 1 | @use '../../common/layout';
 2 | 
 3 | .inputs {
 4 |   margin: layout.$spacing-height 0 0 0;
 5 | }
 6 | 
 7 | .authType,
 8 | .username,
 9 | .password,
10 | .authToken {
11 |   @include layout.fixed-width(30em);
12 | }
13 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/projects/Refresh.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '../../../testUtils/testHelpers'
 2 | import { Refresh } from './Refresh'
 3 | import noop from 'lodash/noop'
 4 | import { screen } from '@testing-library/react'
 5 | 
 6 | it('should disable the refresh button if projects are loading', () => {
 7 |   const props = { refreshTray: noop, isLoading: true }
 8 |   render(<Refresh {...props} />)
 9 |   expect(screen.getByRole('button', { name: 'Refresh' })).toHaveAttribute(
10 |     'disabled',
11 |     '',
12 |   )
13 | })
14 | 
15 | it('should allow projects to be refreshed if they are loaded', async () => {
16 |   const refreshTray = jest.fn()
17 |   const props = { isLoading: false, refreshTray }
18 |   const { user } = render(<Refresh {...props} />)
19 |   await user.click(screen.getByRole('button', { name: 'Refresh' }))
20 |   expect(refreshTray).toHaveBeenCalled()
21 | })
22 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/projects/Refresh.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { PrimaryButton } from '../../../common/forms/Button'
 3 | import { Loop } from '../../../common/icons/Loop'
 4 | import styles from './refresh.scss'
 5 | 
 6 | interface RefreshProps {
 7 |   readonly refreshTray: () => void
 8 |   readonly isLoading: boolean
 9 | }
10 | 
11 | export function Refresh({
12 |   refreshTray,
13 |   isLoading,
14 | }: RefreshProps): ReactElement {
15 |   return (
16 |     <PrimaryButton
17 |       className={styles.refresh}
18 |       onClick={refreshTray}
19 |       icon={<Loop isLoading={isLoading} />}
20 |       disabled={isLoading}
21 |     >
22 |       Refresh
23 |     </PrimaryButton>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/projects/manage-projects-page.scss:
--------------------------------------------------------------------------------
1 | @use '../../../common/layout';
2 | 
3 | .trackingMode {
4 |   @include layout.fixed-width(20em);
5 | }
6 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/projects/refresh.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../common/responsive';
 2 | @use '../../../common/layout';
 3 | 
 4 | .refresh {
 5 |   @include responsive.respond-to(tablet, desktop) {
 6 |     display: inline-block;
 7 |     margin: 0 layout.$spacing-width 0 0;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/settings/UpdateConnectionHelp.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { HelpArticle, HelpProps } from '../../../help/HelpArticle'
 3 | import { HelpForm } from '../../../help/HelpForms'
 4 | import { RoutePaths } from '../../../AppRoutes'
 5 | import {
 6 |   ConnectionFormHelp,
 7 |   keywords as connectionKeywords,
 8 | } from '../ConnectionFormHelp'
 9 | 
10 | const keywords = ['tracking', 'settings', ...connectionKeywords]
11 | 
12 | export function UpdateConnectionHelp({ searchQuery }: HelpProps): ReactElement {
13 |   return (
14 |     <HelpArticle
15 |       keywords={keywords}
16 |       searchQuery={searchQuery}
17 |       title="Update connection"
18 |       page={RoutePaths.trackingConnection}
19 |     >
20 |       <HelpForm>
21 |         <ConnectionFormHelp />
22 |       </HelpForm>
23 |     </HelpArticle>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/settings/UpdateConnectionPage.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { Page } from '../../../common/Page'
 3 | import { feedUpdated } from '../TrackingActionCreators'
 4 | import { FeedLogo } from '../FeedLogo'
 5 | import { ConnectionForm, ConnectionFormFields } from '../ConnectionForm'
 6 | import { useFeedContext } from '../FeedPage'
 7 | import { useAppDispatch } from '../../../configuration/Hooks'
 8 | import { RoutePaths } from '../../../AppRoutes'
 9 | 
10 | export function UpdateConnectionPage(): ReactElement {
11 |   const feed = useFeedContext()
12 |   const dispatch = useAppDispatch()
13 | 
14 |   const updateDetails = (details: ConnectionFormFields) => {
15 |     dispatch(feedUpdated({ trayId: feed.trayId, feed: details }))
16 |     return RoutePaths.tracking
17 |   }
18 | 
19 |   return (
20 |     <Page title="Update connection" icon={<FeedLogo feed={feed} />}>
21 |       <ConnectionForm
22 |         existingFeed={feed}
23 |         onSuccess={updateDetails}
24 |         onCancel={RoutePaths.tracking}
25 |       />
26 |     </Page>
27 |   )
28 | }
29 | 
30 | export const Component = UpdateConnectionPage
31 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/settings/update-details-page.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../common/layout';
 2 | @use '../../../common/responsive';
 3 | 
 4 | .feedSettingsName,
 5 | .serverType {
 6 |   @include layout.fixed-width(26em);
 7 | }
 8 | 
 9 | .link {
10 |   @include responsive.respond-to(tablet, desktop) {
11 |     margin: layout.$spacing-height layout.$spacing-width 0 0;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/test-connection.scss:
--------------------------------------------------------------------------------
1 | @use '../../common/layout';
2 | 
3 | .test {
4 |   display: block;
5 |   margin: layout.$spacing-height 0 0 0;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/client/settings/tracking/tracking-page.scss:
--------------------------------------------------------------------------------
1 | @use '../../common/responsive';
2 | 
3 | .refreshTime {
4 |   @include responsive.respond-to(tablet, desktop) {
5 |     width: 20em;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/client/skip-to-content.scss:
--------------------------------------------------------------------------------
 1 | @use './common/accessibility';
 2 | @use './common/layout';
 3 | @use './common/responsive';
 4 | 
 5 | .skipButton {
 6 |   &:not(:focus) {
 7 |     @include accessibility.visually-hidden;
 8 |   }
 9 | 
10 |   &:enabled:focus {
11 |     height: 55px;
12 |     left: layout.$outline-size;
13 |     margin: 0;
14 |     position: absolute;
15 |     top: layout.$outline-size;
16 |     width: calc(100% - #{layout.$outline-size * 2});
17 | 
18 |     @include responsive.respond-to(tablet, desktop) {
19 |       width: auto;
20 |     }
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/Element.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import { createElement } from 'react'
 3 | 
 4 | interface ElementProps {
 5 |   readonly type: string
 6 |   readonly children: ReactNode
 7 | }
 8 | 
 9 | export function Element({ type, children }: ElementProps): ReactElement {
10 |   return createElement(
11 |     type,
12 |     {},
13 |     <>
14 |       &lt;{type}&gt;{children}&lt;/{type}&gt;
15 |     </>,
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/StyleGuide.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement } from 'react'
 2 | import { useEffect } from 'react'
 3 | import { Typography } from './Typography'
 4 | import { Forms } from './Forms'
 5 | import { Layout } from './Layout'
 6 | import { Icons } from './Icons'
 7 | import { Page } from '../common/Page'
 8 | import { useNevergreenContext } from '../Nevergreen'
 9 | import { UnhandledErrorMessage } from '../UnhandledErrorMessage'
10 | 
11 | export function StyleGuide(): ReactElement {
12 |   const { setBannerMessage } = useNevergreenContext()
13 |   useEffect(() => {
14 |     setBannerMessage(
15 |       'Sweet roll cookie chocolate cake gingerbread marshmallow jelly beans',
16 |     )
17 |     return () => {
18 |       setBannerMessage('')
19 |     }
20 |   }, [setBannerMessage])
21 | 
22 |   return (
23 |     <Page title="Style guide">
24 |       <Forms />
25 |       <Layout />
26 |       <Icons />
27 |       <Typography />
28 |       <UnhandledErrorMessage />
29 |     </Page>
30 |   )
31 | }
32 | 
33 | export const Component = StyleGuide
34 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/StyleGuideSection.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactElement, ReactNode } from 'react'
 2 | import styles from './style-guide-section.scss'
 3 | 
 4 | interface StyleGuideSectionProps {
 5 |   readonly title: string
 6 |   readonly children: ReactNode
 7 | }
 8 | 
 9 | export function StyleGuideSection({
10 |   title,
11 |   children,
12 | }: StyleGuideSectionProps): ReactElement {
13 |   return (
14 |     <section className={styles.section}>
15 |       <h2>{title}</h2>
16 |       <div className={styles.content}>{children}</div>
17 |     </section>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/forms.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/layout';
 3 | 
 4 | .fixedWidth {
 5 |   @include layout.fixed-width(35em);
 6 | }
 7 | 
 8 | .styledLabel {
 9 |   font-weight: bold;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/icons.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/layout';
 2 | 
 3 | .icons {
 4 |   @include layout.grid;
 5 | 
 6 |   & > span {
 7 |     &::before {
 8 |       margin-right: 1em;
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/client/styleGuide/style-guide-section.scss:
--------------------------------------------------------------------------------
 1 | @use '../common/colours';
 2 | @use '../common/layout';
 3 | 
 4 | .section {
 5 |   background-color: colours.$white;
 6 |   border: 1px solid colours.$light-grey;
 7 |   margin-top: 1em;
 8 |   padding: 1em;
 9 | }
10 | 
11 | .content {
12 |   margin-top: 1em;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/client/testUtils/fileMock.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub'
2 | 


--------------------------------------------------------------------------------
/src/client/testUtils/fileTransformer.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | 
 3 | module.exports = {
 4 |   process(src, filename) {
 5 |     return {
 6 |       code:
 7 |         'module.exports = ' +
 8 |         JSON.stringify(fs.readFileSync(filename, 'utf8')) +
 9 |         ';',
10 |     }
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/src/client/testUtils/mockApcaW3.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * apca-w3 is a pure esm module, which doesn't work "out the box" with Jest.
 3 |  * I tried following several guides online but couldn't get it working.
 4 |  * TODO: remove this file and configure babel/jest correctly
 5 |  */
 6 | module.exports = {
 7 |   calcAPCA() {
 8 |     return 0
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/src/client/testUtils/setupTestEnv.js:
--------------------------------------------------------------------------------
 1 | import 'core-js/stable'
 2 | import 'regenerator-runtime/runtime'
 3 | import '@testing-library/jest-dom'
 4 | import { act, configure } from '@testing-library/react'
 5 | import noop from 'lodash/noop'
 6 | 
 7 | configure({ testIdAttribute: 'data-locator' })
 8 | 
 9 | // Disable all logging for tests as it just adds noise to the console
10 | jest.mock('../../../src/client/common/Logger')
11 | 
12 | window.scrollTo = noop
13 | window.ResizeObserver = class ResizeObserver {
14 |   observe() {}
15 |   unobserve() {}
16 |   disconnect() {}
17 | }
18 | 
19 | afterEach(async () => {
20 |   // This has to be awaited otherwise tests don't clean up properly and cause failures
21 |   // eslint-disable-next-line @typescript-eslint/await-thenable,@typescript-eslint/no-confusing-void-expression
22 |   await act(() => {
23 |     jest.runAllTimers()
24 |   })
25 | })
26 | 


--------------------------------------------------------------------------------
/src/client/typings.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.scss' {
 2 |   const classes: Record<string, string>
 3 |   // noinspection JSDuplicatedDeclaration,JSUnusedGlobalSymbols
 4 |   export default classes
 5 | }
 6 | 
 7 | declare module '*.txt' {
 8 |   const value: string
 9 |   // noinspection JSDuplicatedDeclaration,JSUnusedGlobalSymbols
10 |   export default value
11 | }
12 | 
13 | declare module '*.png' {
14 |   const value: string
15 |   // noinspection JSDuplicatedDeclaration,JSUnusedGlobalSymbols
16 |   export default value
17 | }
18 | 
19 | declare module '*.svg' {
20 |   const value: string
21 |   // noinspection JSDuplicatedDeclaration,JSUnusedGlobalSymbols
22 |   export default value
23 | }
24 | 
25 | declare module '*.mp3' {
26 |   const value: string
27 |   // noinspection JSDuplicatedDeclaration,JSUnusedGlobalSymbols
28 |   export default value
29 | }
30 | 


--------------------------------------------------------------------------------
/src/client/unhandled-error-message.scss:
--------------------------------------------------------------------------------
 1 | @use 'common/colours';
 2 | @use 'common/layout';
 3 | 
 4 | .content {
 5 |   background-color: colours.$white;
 6 |   height: 100vh;
 7 |   padding: 2em;
 8 | }
 9 | 
10 | .deleteConfiguration {
11 |   @include layout.blocking($margin-top: 5em);
12 | }
13 | 


--------------------------------------------------------------------------------
/src/logback-tests.xml:
--------------------------------------------------------------------------------
1 | <configuration>
2 |   <root level="off"/>
3 | </configuration>
4 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/api/security.clj:
--------------------------------------------------------------------------------
1 | (ns nevergreen.api.security
2 |   (:require [nevergreen.crypto :as crypt]
3 |             [nevergreen.config :as config]))
4 | 
5 | (defn encrypt-data [data]
6 |   (crypt/encrypt data (config/aes-key)))
7 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/api/version.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.api.version
 2 |   (:require [clojure.string :refer [trim]]
 3 |             [clojure.tools.logging :as log]
 4 |             [clojure.java.io :refer [resource]]))
 5 | 
 6 | (defn- load-version []
 7 |   (trim (slurp (resource "version.txt"))))
 8 | 
 9 | (defn- load-meta []
10 |   (trim (slurp (resource "version_meta.txt"))))
11 | 
12 | (defn- full-version []
13 |   (str (load-version) "+" (load-meta)))
14 | 
15 | (defn version []
16 |   (let [version (full-version)]
17 |     (log/info version)
18 |     version))
19 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/app.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.app
 2 |   (:import (com.fasterxml.jackson.core JsonGenerator)
 3 |            (java.time Instant)
 4 |            (java.time.format DateTimeFormatter))
 5 |   (:require [compojure.core :refer :all]
 6 |             [ring.adapter.jetty :refer [run-jetty]]
 7 |             [cheshire.generate :as cheshire]
 8 |             [nevergreen.config :as config]
 9 |             [nevergreen.api-routes :refer :all]
10 |             [nevergreen.app-routes :refer :all]
11 |             [nevergreen.logging :refer [configure-logging]])
12 |   (:gen-class))
13 | 
14 | (cheshire/add-encoder Instant (fn [^Instant date ^JsonGenerator json-generator]
15 |                                 (.writeString json-generator (.format DateTimeFormatter/ISO_INSTANT date))))
16 | 
17 | (def ^:private all-routes
18 |   (routes
19 |     (-> api-routes
20 |         (wrap-routes wrap-api-middleware))
21 |     (-> app-routes
22 |         (wrap-routes wrap-app-middleware))))
23 | 
24 | (defn -main []
25 |   (configure-logging)
26 |   (run-jetty all-routes {:host (config/ip) :port (config/port)}))
27 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/backup/custom_gateway.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.backup.custom-gateway
 2 |   (:require [nevergreen.gateway :as http]))
 3 | 
 4 | (defn ^:dynamic *http-get* [url data]
 5 |   (http/http-get url data))
 6 | 
 7 | (defn ^:dynamic *http-post* [url data]
 8 |   (http/http-post url data))
 9 | 
10 | (def ^:private mime-type "application/json")
11 | 
12 | (defn create-configuration [{:keys [configuration, url]}]
13 |   (*http-post* url {:body       configuration
14 |                   :content-type :json}))
15 | 
16 | (defn get-configuration [url]
17 |   (*http-get* url {:accept mime-type
18 |                  :as       :string}))
19 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/crypto_test.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.crypto-test
 2 |   (:require [clojure.test :refer :all]
 3 |             [nevergreen.crypto :as subject]))
 4 | 
 5 | (def aes-key "abcdefghijklmnop")
 6 | 
 7 | (deftest encrypt-decrypt
 8 | 
 9 |   (testing "encrypts and decrypts a string"
10 |     (is (= "some-text" (subject/decrypt (subject/encrypt "some-text" aes-key) aes-key))))
11 | 
12 |   (testing "just returns nil if trying to decrypt nil"
13 |     (is (nil? (subject/decrypt nil aes-key))))
14 | 
15 |   (testing "just returns nil if trying to decrypt an empty string"
16 |     (is (nil? (subject/decrypt "" aes-key))))
17 | 
18 |   (testing "throws a more sensible error caused by changing the AES_KEY"
19 |     (let [original-aes-key "aaaaaaaaaaaaaaaa"
20 |           new-aes-key "bbbbbbbbbbbbbbbb"
21 |           encrypted-value (subject/encrypt "some-text" original-aes-key)]
22 |       (is (thrown-with-msg? Exception
23 |                             #"Unable to decrypt password as the Nevergreen server's AES_KEY has changed"
24 |                             (subject/decrypt encrypted-value new-aes-key))))))
25 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/errors.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.errors
 2 |   (:require [clojure.tools.logging :as log]
 3 |             [nevergreen.logging :refer [redact-url]])
 4 |   (:import (java.time Clock)))
 5 | 
 6 | (defn ^:dynamic *now* []
 7 |   (.instant (Clock/systemUTC)))
 8 | 
 9 | (defn is-error? [o]
10 |   (and (map? o) (= (:prognosis o) :error)))
11 | 
12 | (defmulti create-error
13 |           (fn [error _] (class error)))
14 | 
15 | (defmethod create-error Exception [^Exception e url]
16 |   (create-error (or
17 |                   (.getMessage e)
18 |                   (.getSimpleName (.getClass e)))
19 |                 url))
20 | 
21 | (defmethod create-error String [message url]
22 |   (log/info (str "Creating error response for [" (redact-url url) "] with message [" message "]"))
23 |   {:description message
24 |    :timestamp   (*now*)
25 |    :web-url     url
26 |    :prognosis   :error})
27 | 
28 | (defn error-response [status message url]
29 |   {:status  status
30 |    :body    (create-error message url)
31 |    :headers {"Content-Type" "application/json; charset=utf-8"}})
32 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/logging_test.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.logging-test
 2 |   (:require [clojure.test :refer :all]
 3 |             [nevergreen.logging :as subject]))
 4 | 
 5 | (deftest redact-url
 6 |   (testing "returns the same string if nothing needs redacting"
 7 |     (is (subject/redact-url "http://some-url") "http://some-url"))
 8 | 
 9 |   (testing "returns the same string if it is not a valid URL"
10 |     (is (subject/redact-url "invalid-url") "invalid-url"))
11 | 
12 |   (testing "redacts usernames"
13 |     (is (subject/redact-url "http://username@some-url") "http://REDACTED@some-url"))
14 | 
15 |   (testing "redacts passwords"
16 |     (is (subject/redact-url "http://:password@some-url") "http://:REDACTED@some-url"))
17 | 
18 |   (testing "redacts usernames and passwords"
19 |     (is (subject/redact-url "http://username:password@some-url") "http://REDACTED:REDACTED@some-url"))
20 | 
21 |   (testing "redacts query params as they may include API tokens"
22 |     (is (subject/redact-url "http://some-url?api=token") "http://some-url?api=REDACTED"))
23 | 
24 |   (testing "redacts all the things"
25 |     (is (subject/redact-url "http://username:password@some-url?api=token") "http://REDACTED:REDACTED@some-url?api=REDACTED")))
26 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_cache_control.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-cache-control)
 2 | 
 3 | (def no-cache "private, max-age=0, no-store")
 4 | (def max-cache "max-age=31556926")
 5 | (def twelve-hour-cache "max-age=43200")
 6 | 
 7 | (defn- is-webpack-hashed [req]
 8 |   (re-matches #"^.+?\.\w{8}\..+$" (:uri req)))
 9 | 
10 | (defn- is-client-route-refresh [req]
11 |   (re-matches #"^[^.]*$" (:uri req)))
12 | 
13 | (defn wrap-no-cache [app]
14 |   (fn [req]
15 |     (let [res (app req)]
16 |       (assoc-in res [:headers "Cache-Control"] no-cache))))
17 | 
18 | (defn wrap-cache-control [app]
19 |   (fn [req]
20 |     (let [res (app req)]
21 |       (assoc-in res [:headers "Cache-Control"] (cond
22 |                                                  (= "/service-worker.js" (:uri req)) no-cache
23 |                                                  (= "/index.html" (:uri req)) twelve-hour-cache
24 |                                                  (is-client-route-refresh req) twelve-hour-cache
25 |                                                  (is-webpack-hashed req) max-cache
26 |                                                  :else twelve-hour-cache)))))
27 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_content_security_policy.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-content-security-policy
 2 |   (:require [clojure.string :as s]
 3 |             [nevergreen.config :as config]))
 4 | 
 5 | (defn ^:dynamic *allow-iframe-from* []
 6 |   (config/allow-iframe-from))
 7 | 
 8 | (defn- csp-headers []
 9 |   ["default-src 'self'"
10 |    "script-src 'self'"
11 |    "worker-src 'self'"
12 |    "style-src 'self' 'unsafe-inline'"
13 |    "img-src * data:"
14 |    "font-src 'self' data:"
15 |    "media-src *"
16 |    "connect-src 'self' https://api.github.com"
17 |    "object-src 'none'"
18 |    (str "frame-ancestors " (*allow-iframe-from*))])
19 | 
20 | (defn wrap-content-security-policy [app]
21 |   (fn [req]
22 |     (let [res (app req)]
23 |       (-> (if (= (*allow-iframe-from*) config/default-csp-frame-ancestors)
24 |             (assoc-in res [:headers "X-Frame-Options"] config/default-x-frame-option)
25 |             (assoc-in res [:headers "X-Frame-Options"] nil))
26 |           (assoc-in [:headers "Content-Security-Policy"] (s/join "; " (csp-headers)))))))
27 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_convert_keys.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-convert-keys
 2 |   (:require [camel-snake-kebab.core :refer [->camelCase ->kebab-case]]
 3 |             [camel-snake-kebab.extras :refer [transform-keys]]))
 4 | 
 5 | (defn wrap-convert-keys [app]
 6 |   (fn [req]
 7 |     (let [transformed-req (update-in req [:body] (partial transform-keys ->kebab-case))
 8 |           res (app transformed-req)]
 9 |       (update-in res [:body] (partial transform-keys ->camelCase)))))
10 | 
11 | (defn wrap-convert-keys-req [app]
12 |   (fn [req]
13 |     (app (update-in req [:body] (partial transform-keys ->kebab-case)))))
14 | 
15 | (defn wrap-convert-keys-res [app]
16 |   (fn [req]
17 |     (let [res (app req)]
18 |       (update-in res [:body] (partial transform-keys ->camelCase)))))
19 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_cors_headers.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-cors-headers
 2 |   (:require [clj-cctray.util :refer [in?]]))
 3 | 
 4 | (def ^:private twenty-four-hours (str (* 60 60 24)))
 5 | (def ^:private allowed-methods [:post :get :options])
 6 | 
 7 | (defn wrap-cors-headers [app]
 8 |   (fn [req]
 9 |     (let [res (app req)]
10 |       (if (in? allowed-methods (req :request-method))
11 |         (-> res
12 |             (assoc-in [:headers "Access-Control-Allow-Methods"] "POST, GET, OPTIONS")
13 |             (assoc-in [:headers "Access-Control-Allow-Origin"] "*")
14 |             (assoc-in [:headers "Access-Control-Max-Age"] twenty-four-hours)
15 |             (assoc-in [:headers "Access-Control-Allow-Headers"] "Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma"))
16 |         res))))
17 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_exceptions.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-exceptions
 2 |   (:require [clojure.tools.logging :as log]
 3 |             [nevergreen.errors :refer [error-response]]))
 4 | 
 5 | (defn handle-exception [e url]
 6 |   (log/error e (str "An unhandled exception was thrown by endpoint [" url "]"))
 7 |   (error-response 500 "An unhandled exception was thrown" url))
 8 | 
 9 | (defn wrap-exceptions [app]
10 |   (fn [req]
11 |     (try
12 |       (app req)
13 |       (catch Exception e
14 |         (if-let [data (ex-data e)]
15 |           (error-response (or (:status data) 500) (.getMessage e) (:uri req))
16 |           (handle-exception e (:uri req)))))))
17 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_permissions_policy.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-permissions-policy
 2 |   (:require [clojure.string :refer [join]]))
 3 | 
 4 | (defn- feature-headers []
 5 |   ["accelerometer=()"
 6 |    "autoplay=(self)"
 7 |    "camera=()"
 8 |    "display-capture=()"
 9 |    "encrypted-media=()"
10 |    "fullscreen=(self)"
11 |    "geolocation=()"
12 |    "gyroscope=()"
13 |    "hid=()"
14 |    "identity-credentials-get=()"
15 |    "idle-detection=()"
16 |    "local-fonts=()"
17 |    "magnetometer=()"
18 |    "microphone=()"
19 |    "midi=()"
20 |    "payment=()"
21 |    "picture-in-picture=()"
22 |    "publickey-credentials-get=()"
23 |    "screen-wake-lock=()"
24 |    "usb=()"
25 |    "xr-spatial-tracking=()"])
26 | 
27 | (defn wrap-permissions-policy [app]
28 |   (fn [req]
29 |     (let [res (app req)]
30 |       (-> res
31 |           (assoc-in [:headers "Permissions-Policy"] (join ", " (feature-headers)))))))
32 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_permissions_policy_test.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-permissions-policy-test
 2 |   (:require [clojure.test :refer :all]
 3 |             [clojure.string :as s]
 4 |             [nevergreen.middleware.wrap-permissions-policy :as subject]))
 5 | 
 6 | (deftest wrap-feature-policy
 7 | 
 8 |   (testing "allows autoplay so broken build sounds can be triggered automatically"
 9 |     (let [app (constantly {})
10 |           req {}
11 |           res ((subject/wrap-permissions-policy app) req)]
12 |       (is (s/includes? (get (:headers res) "Permissions-Policy") "autoplay=(self)"))))
13 | 
14 |   (testing "allows fullscreen"
15 |     (let [app (constantly {})
16 |           req {}
17 |           res ((subject/wrap-permissions-policy app) req)]
18 |       (is (s/includes? (get (:headers res) "Permissions-Policy") "fullscreen=(self)")))))
19 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_referrer_policy.clj:
--------------------------------------------------------------------------------
1 | (ns nevergreen.middleware.wrap-referrer-policy
2 |   (:require [ring.util.response :refer [get-header]]))
3 | 
4 | (defn wrap-referrer-policy [app]
5 |   (fn [req]
6 |     (let [res (app req)]
7 |       (assoc-in res [:headers "Referrer-Policy"] "strict-origin-when-cross-origin"))))
8 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/middleware/wrap_referrer_policy_test.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.middleware.wrap-referrer-policy-test
 2 |   (:require [clojure.test :refer :all]
 3 |             [nevergreen.middleware.wrap-referrer-policy :as subject]))
 4 | 
 5 | (deftest wrap-referrer-policy
 6 | 
 7 |   ; https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
 8 |   (testing "sets strict-origin-when-cross-origin as this seems like the best option"
 9 |     (let [app (constantly {})
10 |           req {}
11 |           res ((subject/wrap-referrer-policy app) req)]
12 |       (is (= (get (:headers res) "Referrer-Policy") "strict-origin-when-cross-origin")))))
13 | 


--------------------------------------------------------------------------------
/src/server/nevergreen/projects/preview.clj:
--------------------------------------------------------------------------------
 1 | (ns nevergreen.projects.preview
 2 |   (:require [clojure.java.io :as io]
 3 |             [nevergreen.errors :as errors]
 4 |             [nevergreen.projects.projects :as projects]))
 5 | 
 6 | (defn preview [request]
 7 |   (binding [projects/*fetch* (fn [_] (io/input-stream (io/resource "preview.xml")))]
 8 |     (conj (projects/get-projects request)
 9 |             (errors/create-error "Example error", "https://github.com/build-canaries/nevergreen"))))
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "jsx": "preserve",
 6 |     "moduleResolution": "Bundler",
 7 |     "allowJs": true,
 8 |     "noEmit": true,
 9 |     "strict": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true
12 |   },
13 |   "include": ["./src/client"]
14 | }
15 | 


--------------------------------------------------------------------------------