fix: Use Page component on "Api Keys" and "Preferences" under Configuration

This commit is contained in:
Johannes Schill 2019-01-16 16:16:19 +01:00
parent feeb3ea56d
commit 3ca7523a02
2 changed files with 32 additions and 33 deletions

View File

@ -3,11 +3,10 @@ import ReactDOMServer from 'react-dom/server';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types'; import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel, getTitleFromNavModel } from 'app/core/selectors/navModel';
import { getApiKeys, getApiKeysCount } from './state/selectors'; import { getApiKeys, getApiKeysCount } from './state/selectors';
import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions'; import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import PageLoader from 'app/core/components/PageLoader/PageLoader';
import SlideDown from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import ApiKeysAddedModal from './ApiKeysAddedModal'; import ApiKeysAddedModal from './ApiKeysAddedModal';
import config from 'app/core/config'; import config from 'app/core/config';
@ -240,18 +239,18 @@ export class ApiKeysPage extends PureComponent<Props, any> {
const { hasFetched, navModel, apiKeysCount } = this.props; const { hasFetched, navModel, apiKeysCount } = this.props;
return ( return (
<div> <Page title={getTitleFromNavModel(navModel)}>
<PageHeader model={navModel} /> <Page.Header model={navModel} />
{hasFetched ? ( <Page.Contents isLoading={!hasFetched}>
apiKeysCount > 0 ? ( {hasFetched && (
this.renderApiKeyList() apiKeysCount > 0 ? (
) : ( this.renderApiKeyList()
this.renderEmptyList() ) : (
) this.renderEmptyList()
) : ( )
<PageLoader pageName="Api keys" /> )}
)} </Page.Contents>
</div> </Page>
); );
} }
} }

View File

@ -1,13 +1,12 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PageHeader from '../../core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import PageLoader from '../../core/components/PageLoader/PageLoader';
import OrgProfile from './OrgProfile'; import OrgProfile from './OrgProfile';
import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences'; import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions'; import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions';
import { NavModel, Organization, StoreState } from 'app/types'; import { NavModel, Organization, StoreState } from 'app/types';
import { getNavModel } from '../../core/selectors/navModel'; import { getNavModel, getTitleFromNavModel } from 'app/core/selectors/navModel';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
@ -35,22 +34,23 @@ export class OrgDetailsPage extends PureComponent<Props> {
const isLoading = Object.keys(organization).length === 0; const isLoading = Object.keys(organization).length === 0;
return ( return (
<div> <Page title={getTitleFromNavModel(navModel)}>
<PageHeader model={navModel} /> <Page.Header model={navModel} />
<div className="page-container page-body"> <Page.Contents isLoading={isLoading}>
{isLoading && <PageLoader pageName="Organization" />} <div className="page-container page-body">
{!isLoading && ( {!isLoading && (
<div> <div>
<OrgProfile <OrgProfile
onOrgNameChange={name => this.onOrgNameChange(name)} onOrgNameChange={name => this.onOrgNameChange(name)}
onSubmit={this.onUpdateOrganization} onSubmit={this.onUpdateOrganization}
orgName={organization.name} orgName={organization.name}
/> />
<SharedPreferences resourceUri="org" /> <SharedPreferences resourceUri="org" />
</div>
)}
</div> </div>
)} </Page.Contents>
</div> </Page>
</div>
); );
} }
} }