Skip to content

Commit

Permalink
Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@kertal
kertal committed Jul 17, 2019
1 parent 7e667ca commit baa5057
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 113 deletions.
1 change: 1 addition & 0 deletions src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.kbnDocTableHeader__move,
.kbnDocTableHeader__sortChange {
opacity: 0;
margin-left: 3px;

th:hover &,
&:focus {
Expand Down
63 changes: 35 additions & 28 deletions ...cy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,10 @@
*/
import React from 'react';
import { isFunction, get } from 'lodash';
import { IndexPattern } from 'ui/index_patterns';
// @ts-ignore
import { IndexPattern } from 'src/legacy/core_plugins/data/public';
import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string';

import { TableHeaderColumn } from './table_header_column';
import { TableHeaderTimeColumn } from './table_header_time_column';
import { SortOrder } from './helpers';

interface Props {
Expand Down Expand Up @@ -56,37 +54,46 @@ export function TableHeader({
onChangeSortOrder(colName, newDirection);
}

const columnData = columns.map((name, idx) => {
return {
name,
displayName: isShortDots ? shortenDottedString(name) : name,
isSortable:
isFunction(onChangeSortOrder) &&
get(indexPattern, ['fields', 'byName', name, 'sortable'], false),
isRemoveable: isFunction(onRemoveColumn) && (name !== '_source' || columns.length > 1),
colLeftIdx: idx - 1 < 0 ? -1 : idx - 1,
colRightIdx: idx + 1 >= columns.length ? -1 : idx + 1,
};
});

const displayedColumns =
timeFieldName && !hideTimeColumn
? [
{
name: timeFieldName,
displayName: 'Time',
isSortable: true,
isRemoveable: false,
colLeftIdx: -1,
colRightIdx: -1,
},
...columnData,
]
: columnData;

return (
<tr>
<td style={{ width: '1%' }}></td>
{timeFieldName && !hideTimeColumn && (
<TableHeaderTimeColumn
sortOrder={sortOrder}
onCycleSortOrder={cycleSortOrder}
timeFieldName={timeFieldName}
/>
)}
{columns.map((name: string, idx: number) => {
const canRemoveColumn =
isFunction(onRemoveColumn) && (name !== '_source' || columns.length > 1);
const isSortable =
isFunction(onChangeSortOrder) &&
get(indexPattern, ['fields', 'byName', name, 'sortable'], false);

const colLeftIdx = idx - 1 < 0 ? -1 : idx - 1;
const colRightIdx = idx + 1 >= columns.length ? -1 : idx + 1;
const displayName = isShortDots ? shortenDottedString(name) : name;

{displayedColumns.map(col => {
return (
<TableHeaderColumn
key={name}
name={name}
displayName={displayName}
key={col.name}
sortOrder={sortOrder}
onCycleSortOrder={isSortable ? () => cycleSortOrder(name) : undefined}
onMoveColumnLeft={colLeftIdx >= 0 ? () => onMoveColumn(name, colLeftIdx) : undefined}
onMoveColumnRight={colRightIdx >= 0 ? () => onMoveColumn(name, colRightIdx) : undefined}
onRemoveColumn={canRemoveColumn ? () => onRemoveColumn(name) : undefined}
{...col}
onMoveColumn={onMoveColumn}
onRemoveColumn={onRemoveColumn}
onChangeSortOrder={cycleSortOrder}
/>
);
})}
Expand Down
165 changes: 80 additions & 85 deletions ..._plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
* under the License.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import _ from 'lodash';
import { i18n } from '@kbn/i18n';
import { EuiToolTip } from '@elastic/eui';
Expand All @@ -26,103 +25,99 @@ import { getAriaSortLabel, getSortHeaderClass } from './helpers';
import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string';

interface Props {
name: string;
colLeftIdx: number; // idx of the column to the left, -1 if moving is not possible
colRightIdx: number; // idx of the column to the right, -1 if moving is not possible
displayName: string;
sortOrder: [string, string];
onMoveColumnRight?: (name: string) => void;
onMoveColumnLeft?: (name: string) => void;
isRemoveable: boolean;
isSortable: boolean;
name: string;
onChangeSortOrder?: (name: string) => void;
onMoveColumn?: (name: string, idx: number) => void;
onRemoveColumn?: (name: string) => void;
onCycleSortOrder?: (name: string) => void;
sortOrder: [string, string];
}

export function TableHeaderColumn({
name,
colLeftIdx,
colRightIdx,
displayName,
sortOrder,
isRemoveable,
isSortable,
name,
onChangeSortOrder,
onMoveColumn,
onRemoveColumn,
onMoveColumnLeft,
onMoveColumnRight,
onCycleSortOrder,
sortOrder,
}: Props) {
const buttons = [
{
active: isSortable,
ariaLabel: getAriaSortLabel(name, sortOrder),
className: getSortHeaderClass(name, sortOrder),
onClick: () => onChangeSortOrder && onChangeSortOrder(name),
testSubject: `docTableHeaderFieldSort_${name}`,
tooltip: i18n.translate('kbn.docTable.tableHeader.sortByColumnTooltip', {
defaultMessage: 'Sort by {columnName}',
values: { columnName: displayName },
}),
},
{
active: isRemoveable,
ariaLabel: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonAriaLabel', {
defaultMessage: 'Remove {columnName} column',
values: { columnName: name },
}),
className: 'fa fa-remove kbnDocTableHeader__move',
onClick: () => onRemoveColumn && onRemoveColumn(name),
testSubject: `docTableRemoveHeader-${name}`,
tooltip: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonTooltip', {
defaultMessage: 'Remove Column',
values: { columnName: displayName },
}),
},
{
active: colLeftIdx >= 0,
ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonAriaLabel', {
defaultMessage: 'Move {columnName} column to the left',
values: { columnName: name },
}),
className: 'fa fa-angle-double-left kbnDocTableHeader__move',
onClick: () => onMoveColumn && onMoveColumn(name, colLeftIdx),
tooltip: i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonTooltip', {
defaultMessage: 'Move column to the left',
}),
},
{
active: colRightIdx >= 0,
ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonAriaLabel', {
defaultMessage: 'Move {columnName} column to the right',
values: { columnName: name },
}),
className: 'fa fa-angle-double-right kbnDocTableHeader__move',
onClick: () => onMoveColumn && onMoveColumn(name, colRightIdx),
tooltip: i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonTooltip', {
defaultMessage: 'Move column to the right',
}),
},
];

