From f01b0f61c19b25236d695f055714be1727db426f Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 9 Apr 2024 17:24:44 -0400 Subject: [PATCH 1/6] feat(settings): add tooltips to settings --- src/components/fields/Checkbox.tsx | 8 ++++++++ src/routes/Settings.tsx | 7 +++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx index 7321e26e9..c458a92d9 100644 --- a/src/components/fields/Checkbox.tsx +++ b/src/components/fields/Checkbox.tsx @@ -1,3 +1,5 @@ +import { QuestionIcon } from '@primer/octicons-react'; + interface IFieldCheckbox { name: string; label: string; @@ -5,6 +7,7 @@ interface IFieldCheckbox { onChange: (evt: React.ChangeEvent) => void; placeholder?: string; disabled?: boolean; + tooltip?: string; } export const FieldCheckbox = (props: IFieldCheckbox) => { @@ -30,6 +33,11 @@ export const FieldCheckbox = (props: IFieldCheckbox) => { } > {props.label} + {props.tooltip && ( + + + + )} {props.placeholder && (
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 52701657b..86db3c98d 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -141,6 +141,9 @@ export const SettingsRoute: FC = () => { colorScope && updateSetting('colors', evt.target.checked) } disabled={!colorScope} + tooltip="Enabling this feature provides detailed state and last interaction user information. + +Depending on the number of unread notifications, you may experience occasional rate limiting." /> {
- + Notifications {
- + System Date: Fri, 12 Apr 2024 08:02:41 -0400 Subject: [PATCH 2/6] Merge remote-tracking branch 'origin/main' into feature/settings-tooltips --- .husky/pre-commit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index c6254913e..db4bafce4 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1,2 @@ pnpx lint-staged -pnpm test -- --onlyChanged +pnpm test \ No newline at end of file From 0268d987e4054e418831414023d563b3e75ebf5e Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Sun, 14 Apr 2024 08:09:16 -0400 Subject: [PATCH 3/6] feat: tooltips --- src/routes/Settings.tsx | 14 +++++++------- src/routes/__snapshots__/Settings.test.tsx.snap | 5 ----- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index f5914e557..165028aa4 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -141,16 +141,16 @@ export const SettingsRoute: FC = () => { colorScope && updateSetting('colors', evt.target.checked) } disabled={!colorScope} - helpText="Changes will take effect after restarting the app" tooltip={
-
- Enabling this feature provides detailed state and last - interaction user information. +
+ Enrich notifications with author or last commenter profile + information, state and GitHub-like colors.
-
- Depending on the number of unread notifications, you may - experience occasional rate limiting. +
+ ⚠️ Users with a large number of unread notifications may{' '} + experience rate limiting under certain circumstances. Disable + this setting if you experience this.
} diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index 0fb3bf29f..da7a14fc6 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -214,11 +214,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
-
- Changes will take effect after restarting the app -
Date: Sun, 14 Apr 2024 08:51:44 -0400 Subject: [PATCH 4/6] feat: tooltips --- src/components/fields/Tooltip.test.tsx | 14 +++++++++ .../__snapshots__/Tooltip.test.tsx.snap | 31 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/components/fields/Tooltip.test.tsx create mode 100644 src/components/fields/__snapshots__/Tooltip.test.tsx.snap diff --git a/src/components/fields/Tooltip.test.tsx b/src/components/fields/Tooltip.test.tsx new file mode 100644 index 000000000..7d0310e45 --- /dev/null +++ b/src/components/fields/Tooltip.test.tsx @@ -0,0 +1,14 @@ +import * as TestRenderer from 'react-test-renderer'; + +import { type ITooltip, Tooltip } from './Tooltip'; + +describe('components/fields/Tooltip.tsx', () => { + const props: ITooltip = { + tooltip: 'This is some tooltip text', + }; + + it('should render', () => { + const tree = TestRenderer.create(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap new file mode 100644 index 000000000..80a453146 --- /dev/null +++ b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/fields/Tooltip.tsx should render 1`] = ` + + + +`; From 2b7879bef63781b9fcdce4a70703b8ab9bf19f3b Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Sun, 14 Apr 2024 09:59:56 -0400 Subject: [PATCH 5/6] feat: tooltips --- src/components/fields/Tooltip.test.tsx | 14 +++++ src/components/fields/Tooltip.tsx | 1 + .../__snapshots__/Tooltip.test.tsx.snap | 54 +++++++++++++++++++ .../__snapshots__/Settings.test.tsx.snap | 2 + 4 files changed, 71 insertions(+) diff --git a/src/components/fields/Tooltip.test.tsx b/src/components/fields/Tooltip.test.tsx index 7d0310e45..863847eec 100644 --- a/src/components/fields/Tooltip.test.tsx +++ b/src/components/fields/Tooltip.test.tsx @@ -1,3 +1,5 @@ +import { fireEvent, render, screen } from '@testing-library/react'; + import * as TestRenderer from 'react-test-renderer'; import { type ITooltip, Tooltip } from './Tooltip'; @@ -11,4 +13,16 @@ describe('components/fields/Tooltip.tsx', () => { const tree = TestRenderer.create(); expect(tree).toMatchSnapshot(); }); + + it('should display on mouse enter / leave', () => { + render(); + + const tooltipElement = screen.getByTitle('tooltip'); + + fireEvent.mouseEnter(tooltipElement); + expect(tooltipElement).toMatchSnapshot(); + + fireEvent.mouseLeave(tooltipElement); + expect(tooltipElement).toMatchSnapshot(); + }); }); diff --git a/src/components/fields/Tooltip.tsx b/src/components/fields/Tooltip.tsx index ff57df5ad..3a9232fa9 100644 --- a/src/components/fields/Tooltip.tsx +++ b/src/components/fields/Tooltip.tsx @@ -10,6 +10,7 @@ export const Tooltip: FC = (props: ITooltip) => { return ( setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} diff --git a/src/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap index 80a453146..c2ed6592f 100644 --- a/src/components/fields/__snapshots__/Tooltip.test.tsx.snap +++ b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap @@ -1,10 +1,64 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`components/fields/Tooltip.tsx should display on mouse enter / leave 1`] = ` + + +
+
+ This is some tooltip text +
+
+ +`; + +exports[`components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = ` + + + +`; + exports[`components/fields/Tooltip.tsx should render 1`] = `
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index d4ea67b69..0f3cbb6d2 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -22,7 +22,7 @@ exports[`routes/Settings.tsx should not be able to enable detailed notifications for="detailedNotifications" style="text-decoration: line-through;" > - Use GitHub-like state colors (requires repo scope) + Detailed notifications (requires repo scope) - Use GitHub-like state colors + Detailed notifications