feat: GitHub star (#3451)

frontend/common/utils/utils.tsx

@@ -21,7 +21,7 @@ import Constants from 'common/constants'
 
 const semver = require('semver')
 
-const planNames = {
+export const planNames = {
   enterprise: 'Enterprise',
   free: 'Free',
   scaleUp: 'Scale-Up',

frontend/web/components/App.js

@@ -24,6 +24,7 @@ import AccountStore from 'common/stores/account-store'
 import InfoMessage from './InfoMessage'
 import OrganisationLimit from './OrganisationLimit'
 import OrganisationLink from './OrganisationLink'
+import GithubStar from './GithubStar'
 
 const App = class extends Component {
   static propTypes = {
@@ -370,6 +371,7 @@ const App = class extends Component {
                                     </span>
                                     Account
                                   </NavLink>
+                                  <GithubStar />
                                   <Button
                                     href='https://docs.flagsmith.com'
                                     target='_blank'

frontend/web/components/GithubStar.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useEffect, useState } from 'react'
+import Utils, { planNames } from 'common/utils/utils'
+import AccountStore from 'common/stores/account-store'
+import Button from './base/forms/Button'
+import { IonIcon } from '@ionic/react'
+import { starOutline } from 'ionicons/icons'
+import Icon from './Icon'
+
+type GithubStarType = {}
+
+const GithubStar: FC<GithubStarType> = ({}) => {
+  const organisation = AccountStore.getOrganisation()
+  const plan = organisation?.subscription?.plan || ''
+  const planName = Utils.getPlanName(plan)
+  const [stars, setStars] = useState()
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    if (planName === planNames.enterprise) {
+      return null
+    }
+    fetch(`https://api.github.com/repos/flagsmith/flagsmith`)
+      .then(function (res) {
+        return res.json()
+      })
+      .then(function (res) {
+        setStars(res.stargazers_count)
+      })
+  }, [planName])
+
+  if (planName === planNames.enterprise) {
+    return null
+  }
+
+  return (
+    <>
+      <a
+        style={{ width: 90 }}
+        target='_blank'
+        href='https://github.com/flagsmith/flagsmith'
+        className='btn btn-sm btn-with-icon text-body me-2'
+        rel='noreferrer'
+      >
+        <div className='d-flex flex-row justify-content-center align-items-center'>
+          <Icon name='github' width={20} fill='#9DA4AE' />
+          <div className='ms-1'>{stars}</div>
+        </div>
+      </a>
+    </>
+  )
+}
+
+export default GithubStar

frontend/web/components/Icon.tsx

@@ -12,6 +12,7 @@ export type IconName =
   | 'checkmark-square'
   | 'checkmark'
   | 'info'
+  | 'star'
   | 'info-outlined'
   | 'close-circle'
   | 'chevron-right'
@@ -67,6 +68,23 @@ export type IconType = React.DetailedHTMLProps<
 
 const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
   switch (name) {
+    case 'star': {
+      return (
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          className='ionicon'
+          width={width}
+          viewBox='0 0 512 512'
+        >
+          <path
+            d='M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z'
+            strokeLinejoin='round'
+            fill={fill}
+            className='ionicon-stroke-width'
+          ></path>
+        </svg>
+      )
+    }
     case 'diff': {
       return (
         <svg