Skip to content
This repository has been archived by the owner on Aug 22, 2022. It is now read-only.

Commit

Permalink
Merge pull request #762 from open-craft/arjun/bb-3869-hero-page
Browse files Browse the repository at this point in the history 
[BB-3869] Update Hero page
  • Loading branch information
@arjunsinghy96
arjunsinghy96 committed Apr 16, 2021
2 parents 3a7a134 + 20ef40d commit 0f1e905
Show file tree
Hide file tree
Showing 15 changed files with 582 additions and 1,336 deletions.
34 changes: 28 additions & 6 deletions frontend/src/console/components/Hero/Hero.spec.tsx
View file
Expand Up @@ -5,7 +5,17 @@ import {Hero} from './Hero';

describe('Hero customization page', function () {
it('renders without crashing', () => {
const tree = setupComponentForTesting(<Hero/>).toJSON();
const tree = setupComponentForTesting(
<Hero/>,
{
console: {
activeInstance: {},
history: {
goBack: () => { }
}
}
}
).toJSON();
expect(tree).toMatchSnapshot();
});

Expand Down Expand Up @@ -35,8 +45,11 @@ describe('Hero customization page', function () {
id: 1,
instanceName: "test",
subdomain: "test"
}]
}
}],
history: {
goBack: () => { }
}
},
}
).toJSON();
expect(tree).toMatchSnapshot();
Expand All @@ -61,7 +74,10 @@ describe('Hero customization page', function () {
id: 1,
instanceName: "test",
subdomain: "test"
}]
}],
history: {
goBack: () => { }
}
}
}
).toJSON();
Expand Down Expand Up @@ -95,7 +111,10 @@ describe('Hero customization page', function () {
id: 1,
instanceName: "test",
subdomain: "test"
}]
}],
history: {
goBack: () => { }
}
}
}
).toJSON();
Expand Down Expand Up @@ -129,7 +148,10 @@ describe('Hero customization page', function () {
id: 1,
instanceName: "test",
subdomain: "test"
}]
}],
history: {
goBack: () => { }
}
}
}
).toJSON();
Expand Down
218 changes: 74 additions & 144 deletions frontend/src/console/components/Hero/Hero.tsx
View file
@@ -1,16 +1,10 @@
import * as React from 'react';
import { InstancesModel } from 'console/models';
import { StaticContentOverrides, ThemeSchema } from 'ocim-client';
import {
ConsolePage,
ConsolePageCustomizationContainer
} from 'console/components';
import { ThemeSchema } from 'ocim-client';
import { ConsolePage } from 'newConsole/components';
import { WrappedMessage } from 'utils/intl';
import { Col, Row } from 'react-bootstrap';
import {
CollapseEditArea,
ColorInputField,
HeroPreview,
ImageUploadField,
TextInputField
} from 'ui/components';
Expand All @@ -22,6 +16,7 @@ import {
} from 'console/actions';
import { RootState } from 'global/state';
import { connect } from 'react-redux';
import { Col, Row } from 'react-bootstrap';
import messages from './displayMessages';
import './styles.scss';

