Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate theme popover to v9 #3442

Merged
merged 9 commits into from
Dec 11, 2024
Merged

feat: migrate theme popover to v9 #3442

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7abdbfd
migrate theme popover to v9
Mnickii Nov 26, 2024
4c81805
revert loadGETheme removal for v8 components
Mnickii Nov 28, 2024
7f546a9
use customized radio Group
Mnickii Nov 28, 2024
7dfd148
adjusst icon size
Mnickii Nov 28, 2024
f4aa8d5
remove checked
Mnickii Dec 2, 2024
0becb35
detect system theme in theme-chooser and set as default
Mnickii Dec 3, 2024
21ba3c9
include system theme appwise
Mnickii Dec 4, 2024
4d8f773
Merge branch 'feat/fluent-v9-upgrade' into feat/theme-popover
Mnickii Dec 9, 2024
08411d8
add system to options
Mnickii Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/views/common/lazy-loader/component-registry/popups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { lazy } from 'react';

export const popups = new Map<string, any>([
['share-query', lazy(() => import('../../../query-runner/query-input/share-query/ShareQuery'))],
['theme-chooser', lazy(() => import('../../../main-header/settings/ThemeChooser'))],
['theme-chooser', lazy(() => import('../../../main-header/settings/ThemeChooserV9'))],
['preview-collection', lazy(() => import('../../../sidebar/resource-explorer/collection/PreviewCollection'))],
['full-permissions', lazy(() => import('../../../query-runner/request/permissions/Permissions.Full'))]
]);
Expand Down
88 changes: 88 additions & 0 deletions src/app/views/main-header/settings/ThemeChooserV9.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { makeStyles, RadioGroup, Radio} from '@fluentui/react-components';
import { useAppDispatch, useAppSelector } from '../../../../store';
import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
import { PopupsComponent } from '../../../services/context/popups-context';
import { changeTheme } from '../../../services/slices/theme.slice';
import { loadGETheme } from '../../../../themes';
import { translateMessage } from '../../../utils/translate-messages';
import { BrightnessHighRegular, WeatherMoonFilled, CircleHalfFillFilled } from '@fluentui/react-icons';

const availableThemes = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you've added system theme support, make it an option and probably the default selected.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the default selected ln70-75

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant on the popup
image

{
key: 'light',
displayName: 'Web Light',
icon: <BrightnessHighRegular />
},
{
key: 'dark',
displayName: 'Web Dark',
icon: <WeatherMoonFilled />
},
{
key: 'high-contrast',
displayName: 'Teams High Contrast',
icon: <CircleHalfFillFilled />
}
];

const useIconOptionStyles = makeStyles({
root: {
display: 'flex',
alignItems: 'center',
gap: '5px'
},
icon: {
fontSize: '30px'
}
});

const useLabelStyles = makeStyles({
root: {
display: 'flex',
gap: '5px'
}
});

const ThemeChooserV9: React.FC<PopupsComponent<null>> = () => {
const dispatch = useAppDispatch();
const appTheme = useAppSelector(state=> state.theme);
const iconOptionStyles = useIconOptionStyles();
const labelStyles = useLabelStyles();


const handleChangeTheme = (selectedTheme: { key: string; displayName: string; icon: JSX.Element }) => {
const newTheme: string = selectedTheme.key;
// Applies the theme to the Fluent UI components
dispatch(changeTheme(newTheme));
loadGETheme(newTheme); //Remove when cleaning up
telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
ComponentName: componentNames.SELECT_THEME_BUTTON,
SelectedTheme: newTheme.replace('-', ' ').toSentenceCase()
});
};
return (
<RadioGroup layout="horizontal" aria-labelledby='theme-chooser'
defaultValue={availableThemes.find(theme => theme.key === appTheme)?.displayName}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic work so far!

There's a console warning that draws attention to the implementation you have here
image

My understanding is that you can't use defaultValue and checked at the same time. My recomendation here is to:

  1. use the onChange listener on RadioGroup and remove the defaultValue for value.
  2. You can then create a state value which defaults to the appTheme, and use all the implementation of handleChangeTheme after setValue(data.value). Something like this:
 const [value, setValue] = useState(appTheme);
// some stuff
 <RadioGroup value={value} onChange={(_, data) =>{
        const newTheme: string = data.value
        setValue(newTheme)
        // Applies the theme to the Fluent UI components
        dispatch(changeTheme(newTheme));
        loadGETheme(newTheme); //Remove when cleaning up
        telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
          ComponentName: componentNames.SELECT_THEME_BUTTON,
          SelectedTheme: newTheme.replace('-', ' ').toSentenceCase()
        });
      }}>
// other stuff
  1. Remove checked and onClick on Radio.

Borrowed this from https://react.fluentui.dev/?path=/docs/components-radiogroup--docs#controlled-value

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm currently unable to test this locally, but I'm curious if removing the Radio Checked on ln 71 in current implementation would have a similar warning. Per https://react.fluentui.dev/?path=/docs/components-radiogroup--docs#default-value, only either the default Value or the checked can be used

>
{availableThemes.map((theme) => (
<div key={theme.key} className={iconOptionStyles.root}>
<Radio
value={theme.key}
checked={appTheme === theme.key}
label={{
className: labelStyles.root,
children: (
<>
<span className={iconOptionStyles.icon}>{theme.icon}</span> {translateMessage(theme.displayName)}
</>
)
}}
onClick={() => handleChangeTheme(theme)}>
</Radio>
</div>
))}
</RadioGroup>
);
}

export default ThemeChooserV9
Loading