Skip to content

Commit

Permalink
Remove in-page breadcrumbs and move sidebar copy
Browse files Browse the repository at this point in the history 
In Kibana, breadcrumbs will be at the top-level and not in the view

Also, we have no sidebar with contextual copy. The Figma designs call for this copy to be above the main content. For now I am placing this in the existing ViewContentHeader component.

This will be slightly broken because of the structure of ViewContentHeader but that is expected for now since it cannot be rendered in the browser yet to fix
  • Loading branch information
@scottybollinger
scottybollinger committed Nov 19, 2020
1 parent d21a661 commit bce570c
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 67 deletions.
20 changes: 5 additions & 15 deletions .../applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import { useHistory } from 'react-router-dom';

import { AppLogic } from '../../../../app_logic';
import { Loading } from '../../../../../../applications/shared/loading';
import { ViewContentHeader } from '../../../../components/shared/view_content_header';
import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
import { staticSourceData } from '../../source_data';
import { SourceLogic } from '../../source_logic';
import { SourceDataItem, FeatureIds } from '../../../../types';
import { ADD_SOURCE_PATH, SOURCE_ADDED_PATH, getSourcesPath } from '../../../../routes';
import { SOURCE_ADDED_PATH, getSourcesPath } from '../../../../routes';

import { AddSourceHeader } from './add_source_header';
import { ConfigCompleted } from './config_completed';
Expand Down Expand Up @@ -88,11 +89,6 @@ export const AddSource: React.FC<AddSourceProps> = ({
return resetSourceState;
}, []);

const breadcrumbs = {
topLevelPath: getSourcesPath(ADD_SOURCE_PATH, isOrganization),
topLevelName: '← Back to sources',
};

const isCustom = serviceType === CUSTOM_SERVICE_TYPE;
const isRemote = features?.platinumPrivateContext.includes(FeatureIds.Remote);

