Upgrade /front version and display the version in settings navbar (#1207)

* Upgrade /front version and display the version in settings navbar

* fix

* fix version

* restore center

* add icon

* Fix styled components

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "dependencies": {
     "@air/react-drag-to-select": "^5.0.8",

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -27,7 +27,7 @@ export function SettingsNavbar() {
   }, [signOut, navigate]);
 
   return (
-    <SubMenuNavbar backButtonTitle="Settings">
+    <SubMenuNavbar backButtonTitle="Settings" displayVersion={true}>
       <NavTitle label="User" />
       <NavItem
         label="Profile"

front/src/modules/ui/icon/index.ts

@@ -55,3 +55,4 @@ export { IconHeart } from '@tabler/icons-react';
 export { IconBrandX } from '@tabler/icons-react';
 export { IconTag } from '@tabler/icons-react';
 export { IconHelpCircle } from '@tabler/icons-react';
+export { IconBrandGithub } from '@tabler/icons-react';

front/src/modules/ui/navbar/components/SubMenuNavbar.tsx

@@ -1,8 +1,11 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconBrandGithub } from '@/ui/icon';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-import { leftNavbarWidth } from '../constants';
+import packageJson from '../../../../../package.json';
+import { githubLink, leftNavbarWidth } from '../constants';
 
 import NavBackButton from './NavBackButton';
 import NavItemsContainer from './NavItemsContainer';
@@ -10,20 +13,66 @@ import NavItemsContainer from './NavItemsContainer';
 type OwnProps = {
   children: React.ReactNode;
   backButtonTitle: string;
+  displayVersion?: boolean;
 };
 
+const StyledVersionContainer = styled.div`
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledVersion = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledVersionLink = styled.a`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  text-decoration: none;
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+`;
+
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
   padding-top: ${({ theme }) => theme.spacing(9)};
   width: ${() => (useIsMobile() ? '100%' : leftNavbarWidth.desktop)};
 `;
 
-export default function SubMenuNavbar({ children, backButtonTitle }: OwnProps) {
+export default function SubMenuNavbar({
+  children,
+  backButtonTitle,
+  displayVersion,
+}: OwnProps) {
+  const version = packageJson.version;
+
+  const theme = useTheme();
+
   return (
     <StyledContainer>
+      <div>
         <NavBackButton title={backButtonTitle} />
         <NavItemsContainer>{children}</NavItemsContainer>
+      </div>
+      {displayVersion && (
+        <StyledVersionContainer>
+          <StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
+            <IconBrandGithub size={theme.icon.size.md} />
+            <StyledVersion>{version}</StyledVersion>
+          </StyledVersionLink>
+        </StyledVersionContainer>
+      )}
     </StyledContainer>
   );
 }

front/src/modules/ui/navbar/constants/index.ts

@@ -12,3 +12,5 @@ export const navbarIconSize = {
   mobile: 18,
   desktop: 16,
 };
+
+export const githubLink = 'https://github.com/twentyhq/twenty';