Expand Down Expand Up @@ -51,7 +46,7 @@ interface Props extends StateProps, ActionProps {}
* Return empty values if props don't exist yet.
*/
const getHeroContents = (props: Props) => {
const instanceData = props.activeInstance.data;
const instanceData = props.activeInstance!.data;
let title = '';
let subtitle = '';

Expand Down Expand Up @@ -230,7 +225,6 @@ export class HeroComponent extends React.PureComponent<Props, State> {
public render() {
const instance = this.props.activeInstance;
let themeData: undefined | ThemeSchema;
let staticContentOverrides: undefined | StaticContentOverrides;

// Fixing state lifecycle management issues
const dataFromProps = getHeroContents(this.props);
Expand All @@ -240,142 +234,78 @@ export class HeroComponent extends React.PureComponent<Props, State> {
if (this.themeConfigExists()) {
themeData = instance.data!.draftThemeConfig;
}

if (this.staticContentOverridesExists()) {
staticContentOverrides = instance.data!.draftStaticContentOverrides;
}
return (
<ConsolePage contentLoading={this.props.loading}>
<ConsolePage contentLoading={this.props.loading} showSideBarEditComponent>
<div className="hero-page">
<ConsolePageCustomizationContainer>
<Row>
<Col md={9}>
<h2>
<WrappedMessage id="hero" messages={messages} />
</h2>
<p>
<WrappedMessage id="heroDescription" messages={messages} />
</p>
</Col>
</Row>
{themeData && themeData.version === 1 && (
<div>
<Row>
<Col>
{this.themeConfigExists() &&
this.staticContentOverridesExists() && (
<HeroPreview
heroCoverImage={instance.data!.heroCoverImage || ''}
homePageHeroTitleColor={
themeData.homePageHeroTitleColor
}
homePageHeroSubtitleColor={
themeData!.homePageHeroSubtitleColor
}
homepageOverlayHtml={
staticContentOverrides!.homepageOverlayHtml
}
/>
)}
</Col>
</Row>
<CollapseEditArea initialExpanded>
<Row>
<Col>
<span className="section-title">
<WrappedMessage id="heroText" messages={messages} />
</span>
</Col>
</Row>
<Row className="title-customization-fields">
<Col md={6}>
<TextInputField
fieldName="title"
messages={messages}
value={this.state.title}
onBlur={this.updateHeroText}
onChange={this.onChange}
reset={() => {
this.resetHeroValue('title');
}}
key={heroTitleKey}
/>
</Col>
<Col md={6}>
<TextInputField
fieldName="subtitle"
messages={messages}
value={this.state.subtitle}
onBlur={this.updateHeroText}
onChange={this.onChange}
reset={() => {
this.resetHeroValue('subtitle');
}}
key={heroSubtitleKey}
/>
</Col>
</Row>

<Row>
<Col>
<span className="section-title">
<WrappedMessage id="heroStyling" messages={messages} />
</span>
</Col>
</Row>

<Row className="hero-customizations">
<Col key="heroTitleColor">
<ColorInputField
fieldName="homePageHeroTitleColor"
initialValue={themeData.homePageHeroTitleColor || ''}
onChange={this.onChangeColor}
messages={messages}
loading={instance.loading.includes('draftThemeConfig')}
hideTooltip
/>
</Col>
<Col key="heroSubtitleColor">
<ColorInputField
fieldName="homePageHeroSubtitleColor"
initialValue={themeData.homePageHeroSubtitleColor || ''}
onChange={this.onChangeColor}
messages={messages}
loading={instance.loading.includes('draftThemeConfig')}
hideTooltip
/>
</Col>
</Row>
<Row>
<Col>
<ImageUploadField
// prettier-ignore
customUploadMessage={(
<WrappedMessage id="uploadHeroCoverImage" messages={messages} />
)}
updateImage={(image: File) => {
this.updateImage('heroCoverImage', image);
}}
clearError={() => {
this.props.clearErrorMessage('heroCover');
}}
parentMessages={messages}
recommendationTextId="heroRecommendation"
reset={() => {
if (
this.activeInstanceDataExists() &&
instance.data!.heroCoverImage
) {
this.removeImage('heroCoverImage');
}
}}
/>
</Col>
</Row>
</CollapseEditArea>
</div>
)}
</ConsolePageCustomizationContainer>
{themeData && themeData.version === 1 && (
<div>
<h1 className="edit-heading">
<WrappedMessage messages={messages} id="Hero" />
</h1>
<TextInputField
fieldName="title"
messages={messages}
value={this.state.title}
onBlur={this.updateHeroText}
onChange={this.onChange}
reset={() => {
this.resetHeroValue('title');
}}
key={heroTitleKey}
/>
<TextInputField
fieldName="subtitle"
messages={messages}
value={this.state.subtitle}
onBlur={this.updateHeroText}
onChange={this.onChange}
reset={() => {
this.resetHeroValue('subtitle');
}}
key={heroSubtitleKey}
/>
<Row>
<Col>
<ColorInputField
fieldName="homePageHeroTitleColor"
initialValue={themeData.homePageHeroTitleColor || ''}
onChange={this.onChangeColor}
messages={messages}
loading={instance.loading.includes('draftThemeConfig')}
/>
<ColorInputField
fieldName="homePageHeroSubtitleColor"
initialValue={themeData.homePageHeroSubtitleColor || ''}
onChange={this.onChangeColor}
messages={messages}
loading={instance.loading.includes('draftThemeConfig')}
/>
</Col>
</Row>
<ImageUploadField
// prettier-ignore
customUploadMessage={(
<WrappedMessage id="uploadHeroCoverImage" messages={messages} />
)}
updateImage={(image: File) => {
this.updateImage('heroCoverImage', image);
}}
clearError={() => {
this.props.clearErrorMessage('heroCover');
}}
parentMessages={messages}
recommendationTextId="heroRecommendation"
reset={() => {
if (
this.activeInstanceDataExists() &&
instance.data!.heroCoverImage
) {
this.removeImage('heroCoverImage');
}
}}
/>
</div>
)}
</div>
</ConsolePage>
);
Expand Down

0 comments on commit 0f1e905

Please sign in to comment.