Skip to content
This repository has been archived by the owner on Oct 17, 2020. It is now read-only.

Add Admin button in Home Page #828

Merged
merged 6 commits into from
Jun 4, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/component/App.tsx
Original file line number Diff line number Diff line change
@@ -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
27 changes: 19 additions & 8 deletions frontend/src/component/UIFactory.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
);
}
22 changes: 20 additions & 2 deletions frontend/src/component/pages/HomePage.tsx
Original file line number Diff line number Diff line change
@@ -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
22 changes: 14 additions & 8 deletions frontend/src/component/pages/shared/Header.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
23 changes: 16 additions & 7 deletions frontend/src/component/pages/shared/Header.tsx
Original file line number Diff line number Diff line change
@@ -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>
);