Expand Down Expand Up @@ -125,7 +121,7 @@ export const AddSource: React.FC<AddSourceProps> = ({
history.push(`${getSourcesPath(SOURCE_ADDED_PATH, isOrganization)}/?name=${sourceName}`);
};

const sidebarTitle = () => {
const pageTitle = () => {
if (currentStep === Steps.ConnectInstanceStep || currentStep === Steps.ConfigureOauthStep) {
return 'Connect';
}
Expand Down Expand Up @@ -172,17 +168,17 @@ export const AddSource: React.FC<AddSourceProps> = ({
? CONNECT_ORGANIZATION_SOURCE_SIDEBAR_BLURB
: CONNECT_PRIVATE_SOURCE_SIDEBAR_BLURB;

const sidebarBlurb =
const PAGE_DESCRIPTION =
currentStep === Steps.ConnectInstanceStep ? CONNECT_SIDEBAR_BLURB : CONFIG_SIDEBAR_BLURB;

const header = <AddSourceHeader name={name} serviceType={serviceType} categories={categories} />;

return (
<>
<ViewContentHeader title={pageTitle()} description={PAGE_DESCRIPTION} />
{currentStep === Steps.ConfigIntroStep && (
<ConfigurationIntro name={name} advanceStep={goToSaveConfig} header={header} />
)}

{currentStep === Steps.SaveConfigStep && (
<SaveConfig
name={name}
Expand All @@ -192,7 +188,6 @@ export const AddSource: React.FC<AddSourceProps> = ({
header={header}
/>
)}

{currentStep === Steps.ConfigCompletedStep && (
<ConfigCompleted
name={name}
Expand All @@ -202,7 +197,6 @@ export const AddSource: React.FC<AddSourceProps> = ({
header={header}
/>
)}

{currentStep === Steps.ConnectInstanceStep && (
<ConnectInstance
name={name}
Expand All @@ -217,19 +211,16 @@ export const AddSource: React.FC<AddSourceProps> = ({
header={header}
/>
)}

{currentStep === Steps.ConfigureCustomStep && (
<ConfigureCustom
helpText={configuration.helpText}
advanceStep={goToSaveCustom}
header={header}
/>
)}

{currentStep === Steps.ConfigureOauthStep && (
<ConfigureOauth name={name} onFormCreated={goToFormSourceCreated} header={header} />
)}

{currentStep === Steps.SaveCustomStep && (
<SaveCustom
documentationUrl={configuration.documentationUrl}
Expand All @@ -238,7 +229,6 @@ export const AddSource: React.FC<AddSourceProps> = ({
header={header}
/>
)}

{currentStep === Steps.ReAuthenticateStep && <ReAuthenticate name={name} header={header} />}
</>
);
Expand Down
108 changes: 56 additions & 52 deletions ...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ import {

import { AppLogic } from '../../../../app_logic';
import { ContentSection } from '../../../../components/shared/content_section';
import { ViewContentHeader } from '../../../../components/shared/view_content_header';
import { Loading } from '../../../../../../applications/shared/loading';
import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
import { SourceDataItem } from '../../../../types';
import { SOURCES_PATH, getSourcesPath } from '../../../../routes';

import { SourcesLogic } from '../../sources_logic';
import { AvailableSourcesList } from './available_sources_list';
Expand Down Expand Up @@ -64,18 +64,14 @@ export const AddSourceList: React.FC = () => {
({ serviceType }) => serviceType !== CUSTOM_SERVICE_TYPE
);

const breadcrumbs = {
topLevelPath: getSourcesPath(SOURCES_PATH, isOrganization),
topLevelName: `${isOrganization ? 'Shared' : 'Private'} content sources`,
activeName: 'Add',
};

const SIDEBAR_DESCRIPTION = hasSources ? '' : NEW_SOURCE_DESCRIPTION;
const SIDEBAR_CONTEXT_DESCRIPTION = isOrganization
const BASE_DESCRIPTION = hasSources ? '' : NEW_SOURCE_DESCRIPTION;
const PAGE_CONTEXT_DESCRIPTION = isOrganization
? ORG_SOURCE_DESCRIPTION
: PRIVATE_SOURCE_DESCRIPTION;

const PAGE_DESCRIPTION = BASE_DESCRIPTION + PAGE_CONTEXT_DESCRIPTION;
const HAS_SOURCES_TITLE = isOrganization ? ORG_SOURCES_TITLE : PRIVATE_SOURCES_TITLE;
const SIDEBAR_TITLE = hasSources ? HAS_SOURCES_TITLE : NO_SOURCES_TITLE;
const PAGE_TITLE = hasSources ? HAS_SOURCES_TITLE : NO_SOURCES_TITLE;

const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value);

Expand All @@ -98,48 +94,56 @@ export const AddSourceList: React.FC = () => {
filterConfiguredSources
) as SourceDataItem[];

return showConfiguredSourcesList || isOrganization ? (
<ContentSection>
<EuiSpacer />
<EuiFormRow>
<EuiFieldSearch
data-test-subj="FilterSourcesInput"
value={filterValue}
onChange={handleFilterChange}
fullWidth={true}
placeholder={PLACEHOLDER}
/>
</EuiFormRow>
<EuiSpacer size="xxl" />
{showConfiguredSourcesList && (
<ConfiguredSourcesList isOrganization={isOrganization} sources={visibleConfiguredSources} />
)}
{isOrganization && <AvailableSourcesList sources={visibleAvailableSources} />}
</ContentSection>
) : (
<ContentSection>
<EuiFlexGroup justifyContent="center" alignItems="stretch">
<EuiFlexItem>
<EuiSpacer size="xl" />
<EuiPanel className="euiPanel euiPanel--inset">
<EuiSpacer size="s" />
<EuiSpacer size="xxl" />
<EuiEmptyPrompt
iconType={noSharedSourcesIcon}
title={<h2>No available sources</h2>}
body={
<p>
Sources will be available for search when an administrator adds them to this
organization.
</p>
}
return (
<>
<ViewContentHeader title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
{showConfiguredSourcesList || isOrganization ? (
<ContentSection>
<EuiSpacer />
<EuiFormRow>
<EuiFieldSearch
data-test-subj="FilterSourcesInput"
value={filterValue}
onChange={handleFilterChange}
fullWidth={true}
placeholder={PLACEHOLDER}
/>
</EuiFormRow>
<EuiSpacer size="xxl" />
{showConfiguredSourcesList && (
<ConfiguredSourcesList
isOrganization={isOrganization}
sources={visibleConfiguredSources}
/>
<EuiSpacer size="xxl" />
<EuiSpacer size="m" />
</EuiPanel>
<EuiSpacer size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
</ContentSection>
)}
{isOrganization && <AvailableSourcesList sources={visibleAvailableSources} />}
</ContentSection>
) : (
<ContentSection>
<EuiFlexGroup justifyContent="center" alignItems="stretch">
<EuiFlexItem>
<EuiSpacer size="xl" />
<EuiPanel className="euiPanel euiPanel--inset">
<EuiSpacer size="s" />
<EuiSpacer size="xxl" />
<EuiEmptyPrompt
iconType={noSharedSourcesIcon}
title={<h2>No available sources</h2>}
body={
<p>
Sources will be available for search when an administrator adds them to this
organization.
</p>
}
/>
<EuiSpacer size="xxl" />
<EuiSpacer size="m" />
</EuiPanel>
<EuiSpacer size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
</ContentSection>
)}
</>
);
};

0 comments on commit bce570c

Please sign in to comment.