Skip to content

Commit

Permalink
Merge branch 'master' into 7947-add-props-to-drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
simonychuang authored Aug 21, 2024
2 parents cbe010a + 0bcd84c commit 810d24d
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 48 deletions.
2 changes: 1 addition & 1 deletion graylog2-web-interface/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"@reduxjs/toolkit": "^2.2.0",
"@tanstack/query-sync-storage-persister": "^4.33.0",
"@tanstack/react-query-persist-client": "^4.33.0",
"ace-builds": "1.35.4",
"ace-builds": "1.35.5",
"bootstrap": "3.4.1",
"bson-objectid": "^2.0.3",
"chroma-js": "^2.0.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@tanstack/react-query": "4.36.1",
"@types/create-react-class": "15.6.8",
"@types/jquery": "3.5.30",
"@types/react": "18.3.3",
"@types/react": "18.3.4",
"babel-preset-graylog": "file:../babel-preset-graylog",
"create-react-class": "15.7.0",
"eslint-config-graylog": "file:../eslint-config-graylog",
Expand Down
39 changes: 2 additions & 37 deletions graylog2-web-interface/src/theme/GraylogThemeProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,12 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';
import type { ColorScheme } from '@graylog/sawmill';
import SawmillSC from '@graylog/sawmill/styled-components';
import type { MantineTheme } from '@graylog/sawmill/mantine';
import SawmillMantine from '@graylog/sawmill/mantine';
import { useMemo } from 'react';
import { MantineProvider } from '@mantine/core';

import usePluginEntities from 'hooks/usePluginEntities';
import type { CustomThemesColors } from 'theme/theme-types';
import useThemes from 'theme/hooks/useThemes';

import ColorSchemeContext from './ColorSchemeContext';
import { COLOR_SCHEMES } from './constants';
import usePreferredColorScheme from './hooks/usePreferredColorScheme';

import 'material-symbols/rounded.css';

Expand All @@ -39,37 +33,8 @@ type Props = {
userIsLoggedIn: boolean,
}

const useSCTheme = (
changeColorScheme: (newColorScheme: ColorScheme) => void,
mantineTheme: MantineTheme,
) => useMemo(() => {
const theme = SawmillSC(mantineTheme);

return ({
...theme,
changeMode: changeColorScheme,
mantine: mantineTheme,
});
}, [changeColorScheme, mantineTheme]);

const useMantineTheme = (
colorScheme: ColorScheme,
useCustomThemeColors: () => ({ data: CustomThemesColors }),
) => {
const { data: customThemeColors } = useCustomThemeColors?.() ?? {};

return useMemo(() => SawmillMantine({
colorScheme,
customColors: customThemeColors?.[colorScheme],
}), [colorScheme, customThemeColors]);
};

