Skip to content

Commit

Permalink
Reactify visualize listing table (#14227)
Browse files Browse the repository at this point in the history 
* Reactify visualize listing table

* refactor toolbar => toolBar

* use prompt prop to also cover loading and didn't match search logic.

* Use default alignment instead of ternary

* Add keys to array elements where missing

* Add align property to KuiTableHeaderCell

* Fix issue with filter not showing up in search tool bar

* onCheckChanged => onSelectionChanged

* pagerComponent => pager, actionComponent => actions

* use singular verbiage when only 1 item is selected

* exit early per style guide

* fix lint errors

* rename columns => header

* Refactor KuiTableHeaderCell into KuiListingTable

isChecked => isSelected

contents => content

refactor KuiTableRowCell internally

* fix lint errors

* areAllRowsChecked => areAllRowsSelected

* improve itemSelectedCount logic in KuiListingTableToolBarFooter

* React.Component => Component

* make header data a variable, not a function

* Only consider all rows selected if rows exist and they are all selected, not if there are no rows.

* Adding a few KuiListingTable tests

* Give one column sort attributes in examples page
  • Loading branch information
@stacey-gammon
stacey-gammon authored Oct 12, 2017
1 parent 2a14502 commit c3222ad
Show file tree
Hide file tree
Showing 28 changed files with 1,400 additions and 822 deletions.
27 changes: 27 additions & 0 deletions src/core_plugins/kibana/public/visualize/listing/no_visualizations_prompt.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';

import {
KuiEmptyTablePrompt,
KuiEmptyTablePromptPanel,
KuiLinkButton,
KuiButtonIcon,
} from 'ui_framework/components';

export function NoVisualizationsPrompt() {
return (
<KuiEmptyTablePromptPanel>
<KuiEmptyTablePrompt
actions={
<KuiLinkButton
href="#/visualize/new"
buttonType="primary"
icon={<KuiButtonIcon type="create"/>}
>
Create a visualization
</KuiLinkButton>
}
message="Looks like you don't have any visualizations. Let's create some!"
/>
</KuiEmptyTablePromptPanel>
);
}
218 changes: 4 additions & 214 deletions src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,220 +26,10 @@
</div>
</div>
</div>
<!-- ControlledTable -->
<div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm">
<!-- ToolBar -->
<div class="kuiToolBar">
<tool-bar-search-box
class="kuiToolBarSection"
filter="listingController.filter"
on-filter="listingController.onFilter"
data-test-subj="visualizationSearchFilter"
></tool-bar-search-box>

<div class="kuiToolBarSection">
<!-- Bulk delete button -->
<button
class="kuiButton kuiButton--danger"
aria-label="Delete selected objects"
ng-if="listingController.getSelectedItemsCount() > 0"
ng-click="listingController.deleteSelectedItems()"
tooltip="Delete selected visualizations"
tooltip-append-to-body="true"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
</button>
<visualize-listing-table
fetch-items="listingController.fetchItems"
delete-selected-items="listingController.deleteSelectedItems"
></visualize-listing-table>

<!-- Create visualization button -->
<a
class="kuiButton kuiButton--primary"
href="#/visualize/new"
aria-label="Create new visualization"
ng-if="listingController.getSelectedItemsCount() === 0"
tooltip="Create new visualization"
tooltip-append-to-body="true"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
</a>
</div>

<div class="kuiToolBarSection">
<!-- Pagination -->
<tool-bar-pager-text
start-item="listingController.pager.startItem"
end-item="listingController.pager.endItem"
total-items="listingController.pager.totalItems"
></tool-bar-pager-text>
<tool-bar-pager-buttons
has-previous-page="listingController.pager.hasPreviousPage"
has-next-page="listingController.pager.hasNextPage"
on-page-next="listingController.onPageNext"
on-page-previous="listingController.onPagePrevious"
></tool-bar-pager-buttons>
</div>
</div>

<!-- TableInfo -->
<div
class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
ng-if="!listingController.items.length && listingController.filter"
>
<div class="kuiTableInfo">
No visualizations matched your search.
</div>
</div>

<!-- EmptyTablePrompt -->
<div
class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
>
<div class="kuiEmptyTablePrompt">
<div class="kuiEmptyTablePrompt__message">
Looks like you don&rsquo;t have any visualizations. Let&rsquo;s create some!
</div>

<div class="kuiEmptyTablePrompt__actions">
<a
class="kuiButton kuiButton--primary kuiButton--iconText"
href="#/visualize/new"
>
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-plus"></span>
<span>Create a visualization</span>
</span>
</a>
</div>
</div>
</div>

<!-- Table -->
<table class="kuiTable" ng-if="listingController.items.length">
<thead>
<tr>
<th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
<div class="kuiTableHeaderCell__liner">
<input
type="checkbox"
class="kuiCheckBox"
ng-checked="listingController.areAllItemsChecked()"
ng-click="listingController.toggleAll()"
aria-label="{{listingController.areAllItemsChecked() ? 'Deselect all rows' : 'Select all rows'}}"
>
</div>
</th>

<th
class="kuiTableHeaderCell"
>
<button
class="kuiTableHeaderCellButton"
ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'title'}"
ng-click="listingController.sortOn('title')"
aria-label="{{listingController.isAscending('title') ? 'Sort name descending' : 'Sort name ascending'}}"
>
<span class="kuiTableHeaderCell__liner">
Name
<span
class="kuiTableSortIcon kuiIcon"
ng-class="listingController.isAscending('title') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
></span>
</span>
</button>
</th>