return (
<th key={name} data-test-subj="docTableHeaderField">
<span data-test-subj={`docTableHeader-${name}`}>
{displayName}
{onCycleSortOrder && (
<EuiToolTip
content={i18n.translate('kbn.docTable.tableHeader.sortByColumnTooltip', {
defaultMessage: 'Sort by {columnName}',
values: { columnName: displayName },
})}
>
<button
data-test-subj={`docTableHeaderFieldSort_${name}`}
id={`docTableHeaderFieldSort${name}`}
aria-label={getAriaSortLabel(name, sortOrder)}
className={getSortHeaderClass(name, sortOrder)}
onClick={() => onCycleSortOrder && onCycleSortOrder(name)}
></button>
</EuiToolTip>
)}
{buttons
.filter(button => button.active)
.map(button => (
<EuiToolTip content={button.tooltip}>
<button
aria-label={button.ariaLabel}
className={button.className}
data-test-subj={button.testSubject}
onClick={button.onClick}
/>
</EuiToolTip>
))}
</span>
{onRemoveColumn && (
<EuiToolTip
content={
<FormattedMessage
id="kbn.docTable.tableHeader.removeColumnButtonTooltip"
defaultMessage="Remove column"
/>
}
>
<button
className="fa fa-remove kbnDocTableHeader__move"
onClick={() => onRemoveColumn(name)}
aria-label={i18n.translate('kbn.docTable.tableHeader.removeColumnButtonAriaLabel', {
defaultMessage: 'Remove {columnName} column',
values: { columnName: name },
})}
data-test-subj="docTableRemoveHeader-{{name}}"
></button>
</EuiToolTip>
)}
{onMoveColumnLeft && (
<EuiToolTip
content={
<FormattedMessage
id="kbn.docTable.tableHeader.moveColumnLeftButtonTooltip"
defaultMessage="Move column to the left"
/>
}
>
<button
className="fa fa-angle-double-left kbnDocTableHeader__move"
onClick={() => onMoveColumnLeft(name)}
aria-label={i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonAriaLabel', {
defaultMessage: 'Move {columnName} column to the left',
values: { columnName: name },
})}
></button>
</EuiToolTip>
)}
{onMoveColumnRight && (
<EuiToolTip
content={
<FormattedMessage
id="kbn.docTable.tableHeader.moveColumnRightButtonTooltip"
defaultMessage="Move column to the right"
/>
}
>
<button
className="fa fa-angle-double-right kbnDocTableHeader__move"
onClick={() => onMoveColumnRight(name)}
aria-label={i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonAriaLabel', {
defaultMessage: 'Move {columnName} column to the right',
values: { columnName: name },
})}
></button>
</EuiToolTip>
)}
</th>
);
}

0 comments on commit baa5057

Please sign in to comment.