feat(wren-ui): Add version number in settings page & Github link (#252)

* feat(wren-ui): add wrenProductVersion to config

* feat(wren-ui): add product version to settings modal & add github link

* feat(wren-ui): add info circle icon to decorate version information

wren-ui/src/apollo/client/graphql/__types__.ts

@@ -681,6 +681,7 @@ export type SaveTablesInput = {
 export type Settings = {
   __typename?: 'Settings';
   dataSource: DataSource;
+  productVersion: Scalars['String'];
 };
 
 export type SimpleMeasureInput = {

wren-ui/src/apollo/client/graphql/settings.generated.ts

@@ -6,7 +6,7 @@ const defaultOptions = {} as const;
 export type GetSettingsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type GetSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'Settings', dataSource: { __typename?: 'DataSource', type: Types.DataSourceName, properties: any, sampleDataset?: Types.SampleDatasetName | null } } };
+export type GetSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'Settings', productVersion: string, dataSource: { __typename?: 'DataSource', type: Types.DataSourceName, properties: any, sampleDataset?: Types.SampleDatasetName | null } } };
 
 export type ResetCurrentProjectMutationVariables = Types.Exact<{ [key: string]: never; }>;
 
@@ -17,6 +17,7 @@ export type ResetCurrentProjectMutation = { __typename?: 'Mutation', resetCurren
 export const GetSettingsDocument = gql`
     query GetSettings {
   settings {
+    productVersion
     dataSource {
       type
       properties

wren-ui/src/apollo/client/graphql/settings.ts

@@ -3,6 +3,7 @@ import { gql } from '@apollo/client';
 export const GET_SETTINGS = gql`
   query GetSettings {
     settings {
+      productVersion
       dataSource {
         type
         properties

wren-ui/src/apollo/server/config.ts

@@ -30,9 +30,12 @@ export interface IConfig {
   posthogApiKey?: string;
   posthogHost?: string;
   userUUID?: string;
+
+  // versions
   wrenUIVersion?: string;
   wrenEngineVersion?: string;
   wrenAIVersion?: string;
+  wrenProductVersion?: string;
 }
 
 const defaultConfig = {
@@ -99,9 +102,12 @@ const config = {
   posthogApiKey: process.env.POSTHOG_API_KEY,
   posthogHost: process.env.POSTHOG_HOST,
   userUUID: process.env.USER_UUID,
+
+  // versions
   wrenUIVersion: process.env.WREN_UI_VERSION,
   wrenEngineVersion: process.env.WREN_ENGINE_VERSION,
   wrenAIVersion: process.env.WREN_AI_SERVICE_VERSION,
+  wrenProductVersion: process.env.WREN_PRODUCT_VERSION,
 };
 
 export function getConfig(): IConfig {

wren-ui/src/apollo/server/resolvers/projectResolver.ts

@@ -47,6 +47,7 @@ export class ProjectResolver {
     const dataSourceType = project.type;
 
     return {
+      productVersion: ctx.config.wrenProductVersion || '',
       dataSource: {
         type: dataSourceType,
         properties: this.getDataSourceProperties(project),

wren-ui/src/apollo/server/schema.ts

@@ -573,6 +573,7 @@ export const typeDefs = gql`
   }
 
   type Settings {
+    productVersion: String!
     dataSource: DataSource!
   }
 

wren-ui/src/components/settings/index.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Modal, Layout, Button } from 'antd';
 import styled from 'styled-components';
 import { SETTINGS } from '@/utils/enum';
 import { makeIterable } from '@/utils/iteration';
 import { ModalAction } from '@/hooks/useModalAction';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
+import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
 import DataSourceSettings from './DataSourceSettings';
 import ProjectSettings from './ProjectSettings';
 import { getSettingMenu } from './utils';
@@ -19,6 +20,14 @@ type Props = ModalAction<any, any> & {
   loading?: boolean;
 };
 
+const StyledSider = styled(Sider)`
+  .ant-layout-sider-children {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
+
 const StyledModal = styled(Modal)`
   .ant-modal-content {
     overflow: hidden;
@@ -94,6 +103,10 @@ export default function Settings(props: Props) {
     fetchPolicy: 'cache-and-network',
   });
 
+  const productVersion = useMemo(() => {
+    return data?.settings?.productVersion;
+  }, [data?.settings]);
+
   useEffect(() => {
     if (visible) fetchSettings();
   }, [visible]);
@@ -111,19 +124,25 @@ export default function Settings(props: Props) {
       centered
     >
       <Layout style={{ height: '100%' }}>
-        <Sider width={310} className="border-r border-gray-4">
+        <StyledSider width={310} className="border-r border-gray-4">
           <div className="gray-9 text-bold py-3 px-5">
             <SettingOutlined className="mr-2" />
             Settings
           </div>
-          <div className="p-3">
+          <div className="p-3 flex-grow-1">
             <MenuIterator
               data={menuList}
               currentMenu={menu}
               onClick={onMenuClick}
             />
           </div>
-        </Sider>
+          {!!productVersion && (
+            <div className="gray-7 d-flex align-center p-3 px-5">
+              <InfoCircleOutlined className="mr-2 text-sm" />
+              WrenAI version: {productVersion}
+            </div>
+          )}
+        </StyledSider>
         <Content className="d-flex flex-column">
           <div className="d-flex align-center gray-9 border-b border-gray-4 text-bold py-3 px-4">
             <current.icon className="mr-2" />

wren-ui/src/components/sidebar/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import { Button } from 'antd';
 import styled from 'styled-components';
 import { Path } from '@/utils/enum';
-import { DiscordIcon } from '@/utils/icons';
+import { DiscordIcon, GithubIcon } from '@/utils/icons';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
 import Home, { Props as HomeSidebarProps } from './Home';
 import Modeling, { Props as ModelingSidebarProps } from './Modeling';
@@ -76,20 +76,33 @@ export default function Sidebar(props: Props) {
     <Layout className="d-flex flex-column">
       <DynamicSidebar {...props} pathname={router.pathname} />
       <div className="border-t border-gray-4 pt-2">
+        <StyledButton type="text" block onClick={onSettingsClick}>
+          <SettingOutlined className="text-md" />
+          Settings
+        </StyledButton>
         <StyledButton type="text" block>
           <Link
+            className="d-flex align-center"
             href="https://discord.com/invite/5DvshJqG8Z"
             target="_blank"
             rel="noopener noreferrer"
             data-ph-capture="true"
             data-ph-capture-attribute-name="cta_go_to_discord"
           >
-            <DiscordIcon className="mr-1" /> Discord
+            <DiscordIcon className="mr-2" style={{ width: 16 }} /> Discord
           </Link>
         </StyledButton>
-        <StyledButton type="text" block onClick={onSettingsClick}>
-          <SettingOutlined className="text-md" />
-          Settings
+        <StyledButton type="text" block>
+          <Link
+            className="d-flex align-center"
+            href="https://github.com/Canner/WrenAI"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-ph-capture="true"
+            data-ph-capture-attribute-name="cta_go_to_github"
+          >
+            <GithubIcon className="mr-2" style={{ width: 16 }} /> GitHub
+          </Link>
         </StyledButton>
       </div>
     </Layout>

wren-ui/src/utils/icons.ts

@@ -28,7 +28,7 @@ import ShareAltOutlined from '@ant-design/icons/ShareAltOutlined';
 import { Binoculars, LightningCharge } from '@styled-icons/bootstrap';
 import MoreOutlined from '@ant-design/icons/MoreOutlined';
 import { Sparkles } from '@styled-icons/ionicons-outline';
-import { Discord } from '@styled-icons/fa-brands';
+import { Discord, Github } from '@styled-icons/fa-brands';
 
 export const NumericIcon = styled(SortNumerically)`
   height: 1em;
@@ -105,3 +105,7 @@ export const BinocularsIcon = styled(Binoculars)`
 export const DiscordIcon = styled(Discord)`
   height: 1em;
 `;
+
+export const GithubIcon = styled(Github)`
+  height: 1em;
+`;