From 29f6156025b63d36aba3564c9862975f23109696 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Mon, 2 Dec 2024 09:16:24 -0500
Subject: [PATCH 1/2] Remove the notification for dark mode
---
ui/frontend/Notifications.tsx | 54 +--------------------------
ui/frontend/reducers/notifications.ts | 9 +----
ui/frontend/selectors/index.ts | 8 ----
ui/frontend/types.ts | 1 -
4 files changed, 3 insertions(+), 69 deletions(-)
diff --git a/ui/frontend/Notifications.tsx b/ui/frontend/Notifications.tsx
index 29902d3a..bd618f7a 100644
--- a/ui/frontend/Notifications.tsx
+++ b/ui/frontend/Notifications.tsx
@@ -3,11 +3,9 @@ import { Portal } from 'react-portal';
import { Close } from './Icon';
import { useAppDispatch, useAppSelector } from './hooks';
-import { swapTheme } from './reducers/configuration';
-import { seenDarkMode, seenRustSurvey2023 } from './reducers/notifications';
+import { seenRustSurvey2023 } from './reducers/notifications';
import { allowLongRun, wsExecuteKillCurrent } from './reducers/output/execute';
import * as selectors from './selectors';
-import { Theme } from './types';
import * as styles from './Notifications.module.css';
@@ -17,7 +15,6 @@ const Notifications: React.FC = () => {
return (
<Portal>
<div className={styles.container}>
- <DarkModeNotification />
<RustSurvey2023Notification />
<ExcessiveExecutionNotification />
</div>
@@ -25,55 +22,6 @@ const Notifications: React.FC = () => {
);
};
-const DarkModeNotification: React.FC = () => {
- const showIt = useAppSelector(selectors.showDarkModeSelector);
-
- const dispatch = useAppDispatch();
- const seenIt = useCallback(() => dispatch(seenDarkMode()), [dispatch]);
- const swapToLight = useCallback(() => dispatch(swapTheme(Theme.Light)), [dispatch]);
- const swapToDark = useCallback(() => dispatch(swapTheme(Theme.Dark)), [dispatch]);
- const swapToSystem = useCallback(() => dispatch(swapTheme(Theme.System)), [dispatch]);
-
- return showIt ? (
- <Notification onClose={seenIt}>
- <p>The playground now has a dark mode! Sample the themes here:</p>
-
- <table>
- <tr>
- <th>
- <button className={styles.swapTheme} onClick={swapToSystem}>
- System
- </button>
- </th>
- <td>Use your system's preference</td>
- </tr>
-
- <tr>
- <th>
- <button className={styles.swapTheme} onClick={swapToLight}>
- Light
- </button>
- </th>
- <td>The classic playground style</td>
- </tr>
-
- <tr>
- <th>
- <button className={styles.swapTheme} onClick={swapToDark}>
- Dark
- </button>
- </th>
- <td>Reduce the number of photons hitting your eyeballs</td>
- </tr>
- </table>
-
- <p>
- You can change the current UI theme (and the editor's theme) in the configuration menu.
- </p>
- </Notification>
- ) : null;
-};
-
const RustSurvey2023Notification: React.FC = () => {
const showIt = useAppSelector(selectors.showRustSurvey2023Selector);
diff --git a/ui/frontend/reducers/notifications.ts b/ui/frontend/reducers/notifications.ts
index 01db8a80..8dab05c5 100644
--- a/ui/frontend/reducers/notifications.ts
+++ b/ui/frontend/reducers/notifications.ts
@@ -11,7 +11,7 @@ interface State {
seenMonacoEditorAvailable: boolean; // expired
seenRustSurvey2022: boolean; // expired
seenRustSurvey2023: boolean;
- seenDarkMode: boolean;
+ seenDarkMode: boolean; // expired
}
const initialState: State = {
@@ -23,7 +23,7 @@ const initialState: State = {
seenMonacoEditorAvailable: true,
seenRustSurvey2022: true,
seenRustSurvey2023: false,
- seenDarkMode: false,
+ seenDarkMode: true,
};
const slice = createSlice({
@@ -32,10 +32,6 @@ const slice = createSlice({
reducers: {
notificationSeen: (state, action: PayloadAction<Notification>) => {
switch (action.payload) {
- case Notification.DarkMode: {
- state.seenDarkMode = true;
- break;
- }
case Notification.RustSurvey2023: {
state.seenRustSurvey2023 = true;
break;
@@ -47,7 +43,6 @@ const slice = createSlice({
const { notificationSeen } = slice.actions;
-export const seenDarkMode = () => notificationSeen(Notification.DarkMode);
export const seenRustSurvey2023 = () => notificationSeen(Notification.RustSurvey2023);
export default slice.reducer;
diff --git a/ui/frontend/selectors/index.ts b/ui/frontend/selectors/index.ts
index 3c9dfbab..39bd01e6 100644
--- a/ui/frontend/selectors/index.ts
+++ b/ui/frontend/selectors/index.ts
@@ -360,13 +360,6 @@ const notificationsSelector = (state: State) => state.notifications;
const NOW = new Date();
-const DARK_MODE_END = new Date('2024-10-15T00:00:00Z');
-const DARK_MODE_OPEN = NOW <= DARK_MODE_END;
-export const showDarkModeSelector = createSelector(
- notificationsSelector,
- notifications => DARK_MODE_OPEN && !notifications.seenDarkMode,
-);
-
const RUST_SURVEY_2023_END = new Date('2024-01-15T00:00:00Z');
const RUST_SURVEY_2023_OPEN = NOW <= RUST_SURVEY_2023_END;
export const showRustSurvey2023Selector = createSelector(
@@ -375,7 +368,6 @@ export const showRustSurvey2023Selector = createSelector(
);
export const anyNotificationsToShowSelector = createSelector(
- showDarkModeSelector,
showRustSurvey2023Selector,
excessiveExecutionSelector,
(...allNotifications) => allNotifications.some(n => n),
diff --git a/ui/frontend/types.ts b/ui/frontend/types.ts
index c00386f1..3ea2a66a 100644
--- a/ui/frontend/types.ts
+++ b/ui/frontend/types.ts
@@ -165,6 +165,5 @@ export enum Focus {
}
export enum Notification {
- DarkMode = 'dark-mode',
RustSurvey2023 = 'rust-survey-2023',
}
From c53f7a7dd8c86a581921cf47023857add646dda1 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Mon, 2 Dec 2024 09:20:32 -0500
Subject: [PATCH 2/2] Add a notification for the Rust 2023 survey
---
ui/frontend/Notifications.tsx | 14 +++++++-------
ui/frontend/reducers/notifications.ts | 12 +++++++-----
ui/frontend/selectors/index.ts | 10 +++++-----
ui/frontend/types.ts | 2 +-
4 files changed, 20 insertions(+), 18 deletions(-)
diff --git a/ui/frontend/Notifications.tsx b/ui/frontend/Notifications.tsx
index bd618f7a..f3e905e9 100644
--- a/ui/frontend/Notifications.tsx
+++ b/ui/frontend/Notifications.tsx
@@ -3,36 +3,36 @@ import { Portal } from 'react-portal';
import { Close } from './Icon';
import { useAppDispatch, useAppSelector } from './hooks';
-import { seenRustSurvey2023 } from './reducers/notifications';
+import { seenRustSurvey2024 } from './reducers/notifications';
import { allowLongRun, wsExecuteKillCurrent } from './reducers/output/execute';
import * as selectors from './selectors';
import * as styles from './Notifications.module.css';
-const SURVEY_URL = 'https://blog.rust-lang.org/2023/12/18/survey-launch.html';
+const SURVEY_URL = 'https://blog.rust-lang.org/2024/12/05/annual-survey-2024-launch.html';
const Notifications: React.FC = () => {
return (
<Portal>
<div className={styles.container}>
- <RustSurvey2023Notification />
+ <RustSurvey2024Notification />
<ExcessiveExecutionNotification />
</div>
</Portal>
);
};
-const RustSurvey2023Notification: React.FC = () => {
- const showIt = useAppSelector(selectors.showRustSurvey2023Selector);
+const RustSurvey2024Notification: React.FC = () => {
+ const showIt = useAppSelector(selectors.showRustSurvey2024Selector);
const dispatch = useAppDispatch();
- const seenIt = useCallback(() => dispatch(seenRustSurvey2023()), [dispatch]);
+ const seenIt = useCallback(() => dispatch(seenRustSurvey2024()), [dispatch]);
return showIt ? (
<Notification onClose={seenIt}>
Please help us take a look at who the Rust community is composed of, how the Rust project is
doing, and how we can improve the Rust programming experience by completing the{' '}
- <a href={SURVEY_URL}>2023 State of Rust Survey</a>. Whether or not you use Rust today, we want
+ <a href={SURVEY_URL}>2024 State of Rust Survey</a>. Whether or not you use Rust today, we want
to know your opinions.
</Notification>
) : null;
diff --git a/ui/frontend/reducers/notifications.ts b/ui/frontend/reducers/notifications.ts
index 8dab05c5..1f159386 100644
--- a/ui/frontend/reducers/notifications.ts
+++ b/ui/frontend/reducers/notifications.ts
@@ -10,8 +10,9 @@ interface State {
seenRustSurvey2021: boolean; // expired
seenMonacoEditorAvailable: boolean; // expired
seenRustSurvey2022: boolean; // expired
- seenRustSurvey2023: boolean;
+ seenRustSurvey2023: boolean; // expired
seenDarkMode: boolean; // expired
+ seenRustSurvey2024: boolean;
}
const initialState: State = {
@@ -22,8 +23,9 @@ const initialState: State = {
seenRustSurvey2021: true,
seenMonacoEditorAvailable: true,
seenRustSurvey2022: true,
- seenRustSurvey2023: false,
+ seenRustSurvey2023: true,
seenDarkMode: true,
+ seenRustSurvey2024: false,
};
const slice = createSlice({
@@ -32,8 +34,8 @@ const slice = createSlice({
reducers: {
notificationSeen: (state, action: PayloadAction<Notification>) => {
switch (action.payload) {
- case Notification.RustSurvey2023: {
- state.seenRustSurvey2023 = true;
+ case Notification.RustSurvey2024: {
+ state.seenRustSurvey2024 = true;
break;
}
}
@@ -43,6 +45,6 @@ const slice = createSlice({
const { notificationSeen } = slice.actions;
-export const seenRustSurvey2023 = () => notificationSeen(Notification.RustSurvey2023);
+export const seenRustSurvey2024 = () => notificationSeen(Notification.RustSurvey2024);
export default slice.reducer;
diff --git a/ui/frontend/selectors/index.ts b/ui/frontend/selectors/index.ts
index 39bd01e6..78756147 100644
--- a/ui/frontend/selectors/index.ts
+++ b/ui/frontend/selectors/index.ts
@@ -360,15 +360,15 @@ const notificationsSelector = (state: State) => state.notifications;
const NOW = new Date();
-const RUST_SURVEY_2023_END = new Date('2024-01-15T00:00:00Z');
-const RUST_SURVEY_2023_OPEN = NOW <= RUST_SURVEY_2023_END;
-export const showRustSurvey2023Selector = createSelector(
+const RUST_SURVEY_2024_END = new Date('2024-12-23T00:00:00Z');
+const RUST_SURVEY_2024_OPEN = NOW <= RUST_SURVEY_2024_END;
+export const showRustSurvey2024Selector = createSelector(
notificationsSelector,
- notifications => RUST_SURVEY_2023_OPEN && !notifications.seenRustSurvey2023,
+ notifications => RUST_SURVEY_2024_OPEN && !notifications.seenRustSurvey2024,
);
export const anyNotificationsToShowSelector = createSelector(
- showRustSurvey2023Selector,
+ showRustSurvey2024Selector,
excessiveExecutionSelector,
(...allNotifications) => allNotifications.some(n => n),
);
diff --git a/ui/frontend/types.ts b/ui/frontend/types.ts
index 3ea2a66a..cc954562 100644
--- a/ui/frontend/types.ts
+++ b/ui/frontend/types.ts
@@ -165,5 +165,5 @@ export enum Focus {
}
export enum Notification {
- RustSurvey2023 = 'rust-survey-2023',
+ RustSurvey2024 = 'rust-survey-2024',
}