Skip to content

Commit

Permalink
[App Search] Improve visual design of Promoted Documents panel (#115683)
Browse files Browse the repository at this point in the history
  • Loading branch information
@byronhulcher
byronhulcher authored Oct 20, 2021
1 parent 453d4bc commit d9f8013
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 114 deletions.
29 changes: 16 additions & 13 deletions ...blic/applications/app_search/components/curations/curation/documents/hidden_documents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,22 @@ export const HiddenDocuments: React.FC = () => {
isLoading={hiddenDocumentsLoading}
>
{hasDocuments ? (
documents.map((document, index) => (
<CurationResult
key={document.id}
result={convertToResultFormat(document)}
index={index}
actions={[
{
...SHOW_DOCUMENT_ACTION,
onClick: () => removeHiddenId(document.id),
},
]}
/>
))
<EuiFlexGroup direction="column" gutterSize="s">
{documents.map((document, index) => (
<EuiFlexItem key={index}>
<CurationResult
result={convertToResultFormat(document)}
index={index}
actions={[
{
...SHOW_DOCUMENT_ACTION,
onClick: () => removeHiddenId(document.id),
},
]}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
) : (
<EuiEmptyPrompt
titleSize="s"
Expand Down
47 changes: 25 additions & 22 deletions ...lic/applications/app_search/components/curations/curation/documents/organic_documents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';

import { useValues, useActions } from 'kea';

import { EuiLoadingContent, EuiEmptyPrompt } from '@elastic/eui';
import { EuiLoadingContent, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

Expand Down Expand Up @@ -46,27 +46,30 @@ export const OrganicDocuments: React.FC = () => {
}
>
{hasDocuments ? (
documents.map((document: Result, index) => (
<CurationResult
result={document}
index={index}
key={document.id.raw}
actions={
isAutomated
? []
: [
{
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(document.id.raw),
},
{
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(document.id.raw),
},
]
}
/>
))
<EuiFlexGroup direction="column" gutterSize="s">
{documents.map((document: Result, index) => (
<EuiFlexItem key={index}>
<CurationResult
result={document}
index={index}
actions={
isAutomated
? []
: [
{
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(document.id.raw),
},
{
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(document.id.raw),
},
]
}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
) : organicDocumentsLoading ? (
<EuiLoadingContent lines={5} />
) : (
Expand Down
7 changes: 7 additions & 0 deletions ...c/applications/app_search/components/curations/curation/documents/promoted_documents.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.promotedDocuments {
&--results {
border-radius: $euiSizeM;
border: $euiBorderWidthThick solid $euiColorPrimary;
background-color: tintOrShade($euiColorPrimary, 90%, 70%); // Copied from @elastit/eui/src/global_styling/variables/_panels.scss
}
}
66 changes: 37 additions & 29 deletions ...ic/applications/app_search/components/curations/curation/documents/promoted_documents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import { PROMOTED_DOCUMENTS_TITLE } from '../constants';
import { CurationLogic } from '../curation_logic';
import { AddResultButton, CurationResult, convertToResultFormat } from '../results';

import './promoted_documents.scss';

export const PromotedDocuments: React.FC = () => {
const { curation, isAutomated, promotedIds, promotedDocumentsLoading } = useValues(CurationLogic);
const documents = curation.promoted;
Expand Down Expand Up @@ -89,36 +91,42 @@ export const PromotedDocuments: React.FC = () => {
>
{hasDocuments ? (
<EuiDragDropContext onDragEnd={reorderPromotedIds}>
<EuiDroppable droppableId="PromotedDocuments" spacing="m">
{documents.map((document, index) => (
<EuiDraggable
index={index}
key={document.id}
draggableId={document.id}
customDragHandle
spacing="none"
isDragDisabled={isAutomated}
>
{(provided) => (
<CurationResult
key={document.id}
<EuiDroppable
droppableId="PromotedDocuments"
spacing="m"
className="promotedDocuments--results"
>
<EuiFlexGroup direction="column" gutterSize="s">
{documents.map((document, index) => (
<EuiFlexItem key={index}>
<EuiDraggable
index={index}
result={convertToResultFormat(document)}
actions={
isAutomated
? []
: [
{
...DEMOTE_DOCUMENT_ACTION,
onClick: () => removePromotedId(document.id),
},
]
}
dragHandleProps={provided.dragHandleProps}
/>
)}
</EuiDraggable>
))}
draggableId={document.id}
customDragHandle
spacing="none"
isDragDisabled={isAutomated}
>
{(provided) => (
<CurationResult
index={index}
result={convertToResultFormat(document)}
actions={
isAutomated
? []
: [
{
...DEMOTE_DOCUMENT_ACTION,
onClick: () => removePromotedId(document.id),
},
]
}
dragHandleProps={provided.dragHandleProps}
/>
)}
</EuiDraggable>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiDroppable>
</EuiDragDropContext>
) : (
Expand Down
67 changes: 36 additions & 31 deletions ...ublic/applications/app_search/components/curations/curation/results/add_result_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
EuiSpacer,
EuiFieldSearch,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';

Expand Down Expand Up @@ -76,38 +78,41 @@ export const AddResultFlyout: React.FC = () => {
<EuiSpacer />

{searchResults.length > 0 ? (
searchResults.map((result) => {
const id = result.id.raw;
const isPromoted = promotedIds.includes(id);
const isHidden = hiddenIds.includes(id);
<EuiFlexGroup direction="column" gutterSize="s">
{searchResults.map((result, index) => {
const id = result.id.raw;
const isPromoted = promotedIds.includes(id);
const isHidden = hiddenIds.includes(id);

return (
<CurationResult
key={id}
result={result}
actions={[
isHidden
? {
...SHOW_DOCUMENT_ACTION,
onClick: () => removeHiddenId(id),
}
: {
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(id),
},
isPromoted
? {
...DEMOTE_DOCUMENT_ACTION,
onClick: () => removePromotedId(id),
}
: {
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(id),
},
]}
/>
);
})
return (
<EuiFlexItem key={index}>
<CurationResult
result={result}
actions={[
isHidden
? {
...SHOW_DOCUMENT_ACTION,
onClick: () => removeHiddenId(id),
}
: {
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(id),
},
isPromoted
? {
...DEMOTE_DOCUMENT_ACTION,
onClick: () => removePromotedId(id),
}
: {
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(id),
},
]}
/>
</EuiFlexItem>
);
})}
</EuiFlexGroup>
) : (
<EuiEmptyPrompt
body={i18n.translate(
Expand Down
21 changes: 8 additions & 13 deletions .../public/applications/app_search/components/curations/curation/results/curation_result.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';

import { useValues } from 'kea';

import { EuiSpacer } from '@elastic/eui';

import { EngineLogic } from '../../../engine';
import { Result } from '../../../result';
import { Result as ResultType, ResultAction } from '../../../result/types';
Expand All @@ -30,16 +28,13 @@ export const CurationResult: React.FC<Props> = ({ actions, dragHandleProps, resu
} = useValues(EngineLogic);

return (
<>
<Result
result={result}
actions={actions}
isMetaEngine={isMetaEngine}
schemaForTypeHighlights={schema}
dragHandleProps={dragHandleProps}
resultPosition={typeof index === 'undefined' ? undefined : index + 1}
/>
<EuiSpacer size="m" />
</>
<Result
result={result}
actions={actions}
isMetaEngine={isMetaEngine}
schemaForTypeHighlights={schema}
dragHandleProps={dragHandleProps}
resultPosition={typeof index === 'undefined' ? undefined : index + 1}
/>
);
};
10 changes: 4 additions & 6 deletions ...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,23 @@ import {
EuiTitle,
EuiTitleProps,
} from '@elastic/eui';
import { _EuiPanelDivlike } from '@elastic/eui/src/components/panel/panel';

import { LoadingOverlay } from '../../../shared/loading';

import './data_panel.scss';

interface Props {
type Props = Omit<_EuiPanelDivlike, 'title'> & {
title: React.ReactElement; // e.g., h2 tag
titleSize?: EuiTitleProps['size'];
subtitle?: React.ReactNode;
iconType?: EuiIconProps['type'];
action?: React.ReactNode;
responsive?: boolean;
filled?: boolean;
hasBorder?: boolean;
isLoading?: boolean;
className?: string;
}
};

export const DataPanel: React.FC<Props> = ({
title,
Expand All @@ -46,7 +46,6 @@ export const DataPanel: React.FC<Props> = ({
action,
responsive = false,
filled,
hasBorder,
isLoading,
className,
children,
Expand All @@ -58,12 +57,11 @@ export const DataPanel: React.FC<Props> = ({

return (
<EuiPanel
{...props}
color={filled ? 'subdued' : 'plain'}
hasBorder={hasBorder}
className={classes}
hasShadow={false}
aria-busy={isLoading}
{...props}
>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={responsive}>
<EuiFlexItem>
Expand Down

0 comments on commit d9f8013

Please sign in to comment.