Display app versions (#1433)

apply changes from review

apply changes from review

use useShop hook for core version

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<VersionInfoProps> = ({
+  dashboardVersion,
+  coreVersion
+}) => {
+  const classes = useStyles({});
+
+  if (!dashboardVersion || !coreVersion) {
+    return null;
+  }
+
+  return (
+    <Typography variant="caption" className={classes.container}>
+      <div
+        className={classes.versionItem}
+      >{`dashboard v${dashboardVersion}`}</div>
+      <div className={classes.versionItem}>{`core v${coreVersion}`}</div>
+    </Typography>
+  );
+};
+
+VersionInfo.displayName = "VersionInfo";
+export default VersionInfo;

src/components/VersionInfo/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./VersionInfo";
+export * from "./VersionInfo";

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"
+  }
+);

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<ConfigurationPageProps> = 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 = (
+    <VersionInfo
+      dashboardVersion={dashboardVersion}
+      coreVersion={coreVersion}
+    />
+  );
 
   const intl = useIntl();
   return (
     <Container>
+      {!isSmUp && renderVersionInfo}
       <PageHeader
         className={classes.header}
         title={intl.formatMessage(sectionNames.configuration)}
-      />
+      >
+        {isSmUp && renderVersionInfo}
+      </PageHeader>
       {menus
         .filter(menu =>
           menu.menuItems.some(menuItem =>

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}
       />
     </>
   );

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -71606,6 +71606,20 @@ exports[`Storyshots Views / Configuration default 1`] = `
   <div
     class="Container-root-id"
   >
+    <div
+      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
+    >
+      <div
+        class="VersionInfo-versionItem-id"
+      >
+        dashboard v3.0.0-b.3
+      </div>
+      <div
+        class="VersionInfo-versionItem-id"
+      >
+        core v3.0.0-b.15
+      </div>
+    </div>
     <div
       class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
       data-test-id="page-header"
@@ -72219,6 +72233,20 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
   <div
     class="Container-root-id"
   >
+    <div
+      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
+    >
+      <div
+        class="VersionInfo-versionItem-id"
+      >
+        dashboard v3.0.0-b.3
+      </div>
+      <div
+        class="VersionInfo-versionItem-id"
+      >
+        core v3.0.0-b.15
+      </div>
+    </div>
     <div
       class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
       data-test-id="page-header"

src/storybook/stories/configuration/ConfigurationPage.tsx

@@ -22,6 +22,11 @@ const user = {
   userPermissions: staffMember.userPermissions
 };
 
+const versions = {
+  dashboardVersion: "3.0.0-b.3",
+  coreVersion: "3.0.0-b.15"
+};
+
 const Story: React.FC<{ user: User }> = ({ user }) => {
   const intl = useIntl();
 
@@ -30,6 +35,7 @@ const Story: React.FC<{ user: User }> = ({ user }) => {
       menu={createConfigurationMenu(intl)}
       onSectionClick={() => undefined}
       user={user}
+      versionInfo={versions}
     />
   );
 };