diff --git a/src/components/VersionInfo/VersionInfo.tsx b/src/components/VersionInfo/VersionInfo.tsx new file mode 100644 index 000000000..de540ea13 --- /dev/null +++ b/src/components/VersionInfo/VersionInfo.tsx @@ -0,0 +1,31 @@ +import { Typography } from "@material-ui/core"; +import React from "react"; + +import { useStyles } from "./styles"; +interface VersionInfoProps { + dashboardVersion: string; + coreVersion: string; +} + +const VersionInfo: React.FC = ({ + dashboardVersion, + coreVersion +}) => { + const classes = useStyles({}); + + if (!dashboardVersion || !coreVersion) { + return null; + } + + return ( + +
{`dashboard v${dashboardVersion}`}
+
{`core v${coreVersion}`}
+
+ ); +}; + +VersionInfo.displayName = "VersionInfo"; +export default VersionInfo; diff --git a/src/components/VersionInfo/index.tsx b/src/components/VersionInfo/index.tsx new file mode 100644 index 000000000..1fdad9e7c --- /dev/null +++ b/src/components/VersionInfo/index.tsx @@ -0,0 +1,2 @@ +export { default } from "./VersionInfo"; +export * from "./VersionInfo"; diff --git a/src/components/VersionInfo/styles.ts b/src/components/VersionInfo/styles.ts new file mode 100644 index 000000000..7a990caf4 --- /dev/null +++ b/src/components/VersionInfo/styles.ts @@ -0,0 +1,26 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +export const useStyles = makeStyles( + theme => ({ + container: { + display: "flex", + justifyContent: "flex-end" + }, + versionItem: { + [theme.breakpoints.down("md")]: { + fontSize: theme.spacing(1.75) + }, + [theme.breakpoints.up("md")]: { + fontSize: theme.spacing(2) + }, + color: "rgba(40, 35, 74, 0.6)", + lineHeight: theme.spacing(3.2), + fontSize: theme.spacing(2), + marginLeft: theme.spacing(1.5), + letterSpacing: "0.02em" + } + }), + { + name: "VersionInfo" + } +); diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx index 0285f320d..d8107cad6 100644 --- a/src/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.tsx @@ -1,5 +1,7 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import { IconProps } from "@material-ui/core/Icon"; +import { useTheme } from "@material-ui/core/styles"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; import { User } from "@saleor/fragments/types/User"; import { sectionNames } from "@saleor/intl"; import { makeStyles } from "@saleor/macaw-ui"; @@ -9,6 +11,7 @@ import { useIntl } from "react-intl"; import { hasPermission } from "../auth/misc"; import Container from "../components/Container"; import PageHeader from "../components/PageHeader"; +import VersionInfo from "../components/VersionInfo"; import { PermissionEnum } from "../types/globalTypes"; export interface MenuItem { @@ -25,6 +28,11 @@ export interface MenuSection { menuItems: MenuItem[]; } +interface VersionInfo { + dashboardVersion: string; + coreVersion: string; +} + const useStyles = makeStyles( theme => ({ card: { @@ -92,20 +100,38 @@ const useStyles = makeStyles( export interface ConfigurationPageProps { menu: MenuSection[]; user: User; + versionInfo: VersionInfo; onSectionClick: (sectionName: string) => void; } export const ConfigurationPage: React.FC = props => { - const { menu: menus, user, onSectionClick } = props; + const { + menu: menus, + user, + onSectionClick, + versionInfo: { dashboardVersion, coreVersion } + } = props; const classes = useStyles(props); + const theme = useTheme(); + const isSmUp = useMediaQuery(theme.breakpoints.up("sm")); + + const renderVersionInfo = ( + + ); const intl = useIntl(); return ( + {!isSmUp && renderVersionInfo} + > + {isSmUp && renderVersionInfo} + {menus .filter(menu => menu.menuItems.some(menuItem => diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx index 8eb051fc5..f32b84483 100644 --- a/src/configuration/index.tsx +++ b/src/configuration/index.tsx @@ -1,7 +1,9 @@ import { attributeListUrl } from "@saleor/attributes/urls"; import { channelsListUrl } from "@saleor/channels/urls"; import { WindowTitle } from "@saleor/components/WindowTitle"; +import { APP_VERSION as dashboardVersion } from "@saleor/config"; import useNavigator from "@saleor/hooks/useNavigator"; +import useShop from "@saleor/hooks/useShop"; import useUser from "@saleor/hooks/useUser"; import Attributes from "@saleor/icons/Attributes"; import Channels from "@saleor/icons/Channels"; @@ -242,6 +244,12 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] { export const configurationMenuUrl = "/configuration/"; export const ConfigurationSection: React.FC = () => { + const { version: coreVersion } = useShop(); + const versions = { + dashboardVersion, + coreVersion + }; + const navigate = useNavigator(); const user = useUser(); const intl = useIntl(); @@ -253,6 +261,7 @@ export const ConfigurationSection: React.FC = () => { menu={createConfigurationMenu(intl)} user={maybe(() => user.user)} onSectionClick={navigate} + versionInfo={versions} /> ); diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 417c2021e..75a35c081 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -71606,6 +71606,20 @@ exports[`Storyshots Views / Configuration default 1`] = `
+
+
+ dashboard v3.0.0-b.3 +
+
+ core v3.0.0-b.15 +
+
+
+
+ dashboard v3.0.0-b.3 +
+
+ core v3.0.0-b.15 +
+
= ({ user }) => { const intl = useIntl(); @@ -30,6 +35,7 @@ const Story: React.FC<{ user: User }> = ({ user }) => { menu={createConfigurationMenu(intl)} onSectionClick={() => undefined} user={user} + versionInfo={versions} /> ); };