<th
class="kuiTableHeaderCell"
>
<button
class="kuiTableHeaderCellButton"
ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'type'}"
ng-click="listingController.sortOn('type')"
aria-label="{{listingController.isAscending('type') ? 'Sort type descending' : 'Sort type ascending'}}"
>
<span class="kuiTableHeaderCell__liner">
Type
<span
class="kuiTableSortIcon kuiIcon"
ng-class="listingController.isAscending('type') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
></span>
</span>
</button>
</th>
</tr>
</thead>

<tbody>
<tr
ng-repeat="item in listingController.pageOfItems track by item.id"
class="kuiTableRow"
>
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<div class="kuiTableRowCell__liner">
<input
type="checkbox"
class="kuiCheckBox"
ng-click="listingController.toggleItem(item)"
ng-checked="listingController.isItemChecked(item)"
aria-label="{{listingController.isItemChecked(item) ? 'Deselect row' : 'Select row'}}"
>
</div>
</td>

<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
{{ item.title }}
</a>
</div>
</td>

<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<span class="kuiStatusText">
<img
class="kuiStatusText__icon kuiIcon"
ng-if="item.type.image"
aria-hidden="true"
ng-src="{{ item.type.image }}"
/>

<!-- If there's no image, default to an icon, for BWC. -->
<span
class="kuiStatusText__icon kuiIcon {{ item.icon }}"
ng-if="!item.type.image"
></span>

{{ item.type.title }}
</span>
</div>
</td>
</tr>
</tbody>
</table>

<!-- ToolBarFooter -->
<div class="kuiToolBarFooter">
<div class="kuiToolBarFooterSection">
<div class="kuiToolBarText" ng-hide="listingController.getSelectedItemsCount() === 0">
{{ listingController.getSelectedItemsCount() }} selected
</div>
</div>

<div class="kuiToolBarFooterSection">
<!-- Pagination -->
<tool-bar-pager-text
start-item="listingController.pager.startItem"
end-item="listingController.pager.endItem"
total-items="listingController.pager.totalItems"
></tool-bar-pager-text>
<tool-bar-pager-buttons
has-previous-page="listingController.pager.hasPreviousPage"
has-next-page="listingController.pager.hasNextPage"
on-page-next="listingController.onPageNext"
on-page-previous="listingController.onPagePrevious"
></tool-bar-pager-buttons>
</div>
</div>
</div>
</div>
Loading

0 comments on commit c3222ad

Please sign in to comment.