Add Admin button in Home Page (#828)

* Add admin nav button in home page * Format code * Replace admin specific actions into component specific actions * Apply suggestions from code review Co-authored-by: Harry Liu <[email protected]>
short-d · Jun 4, 2020 · 5bb07ec · 5bb07ec
1 parent 8e0beea
commit 5bb07ec
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 27 deletions.
diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
@@ -18,8 +18,8 @@ export class App extends Component<IProps> {
           <Route
             path={'/'}
             exact
-            render={({ location }) =>
-              this.props.uiFactory.createHomePage(location)
+            render={({ location, history }) =>
+              this.props.uiFactory.createHomePage(location, history)
             }
           />
           <Route

diff --git a/frontend/src/component/UIFactory.tsx b/frontend/src/component/UIFactory.tsx
@@ -55,19 +55,22 @@ export class UIFactory {
     private shortLinkService: ShortLinkService,
     private analyticsService: AnalyticsService
   ) {
-    const includeGoogleSignInButton = this.featureDecisionService.includeGoogleSignInButton;
+    const includeGoogleSignInButton = this.featureDecisionService
+      .includeGoogleSignInButton;
     this.ToggledGoogleSignInButton = withFeatureToggle(
       GoogleSignInButton,
       includeGoogleSignInButton
     );
 
-    const includeGithubSignInButton = this.featureDecisionService.includeGithubSignInButton;
+    const includeGithubSignInButton = this.featureDecisionService
+      .includeGithubSignInButton;
     this.ToggledGithubSignInButton = withFeatureToggle(
       GithubSignInButton,
       includeGithubSignInButton
     );
 
-    const includeFacebookSignInButton = this.featureDecisionService.includeFacebookSignInButton;
+    const includeFacebookSignInButton = this.featureDecisionService
+      .includeFacebookSignInButton;
     this.ToggledFacebookSignInButton = withFeatureToggle(
       FacebookSignInButton,
       includeFacebookSignInButton
@@ -76,25 +79,29 @@ export class UIFactory {
     const includeSearchBar = this.featureDecisionService.includeSearchBar;
     this.ToggledSearchBar = withFeatureToggle(SearchBar, includeSearchBar);
 
-    const includeViewChangeLogButton = this.featureDecisionService.includeViewChangeLogButton;
+    const includeViewChangeLogButton = this.featureDecisionService
+      .includeViewChangeLogButton;
     this.ToggledViewChangeLogButton = withFeatureToggle(
       ViewChangeLogButton,
       includeViewChangeLogButton
     );
 
-    const includePreferenceTogglesSubSection = this.featureDecisionService.includePreferenceTogglesSubSection;
+    const includePreferenceTogglesSubSection = this.featureDecisionService
+      .includePreferenceTogglesSubSection;
     this.ToggledPreferenceTogglesSubSection = withFeatureToggle(
       PreferenceTogglesSubSection,
       includePreferenceTogglesSubSection
     );
 
-    const includePublicListingToggle = this.featureDecisionService.includePublicListingToggle;
+    const includePublicListingToggle = this.featureDecisionService
+      .includePublicListingToggle;
     this.ToggledPublicListingToggle = withFeatureToggle(
       PublicListingToggle,
       includePublicListingToggle
     );
 
-    const includeUserShortLinksSection = this.featureDecisionService.includeUserShortLinksSection;
+    const includeUserShortLinksSection = this.featureDecisionService
+      .includeUserShortLinksSection;
     this.ToggledUserShortLinksSection = withFeatureToggle(
       UserShortLinksSection,
       includeUserShortLinksSection
@@ -104,7 +111,10 @@ export class UIFactory {
     this.AuthedAdminPage = withPageAuth(AdminPage, includeAdminPage);
   }
 
-  public createHomePage(location: H.Location<any>): ReactElement {
+  public createHomePage(
+    location: H.Location<any>,
+    history: H.History<any>
+  ): ReactElement {
     return (
       <HomePage
         uiFactory={this}
@@ -122,6 +132,7 @@ export class UIFactory {
         analyticsService={this.analyticsService}
         store={this.store}
         location={location}
+        history={history}
       />
     );
   }

diff --git a/frontend/src/component/pages/HomePage.tsx b/frontend/src/component/pages/HomePage.tsx
@@ -9,7 +9,7 @@ import { Modal } from '../ui/Modal';
 import { ExtPromo } from './shared/promos/ExtPromo';
 import { validateLongLinkFormat } from '../../validators/LongLink.validator';
 import { validateCustomAliasFormat } from '../../validators/CustomAlias.validator';
-import { Location } from 'history';
+import { Location, History } from 'history';
 import { AuthService } from '../../service/Auth.service';
 import { IBrowserExtensionService } from '../../service/extensionService/BrowserExtension.service';
 import { VersionService } from '../../service/Version.service';
@@ -61,10 +61,12 @@ interface Props {
   analyticsService: AnalyticsService;
   store: Store<IAppState>;
   location: Location;
+  history: History;
 }
 
 interface State {
   isUserSignedIn?: boolean;
+  shouldShowAdminButton?: boolean;
   shouldShowPromo?: boolean;
   longLink?: string;
   alias?: string;
@@ -108,11 +110,19 @@ export class HomePage extends Component<Props, State> {
     this.setState({
       isUserSignedIn: true
     });
+    this.showAdminButton();
     this.handleStateChange();
     this.autoFillLongLink();
     this.autoShowChangeLog();
   }
 
+  private showAdminButton = async () => {
+    const decision = await this.props.featureDecisionService.includeAdminPage();
+    this.setState({
+      shouldShowAdminButton: decision
+    });
+  };
+
   autoShowChangeLog = async () => {
     const showChangeLog = await this.props.featureDecisionService.includeViewChangeLogButton();
     if (!showChangeLog) {
@@ -194,8 +204,10 @@ export class HomePage extends Component<Props, State> {
   }
 
   requestSignIn = () => {
+    // TODO(issue#833): make feature Toggle handle dynamic rendering condition.
     this.setState({
-      isUserSignedIn: false
+      isUserSignedIn: false,
+      shouldShowAdminButton: false
     });
     this.props.authService.signOut();
     this.showSignInModal();
@@ -214,6 +226,10 @@ export class HomePage extends Component<Props, State> {
     this.requestSignIn();
   };
 
+  handleAdminButtonClick = () => {
+    this.props.history.push('/admin');
+  };
+
   handleLongLinkChange = (newLongLink: string) => {
     this.props.store.dispatch(updateLongLink(newLongLink));
   };
@@ -356,7 +372,9 @@ export class HomePage extends Component<Props, State> {
           onSearchBarInputChange={this.handleSearchBarInputChange}
           autoCompleteSuggestions={this.state.autoCompleteSuggestions}
           shouldShowSignOutButton={this.state.isUserSignedIn}
+          shouldShowAdminButton={this.state.shouldShowAdminButton}
           onSignOutButtonClick={this.handleSignOutButtonClick}
+          onAdminButtonClick={this.handleAdminButtonClick}
         />
         <div className={'main'}>
           <CreateShortLinkSection

diff --git a/frontend/src/component/pages/shared/Header.scss b/frontend/src/component/pages/shared/Header.scss
@@ -14,6 +14,20 @@ header {
     display: flex;
     padding: 10px 0;
     width: $content-width;
+    flex-wrap: wrap;
+
+    nav {
+      display: flex;
+      align-items: center;
+
+      .nav-item {
+        margin-left: 8px;
+
+        .button {
+          padding: 5px 20px;
+        }
+      }
+    }
   }
 
   #logo {
@@ -30,12 +44,4 @@ header {
   #searchbar {
     flex: 1;
   }
-
-  .sign-out {
-    display: flex;
-
-    @include respond-to($desktop) {
-      margin-right: 8px;
-    }
-  }
 }
diff --git a/frontend/src/component/pages/shared/Header.tsx b/frontend/src/component/pages/shared/Header.tsx
@@ -9,7 +9,9 @@ interface Props {
   onSearchBarInputChange: (searchBarInput: String) => void;
   autoCompleteSuggestions?: Array<Url>;
   shouldShowSignOutButton?: boolean;
+  shouldShowAdminButton?: boolean;
   onSignOutButtonClick: () => void;
+  onAdminButtonClick: () => void;
 }
 
 export class Header extends Component<Props> {
@@ -24,13 +26,20 @@ export class Header extends Component<Props> {
               autoCompleteSuggestions: this.props.autoCompleteSuggestions
             })}
           </div>
-          {this.props.shouldShowSignOutButton && (
-            <div className={'sign-out'}>
-              <Button onClick={this.props.onSignOutButtonClick}>
-                Sign out
-              </Button>
-            </div>
-          )}
+          <nav>
+            {this.props.shouldShowAdminButton && (
+              <div className={'nav-item'}>
+                <Button onClick={this.props.onAdminButtonClick}>Admin</Button>
+              </div>
+            )}
+            {this.props.shouldShowSignOutButton && (
+              <div className={'nav-item'}>
+                <Button onClick={this.props.onSignOutButtonClick}>
+                  Sign out
+                </Button>
+              </div>
+            )}
+          </nav>
         </div>
       </header>
     );