const GraylogThemeProvider = ({ children, initialThemeModeOverride, userIsLoggedIn }: Props) => {
const [colorScheme, changeColorScheme] = usePreferredColorScheme(initialThemeModeOverride, userIsLoggedIn);
const themeCustomizer = usePluginEntities('customization.theme.customizer');
const useCustomThemeColors = themeCustomizer?.[0]?.hooks.useCustomThemeColors;
const mantineTheme = useMantineTheme(colorScheme, useCustomThemeColors);
const scTheme = useSCTheme(changeColorScheme, mantineTheme);
const { scTheme, mantineTheme, colorScheme } = useThemes(initialThemeModeOverride, userIsLoggedIn);

return (
<ColorSchemeContext.Provider value={colorScheme}>
Expand Down
63 changes: 63 additions & 0 deletions graylog2-web-interface/src/theme/hooks/useThemes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Copyright (C) 2020 Graylog, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the Server Side Public License, version 1,
* as published by MongoDB, Inc.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* Server Side Public License for more details.
*
* You should have received a copy of the Server Side Public License
* along with this program. If not, see
* <http://www.mongodb.com/licensing/server-side-public-license>.
*/

import { useMemo } from 'react';
import type { ColorScheme } from '@graylog/sawmill';
import SawmillMantine from '@graylog/sawmill/mantine';
import type { MantineTheme } from '@graylog/sawmill/mantine';
import SawmillSC from '@graylog/sawmill/styled-components';

import type { CustomThemesColors } from 'theme/theme-types';
import usePreferredColorScheme from 'theme/hooks/usePreferredColorScheme';
import usePluginEntities from 'hooks/usePluginEntities';

const useMantineTheme = (
colorScheme: ColorScheme,
useCustomThemeColors: () => ({ data: CustomThemesColors }),
) => {
const { data: customThemeColors } = useCustomThemeColors?.() ?? {};

return useMemo(() => SawmillMantine({
colorScheme,
customColors: customThemeColors?.[colorScheme],
}), [colorScheme, customThemeColors]);
};

const useStyledComponentsTheme = (
changeColorScheme: (newColorScheme: ColorScheme) => void,
mantineTheme: MantineTheme,
) => useMemo(() => {
const theme = SawmillSC(mantineTheme);

return ({
...theme,
changeMode: changeColorScheme,
mantine: mantineTheme,
});
}, [changeColorScheme, mantineTheme]);

const useThemes = (initialThemeModeOverride: ColorScheme, userIsLoggedIn: boolean) => {
const [colorScheme, changeColorScheme] = usePreferredColorScheme(initialThemeModeOverride, userIsLoggedIn);
const themeCustomizer = usePluginEntities('customization.theme.customizer');
const useCustomThemeColors = themeCustomizer?.[0]?.hooks.useCustomThemeColors;
const mantineTheme = useMantineTheme(colorScheme, useCustomThemeColors);
const scTheme = useStyledComponentsTheme(changeColorScheme, mantineTheme);

return { scTheme, mantineTheme, colorScheme };
};

export default useThemes;
18 changes: 9 additions & 9 deletions graylog2-web-interface/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3620,7 +3620,7 @@
dependencies:
"@types/react" "*"

"@types/react@*", "@types/[email protected]", "@types/[email protected].3", "@types/react@^16", "@types/react@^16.9.11", "@types/react@^16.9.9":
"@types/react@*", "@types/[email protected]", "@types/[email protected].4", "@types/react@^16", "@types/react@^16.9.11", "@types/react@^16.9.9":
version "18.0.28"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
Expand Down Expand Up @@ -4112,10 +4112,10 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
mime-types "~2.1.34"
negotiator "0.6.3"

[email protected].4, ace-builds@^1.32.8:
version "1.35.4"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.35.4.tgz#f41d7ef57c3a7d424cd7e3300bef0cbef905c84f"
integrity sha512-r0KQclhZ/uk5a4zOqRYQkJuQuu4vFMiA6VTj54Tk4nI1TUR3iEMMppZkWbNoWEgWwv4ciDloObb9Rf4V55Qgjw==
[email protected].5, ace-builds@^1.32.8:
version "1.35.5"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.35.5.tgz#6cddd56de260295473a24f3acc0efdb8bf8157e1"
integrity sha512-yh3V5BLHlN6gwbmk5sV00WRRvdEggJGJ3AIHhOOGHlgDWNWCSvOnHPO7Chb+AqaxxHuvpxOdXd7ZQesaiuJQZQ==

acorn-globals@^4.1.0:
version "4.3.4"
Expand Down Expand Up @@ -5702,9 +5702,9 @@ core-js-compat@^3.37.1:
browserslist "^4.23.0"

core-js@3:
version "3.38.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.38.0.tgz#8acb7c050bf2ccbb35f938c0d040132f6110f636"
integrity sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==
version "3.38.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.38.1.tgz#aa375b79a286a670388a1a363363d53677c0383e"
integrity sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==

core-js@^2.6.5:
version "2.6.11"
Expand Down Expand Up @@ -8855,7 +8855,7 @@ graphemer@^1.4.0:
"@tanstack/react-query" "4.36.1"
"@types/create-react-class" "15.6.8"
"@types/jquery" "3.5.30"
"@types/react" "18.3.3"
"@types/react" "18.3.4"
babel-preset-graylog "file:packages/babel-preset-graylog"
create-react-class "15.7.0"
eslint-config-graylog "file:packages/eslint-config-graylog"
Expand Down

0 comments on commit 810d24d

Please sign in to comment.