#RI-2468 - Add RI GitHub reference to the sidebar

Author: rsergeenko

redisinsight/ui/src/assets/img/sidebar/github.svg

@@ -5,12 +5,13 @@ import styles from './styles.module.scss'
 
 export interface Props {
   color?: string
+  colorVariable?: string
   orientation?: 'horizontal' | 'vertical',
   variant? : 'fullWidth' | 'middle' | 'half';
   className?: string;
 }
 
-const Divider = ({ orientation, variant, className, color }: Props) => (
+const Divider = ({ orientation, variant, className, color, colorVariable }: Props) => (
   <div
     className={cx(
       styles.divider,
@@ -19,7 +20,7 @@ const Divider = ({ orientation, variant, className, color }: Props) => (
       className,
     )}
   >
-    <hr style={color ? { backgroundColor: color } : {}} />
+    <hr style={(color || colorVariable) ? { backgroundColor: color ?? `var(--${colorVariable})` } : {}} />
   </div>
 )
 

redisinsight/ui/src/components/divider/Divider.tsx

@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 8px 0;
   hr {
     border: none;
     height: 1px;
@@ -11,22 +10,20 @@
   }
   &-vertical {
     height: auto;
-    margin: 0 8px;
     hr {
       height: 100%;
       width: 1px;
     }
   }
 
   &-middle {
-    margin: 8px 6px;
+    margin: 6px 12px;
     &.divider-vertical {
-      margin: 6px 8px;
+      margin: 12px 6px;
     }
   }
 
   &-half {
-    margin: 8px 0;
     hr {
       width: 50%;
     }

redisinsight/ui/src/components/divider/styles.module.scss

@@ -19,6 +19,7 @@ import {
 } from '@elastic/eui'
 
 import { PageNames, Pages } from 'uiSrc/constants'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { getRouterLinkProps } from 'uiSrc/services'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { appElectronInfoSelector, setReleaseNotesViewed, setShortcutsFlyoutState } from 'uiSrc/slices/app/info'
@@ -29,6 +30,7 @@ import BrowserSVG from 'uiSrc/assets/img/sidebar/browser.svg'
 import BrowserActiveSVG from 'uiSrc/assets/img/sidebar/browser_active.svg'
 import WorkbenchSVG from 'uiSrc/assets/img/sidebar/workbench.svg'
 import WorkbenchActiveSVG from 'uiSrc/assets/img/sidebar/workbench_active.svg'
+import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg'
 import Divider from 'uiSrc/components/divider/Divider'
 
 import { BuildType } from 'uiSrc/constants/env'
@@ -177,7 +179,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
             <EuiLink
               external={false}
               className={styles.helpMenuItemLink}
-              href="https://github.com/RedisInsight/RedisInsight/issues"
+              href={EXTERNAL_LINKS.githubIssues}
               target="_blank"
               data-testid="submit-bug-btn"
             >
@@ -212,7 +214,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
               external={false}
               className={styles.helpMenuItemLink}
               onClick={onClickReleaseNotes}
-              href="https://docs.redis.com/staging/release-ri-v2.0/ri/release-notes/"
+              href={EXTERNAL_LINKS.releaseNotes}
               target="_blank"
               data-testid="release-notes-btn"
             >
@@ -236,19 +238,12 @@ const NavigationMenu = ({ buildType }: IProps) => {
           content={buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
           position="right"
         >
-          <span className={styles.iconLogo}>
+          <span className={cx(styles.iconNavItem, styles.homeIcon)}>
             <EuiLink {...getRouterLinkProps(Pages.home)} data-test-subj="home-page-btn">
               <EuiIcon aria-label="redisinsight home page" type={LogoSVG} />
             </EuiLink>
           </span>
         </EuiToolTip>
-        <Divider color="#465282" className="eui-hideFor--xs eui-hideFor--s" variant="middle" />
-        <Divider
-          color="#465282"
-          className="eui-showFor--xs--flex eui-showFor--s--flex"
-          variant="middle"
-          orientation="vertical"
-        />
 
         {connectedInstanceId && (
           privateRoutes.map((nav) => (
@@ -265,13 +260,6 @@ const NavigationMenu = ({ buildType }: IProps) => {
         )}
       </div>
       <div className={styles.bottomContainer}>
-        <Divider color="#465282" className="eui-hideFor--xs eui-hideFor--s" variant="middle" />
-        <Divider
-          color="#465282"
-          className="eui-showFor--xs--flex eui-showFor--s--flex"
-          variant="middle"
-          orientation="vertical"
-        />
         {HelpMenu()}
         {publicRoutes.map((nav) => (
           <EuiToolTip content={nav.tooltipText} position="right" key={nav.tooltipText}>
@@ -284,6 +272,33 @@ const NavigationMenu = ({ buildType }: IProps) => {
             />
           </EuiToolTip>
         ))}
+        <Divider colorVariable="euiColorSecondary" className="eui-hideFor--xs eui-hideFor--s" variant="middle" />
+        <Divider
+          colorVariable="euiColorSecondary"
+          className="eui-showFor--xs--flex eui-showFor--s--flex"
+          variant="middle"
+          orientation="vertical"
+        />
+        <EuiToolTip
+          content="RedisInsight repository"
+          position="right"
+        >
+          <span className={cx(styles.iconNavItem, styles.githubLink)}>
+            <EuiLink
+              external={false}
+              href={EXTERNAL_LINKS.githubRepo}
+              target="_blank"
+              data-test-subj="github-repo-btn"
+            >
+              <EuiIcon
+                className={styles.githubIcon}
+                aria-label="redis insight github repository"
+                type={GithubSVG}
+                data-testid="github-repo-icon"
+              />
+            </EuiLink>
+          </span>
+        </EuiToolTip>
       </div>
     </EuiPageSideBar>
   )

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -29,6 +29,8 @@ $sideBarWidth: 60px;
 
     &.active {
       background-color: var(--euiColorSuccessText) !important;
+      transform: none;
+      cursor: default;
     }
 
     &.navigationButtonNotified {
@@ -56,7 +58,6 @@ $sideBarWidth: 60px;
 
 .navigation {
   background: var(--navBackgroundColor) !important;
-  padding: 32px 0;
   display: flex !important;
   flex-direction: column;
   justify-content: space-between;
@@ -74,7 +75,7 @@ $sideBarWidth: 60px;
   background-color: var(--navBackgroundColor);
 }
 
-.iconLogo {
+.iconNavItem {
   display: inline-flex;
   height: 60px;
   width: 60px;
@@ -91,6 +92,43 @@ $sideBarWidth: 60px;
     width: 34px;
     height: 34px;
   }
+
+  :global(.euiLink) {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.homeIcon {
+  height: 60px;
+  width: 72px;
+  @media only screen and (min-width: 768px) {
+    height: 72px;
+    width: 60px;
+  }
+}
+
+.githubLink {
+  :global(.euiLink.euiLink--primary):focus {
+    animation: none !important;
+  }
+  .githubIcon {
+    width: 30px;
+    height: 30px;
+    // color of icon, no need variable here
+    border: 2px solid #000;
+    border-radius: 100%;
+    transition: border-color ease .3s;
+  }
+  &:hover {
+    .githubIcon {
+      border-color: var(--euiColorSuccessText);
+    }
+  }
 }
 
 .popoverWrapper {

redisinsight/ui/src/components/navigation-menu/styles.module.scss

@@ -0,0 +1,5 @@
+export const EXTERNAL_LINKS = {
+  githubRepo: 'https://github.com/RedisInsight/RedisInsight',
+  githubIssues: 'https://github.com/RedisInsight/RedisInsight/issues',
+  releaseNotes: 'https://docs.redis.com/staging/release-ri-v2.0/ri/release-notes/',
+}

redisinsight/ui/src/constants/links.ts

@@ -141,7 +141,7 @@ const instancesSlice = createSlice({
     setConnectedInstance: (state, { payload }: { payload: Instance }) => {
       const isRediStack = state.data?.find((db) => db.id === state.connectedInstance.id)?.isRediStack
       state.connectedInstance = payload
-      state.connectedInstance.isRediStack =  isRediStack || false
+      state.connectedInstance.isRediStack = isRediStack || false
     },
 
     // reset connected instance

redisinsight/ui/src/slices/instances.ts

@@ -43,7 +43,6 @@ main.euiPageBody {
     height: 100% !important;
     max-height: 100% !important;
     flex: 0 1 0 !important;
-    padding: 4px 0 20px !important;
     overflow: auto !important;
   }
 }