Hide the github stars for logged in users (#5172)

packages/insomnia/jest.config.js

@@ -14,7 +14,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   verbose: true,
   moduleNameMapper: {
-    '\\.(css|less|png)$': '<rootDir>/src/__mocks__/dummy.ts',
+    '\\.(css|less|png|svg)$': '<rootDir>/src/__mocks__/dummy.ts',
     'styled-components': '<rootDir>/node_modules/styled-components',
     'jsonpath-plus': '<rootDir>/node_modules/jsonpath-plus/dist/index-node-cjs.cjs',
   },

packages/insomnia/src/__jest__/dropdown-container.ts

@@ -0,0 +1,9 @@
+import { dropdownsContainerId } from '../ui/components/base/dropdown/dropdown';
+
+export const getDropdownContainer = () => {
+  const container = document.createElement('div');
+  container.setAttribute('id', dropdownsContainerId);
+  document.body.appendChild(container);
+
+  return container;
+};

packages/insomnia/src/ui/components/app-header.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { globalBeforeEach } from '../../__jest__/before-each';
+import { getDropdownContainer } from '../../__jest__/dropdown-container';
+import * as models from '../../models';
+import { AppHeader } from './app-header';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+const createSettings = () => {
+  const settings = models.settings.init();
+  settings.incognitoMode = true;
+  return settings;
+};
+
+export const createMockStore = async (): Promise<MockStoreEnhanced<unknown, {}>> => {
+  const settings = createSettings();
+  return mockStore({
+    global: {
+      isLoggedIn: false,
+    },
+    entities: {
+      settings: [settings],
+    },
+  });
+};
+
+describe('<AppHeader />', () => {
+  beforeEach(globalBeforeEach);
+
+  test('shows the github stars button when not logged in', async () => {
+    const store = await createMockStore();
+    const container = getDropdownContainer();
+
+    render(
+      <Provider store={store}>
+        <AppHeader
+          breadcrumbProps={{
+            crumbs: [],
+          }}
+        />
+      </Provider>, { container },
+    );
+
+    expect(screen.getByText('Star')).toBeDefined();
+  });
+
+  test('hides the github stars button when logged in', async () => {
+    const store = await createMockStore();
+    const container = getDropdownContainer();
+
+    render(
+      <Provider store={store}>
+        <AppHeader
+          breadcrumbProps={{
+            crumbs: [],
+          }}
+        />
+      </Provider>, { container },
+    );
+
+    expect(screen.getByText('Star')).toBeDefined();
+  });
+});

packages/insomnia/src/ui/components/app-header.tsx

@@ -1,8 +1,10 @@
 import { Breadcrumb, BreadcrumbProps, Header as _Header } from 'insomnia-components';
 import React, { FC, Fragment, ReactNode } from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import coreLogo from '../images/insomnia-logo.svg';
+import { selectIsLoggedIn } from '../redux/selectors';
 import { SettingsButton } from './buttons/settings-button';
 import { AccountDropdownButton } from './dropdowns/account-dropdown/account-dropdown';
 import { GitHubStarsButton } from './github-stars-button';
@@ -40,13 +42,15 @@ export const AppHeader: FC<AppHeaderProps> = ({
   gridCenter,
   gridRight,
 }) => {
+  const isLoggedIn = useSelector(selectIsLoggedIn);
+
   return (
     <Header
       gridLeft={(
         <Fragment>
           <LogoWraper>
             <img style={{ zIndex: 1 }} src={coreLogo} alt="Insomnia" width="28" height="28" />
-            <GitHubStarsButton />
+            { !isLoggedIn ? <GitHubStarsButton /> : null }
           </LogoWraper>
           <Breadcrumb {...breadcrumbProps} />
         </Fragment>

packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx

@@ -6,8 +6,8 @@ import { Provider } from 'react-redux';
 import configureMockStore, { MockStoreEnhanced } from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
+import { getDropdownContainer } from '../../../../__jest__/dropdown-container';
 import * as models from '../../../../models';
-import { dropdownsContainerId } from '../../base/dropdown/dropdown';
 import { registerModal } from '../../modals';
 import { LoginModal } from '../../modals/login-modal';
 import { AccountDropdownButton } from './account-dropdown';
@@ -32,14 +32,6 @@ export const createMockStoreWithoutPaidFeatureAd = async (disablePaidFeatureAds:
 };
 
 describe('<AccountDropdownButton />', () => {
-  const getDropdownContainer = () => {
-    const container = document.createElement('div');
-    container.setAttribute('id', dropdownsContainerId);
-    document.body.appendChild(container);
-
-    return container;
-  };
-
   test('renders without exploding', async () => {
     const container = getDropdownContainer();
     const store = await createMockStoreWithoutPaidFeatureAd(true);