[Timelion] Remove kui usage (#80287) (#80819)

* [Timelion] Remove kui usage

* Fix custom checkbox

* Add tim prefix to the new classes

* Fix functional test

* PR fixes

* Fix type

* PR comments

* Remove the last fontawesome usages

* fix timelion links

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Stratoula Kalafateli 2020-10-16 16:30:54 +03:00 committed by GitHub
parent 7120827f80
commit 1b8c092fdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 217 additions and 67 deletions

View file

@ -15,7 +15,69 @@
margin: $euiSizeM;
}
.timApp__title {
display: flex;
align-items: center;
padding: $euiSizeM $euiSizeS;
font-size: $euiSize;
font-weight: $euiFontWeightBold;
border-bottom: 1px solid $euiColorLightShade;
flex-grow: 1;
background-color: $euiColorEmptyShade;
}
.timApp__stats {
font-weight: $euiFontWeightRegular;
color: $euiColorMediumShade;
}
.timApp__form {
display: flex;
align-items: flex-start;
margin-top: $euiSize;
margin-bottom: $euiSize;
}
.timApp__expression {
display: flex;
flex: 1;
margin-right: $euiSizeS;
}
.timApp__button {
margin-top: $euiSizeS;
padding: $euiSizeXS $euiSizeM;
font-size: $euiSize;
border: none;
border-radius: $euiSizeXS;
color: $euiColorEmptyShade;
background-color: $euiColorPrimary;
}
.timApp__button--secondary {
margin-top: $euiSizeS;
padding: $euiSizeXS $euiSizeM;
font-size: $euiSize;
border: 1px solid $euiColorPrimary;
border-radius: $euiSizeXS;
color: $euiColorPrimary;
width: 100%;
}
.timApp__sectionTitle {
margin-bottom: $euiSizeM;
font-size: 18px;
color: $euiColorDarkestShade;
}
.timApp__helpText {
margin-bottom: $euiSize;
font-size: 14px;
color: $euiColorDarkShade;
}
.timApp__label {
font-size: $euiSize;
line-height: 1.5;
font-weight: $euiFontWeightBold;
}

View file

@ -34,3 +34,51 @@ select.form-control {
.fullWidth {
width: 100%;
}
.timDropdownWarning {
margin-bottom: $euiSize;
padding: $euiSizeXS $euiSizeS;
color: $euiColorDarkestShade;
border-left: solid 2px $euiColorDanger;
font-size: $euiSizeM;
}
.timFormCheckbox {
display: flex;
align-items: center;
line-height: 1.5;
position: relative;
}
.timFormCheckbox__input {
appearance: none;
background-color: $euiColorLightestShade;
border: 1px solid $euiColorLightShade;
border-radius: $euiSizeXS;
width: $euiSize;
height: $euiSize;
font-size: $euiSizeM;
transition: background-color .1s linear;
}
.timFormCheckbox__input:checked {
border-color: $euiColorPrimary;
background-color: $euiColorPrimary;
}
.timFormCheckbox__icon {
position: absolute;
top: 0;
left: 2px;
}
.timFormTextarea {
padding: $euiSizeXS $euiSizeM;
font-size: $euiSize;
line-height: 1.5;
color: $euiColorDarkestShade;
background-color: $euiFormBackgroundColor;
border: 1px solid $euiColorLightShade;
border-radius: $euiSizeXS;
transition: border-color .1s linear;
}

View file

@ -27,6 +27,42 @@
saved-object-finder {
.timSearchBar {
display: flex;
align-items: center;
}
.timSearchBar__section {
position: relative;
margin-right: $euiSize;
flex: 1;
}
.timSearchBar__icon {
position: absolute;
top: $euiSizeS;
left: $euiSizeS;
font-size: $euiSize;
color: $euiColorDarkShade;
}
.timSearchBar__input {
padding: $euiSizeS $euiSizeM;
color: $euiColorDarkestShade;
background-color: $euiColorEmptyShade;
border: 1px solid $euiColorLightShade;
border-radius: $euiSizeXS;
transition: border-color .1s linear;
padding-left: $euiSizeXL;
width: 100%;
font-size: $euiSize;
}
.timSearchBar__pagecount {
font-size: $euiSize;
color: $euiColorDarkShade;
}
.list-sort-button {
border-top-left-radius: 0;
border-top-right-radius: 0;
@ -34,6 +70,7 @@ saved-object-finder {
padding: $euiSizeS $euiSize;
font-weight: $euiFontWeightRegular;
background-color: $euiColorLightestShade;
margin-top: $euiSize;
}
.li-striped {

View file

@ -33,7 +33,6 @@
text-align: center;
width: $euiSizeL;
height: $euiSizeL;
line-height: $euiSizeL;
border-radius: $euiSizeL / 2;
border: $euiBorderThin;
background-color: $euiColorLightestShade;

View file

@ -25,7 +25,7 @@
tooltip-append-to-body="1"
aria-label="{{ ::'timelion.cells.actions.removeAriaLabel' | i18n: { defaultMessage: 'Remove chart' } }}"
>
<span class="fa fa-remove"></span>
<icon type="'cross'"></icon>
</button>
<button
class="timCell__action"
@ -35,7 +35,7 @@
aria-label="{{ ::'timelion.cells.actions.reorderAriaLabel' | i18n: { defaultMessage: 'Drag to reorder' } }}"
tabindex="-1"
>
<span class="fa fa-arrows"></span>
<icon type="'grab'"></icon>
</button>
<button
class="timCell__action"
@ -44,7 +44,7 @@
tooltip-append-to-body="1"
aria-label="{{ ::'timelion.cells.actions.fullscreenAriaLabel' | i18n: { defaultMessage: 'Full screen chart' } }}"
>
<span class="fa fa-expand"></span>
<icon type="'expandMini'"></icon>
</button>
</div>
</div>

View file

@ -8,7 +8,7 @@
tooltip-append-to-body="1"
aria-label="{{ ::'timelion.fullscreen.exitAriaLabel' | i18n: { defaultMessage: 'Exit full screen' } }}"
>
<span class="fa fa-compress"></span>
<icon type="'minimize'"></icon>
</button>
</div>
</div>

View file

@ -1,13 +1,11 @@
<form
role="form"
class="kuiVerticalRhythm"
>
<div class="kuiBar">
<div class="kuiBarSection">
<div class="kuiSearchInput fullWidth">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<div class="timSearchBar">
<div class="timSearchBar__section">
<icon class="timSearchBar__icon" type="'search'"></icon>
<input
class="kuiSearchInput__input"
class="timSearchBar__input"
input-focus
disable-input-focus="disableAutoFocus"
ng-model="filter"
@ -18,18 +16,17 @@
autocomplete="off"
data-test-subj="savedObjectFinderSearchInput"
>
</div>
</div>
<div class="kuiBarSection">
<p class="kuiText kuiSubduedText"
<div>
<p class="timSearchBar__pagecount"
i18n-id="timelion.savedObjectFinder.pageItemsFromHitCountDescription"
i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
></p>
<div class="kuiButtonGroup">
<div>
<button
class="kuiButton kuiButton--primary"
class="timApp__button"
ng-if="onAddNew"
ng-click="onAddNew()"
data-test-subj="addNewSavedObjectLink"
@ -40,7 +37,7 @@
></button>
<button
class="kuiButton kuiButton--secondary"
class="timApp__button--secondary"
ng-if="!useLocalManagement"
ng-click="finder.manageObjects(finder.properties.name)"
i18n-id="timelion.savedObjectFinder.manageItemsButtonLabel"
@ -56,7 +53,6 @@
<paginate
list="finder.hits"
per-page="20"
class="kuiVerticalRhythm"
>
<button
class="paginate-heading list-group-item list-sort-button"
@ -71,10 +67,8 @@
i18n-id="timelion.savedObjectFinder.sortByButtonLabel"
i18n-default-message="Name"
></span>
<span
class="fa"
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
>
<icon type="'sortUp'" ng-if="finder.isAscending"></icon>
<icon type="'sortDown'" ng-if="!finder.isAscending"></icon>
<span class="euiScreenReaderOnly"
ng-if="finder.isAscending"
i18n-id="timelion.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
@ -98,8 +92,8 @@
<a ng-href="{{finder.makeUrl(hit)}}"
ng-blur="finder.hitBlur($event)"
ng-click="finder.preventClick($event)">
<span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
<div class="kuiIcon fa-flask ng-scope" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></div>
<icon aria-hidden="true" class="finder-type" ng-if="hit.icon" ng-class="hit.icon"></icon>
<icon type="'beaker'" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></icon>
<span>{{hit.title}}</span>
<p ng-if="hit.description" ng-bind="hit.description"></p>
</a>

View file

@ -168,7 +168,6 @@ export function initSavedObjectFinderDirective(app, savedSheetLoader, uiSettings
switch (keyMap[$event.keyCode]) {
case 'enter':
if (self.hitCount !== 1) return;
const hit = self.hits[0];
if (!hit) return;

View file

@ -1,24 +1,25 @@
<div ng-hide="!savedObject.id || savedObject.isSaving">
<div
ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave"
class="kuiLocalDropdownWarning kuiVerticalRhythmSmall"
class="timDropdownWarning"
i18n-id="timelion.savedObjects.howToSaveAsNewDescription"
i18n-default-message="In previous versions of Kibana, changing the name of a {savedObjectName} would make a copy with the new name. Use the 'Save as a new {savedObjectName}' checkbox to do this now."
i18n-values="{ savedObjectName: savedObject.getDisplayName() }"
i18n-description="'Save as a new {savedObjectName}' refers to timelion.savedObjects.saveAsNewLabel and should be the same text."
></div>
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
<label class="timFormCheckbox">
<input
class="kuiCheckBox"
class="timFormCheckbox__input"
type="checkbox"
data-test-subj="saveAsNewCheckbox"
ng-model="savedObject.copyOnSave"
ng-checked="savedObject.copyOnSave"
>
<icon type="'check'" class="timFormCheckbox__icon" color="'white'" size="'s'"></icon>
<span
class="kuiCheckBoxLabel__text"
style="margin-left: 8px;"
i18n-id="timelion.savedObjects.saveAsNewLabel"
i18n-default-message="Save as a new {savedObjectName}"
i18n-values="{ savedObjectName: savedObject.getDisplayName() }"

View file

@ -12,7 +12,7 @@
data-expression-input
role="textbox"
rows="{{ rows }}"
class="timExpressionInput kuiTextArea fullWidth"
class="timExpressionInput timFormTextarea fullWidth"
placeholder="{{ ::'timelion.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {esQuery}', values: { esQuery: '.es(*)' } } }}"
ng-model="sheet"
ng-focus="onFocusInput()"

View file

@ -15,6 +15,14 @@
overflow-y: auto;
}
.timHelp__links {
color: $euiColorPrimary;
&:hover {
text-decoration: underline;
}
}
/**
* 1. Override bootstrap .table styles.
*/

View file

@ -37,7 +37,7 @@
<button
ng-click="opts.dontShowHelp()"
class="kuiButton kuiButton--hollow"
class="timHelp__links"
>
{{translations.dontShowHelpButtonLabel}}
</button>
@ -45,7 +45,7 @@
<button
ng-click="setPage(page+1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.nextButtonLabel}}
</button>
@ -82,7 +82,7 @@
<button
ng-click="setPage(page-1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.previousButtonLabel}}
</button>
@ -100,7 +100,7 @@
<button
ng-click="recheckElasticsearch()"
class="kuiButton kuiButton--primary"
class="timApp__button"
i18n-id="timelion.help.configuration.notValid.validateButtonLabel"
i18n-default-message="Validate Config"
></button>
@ -222,7 +222,7 @@
<button
ng-click="setPage(page-1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.previousButtonLabel}}
</button>
@ -230,7 +230,7 @@
<button
ng-click="setPage(page+1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.nextButtonLabel}}
</button>
@ -371,7 +371,7 @@
<button
ng-click="setPage(page-1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.previousButtonLabel}}
</button>
@ -379,7 +379,7 @@
<button
ng-click="setPage(page+1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.nextButtonLabel}}
</button>
@ -484,7 +484,7 @@
<button
ng-click="setPage(page-1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.previousButtonLabel}}
</button>
@ -492,7 +492,7 @@
<button
ng-click="setPage(page+1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.nextButtonLabel}}
</button>
@ -587,7 +587,7 @@
<button
ng-click="setPage(page-1)"
class="kuiButton kuiButton--primary"
class="timApp__button"
>
{{translations.previousButtonLabel}}
</button>
@ -596,7 +596,7 @@
<button
ng-click="opts.dontShowHelp()"
class="kuiButton kuiButton--hollow"
class="timHelp__links"
>
{{translations.dontShowHelpButtonLabel}}
</button>
@ -606,7 +606,7 @@
</div>
<div ng-show="page === 0">
<h2
class="kuiLocalDropdownTitle"
class="timApp__sectionTitle"
i18n-id="timelion.help.mainPageTitle"
i18n-default-message="Help"
></h2>
@ -618,7 +618,7 @@
</timelion-help-tabs>
<div ng-show="activeTab == 'funcref'" class="list-group-item list-group-item--noBorder">
<div class="kuiLocalDropdownHelpText">
<div class="timApp__helpText">
<span
i18n-id="timelion.help.mainPage.functionReference.gettingStartedText"
i18n-default-message="Click any function for more information. Just getting started?"
@ -626,7 +626,7 @@
<a
i18n-id="timelion.help.mainPage.functionReference.welcomePageLinkText"
i18n-default-message="Check out the tutorial"
class="kuiLink"
style="color: #006BB4;"
ng-click="setPage(1)"
kbn-accessible-click
></a>.

View file

@ -4,6 +4,12 @@ timelion-interval {
.timInterval__input {
width: $euiSizeXL * 2;
padding: $euiSizeXS $euiSizeM;
color: $euiColorDarkestShade;
border: 1px solid $euiColorLightShade;
border-radius: $euiSizeXS;
transition: border-color .1s linear;
font-size: 14px;
}
.timInterval__input--compact {

View file

@ -1,7 +1,7 @@
<input
input-focus
aria-label="{{ ::'timelion.intervals.customIntervalAriaLabel' | i18n: { defaultMessage: 'Custom interval' } }}"
class="kuiTextInput timInterval__input"
class="timInterval__input"
ng-show="interval === 'other'"
ng-class="{ 'timInterval__input--compact': interval === 'other' }"
ng-model="otherInterval"

View file

@ -1,5 +1,5 @@
<timelion-app class="timApp app-container">
<span class="kuiLocalTitle">
<span class="timApp__title">
<span class="timApp__stats" ng-show="stats">
<span
i18n-id="timelion.topNavMenu.statsDescription"
@ -41,9 +41,9 @@
<form
role="form"
ng-submit="updateChart()"
class="kuiFieldGroup kuiFieldGroup--alignTop kuiVerticalRhythm"
class="timApp__form"
>
<div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
<div class="timApp__expression">
<timelion-expression-input
sheet="expression"
rows="1"
@ -52,9 +52,8 @@
></timelion-expression-input>
</div>
<div class="kuiFieldGroupSection">
<div>
<timelion-interval
class="kuiVerticalRhythmSmall"
model="state.interval"
change-interval="changeInterval"
></timelion-interval>
@ -62,14 +61,14 @@
<button
type="submit"
aria-label="{{ ::'timelion.search.submitAriaLabel' | i18n: { defaultMessage: 'Search' } }}"
class="kuiButton kuiButton--primary fullWidth kuiVerticalRhythmSmall"
class="timApp__button fullWidth"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-play"></span>
<icon type="'play'"></icon>
</button>
</div>
</form>
<div class="kuiVerticalRhythm">
<div>
<timelion-fullscreen
ng-show="transient.fullscreen"
transient="transient"

View file

@ -1,6 +1,6 @@
<form role="form" ng-submit="fetch()">
<h2
class="kuiLocalDropdownTitle"
class="timApp__sectionTitle"
i18n-id="timelion.topNavMenu.openSheetTitle"
i18n-default-message="Open Sheet"
></h2>

View file

@ -19,7 +19,7 @@
<form role="form" class="container-fluid" ng-submit="opts.saveSheet()">
<label
for="savedSheet"
class="kuiLabel kuiVerticalRhythmSmall"
class="timApp__label"
i18n-id="timelion.topNavMenu.save.saveEntireSheetLabel"
i18n-default-message="Save sheet as"
></label>
@ -28,20 +28,21 @@
id="savedSheet"
ng-model="opts.savedSheet.title"
input-focus="select"
class="form-control kuiVerticalRhythmSmall"
class="form-control"
style="margin-bottom: 4px;"
placeholder="{{ ::'timelion.topNavMenu.save.saveEntireSheet.inputPlaceholder' | i18n: { defaultMessage: 'Name this sheet...' } }}"
aria-label="{{ ::'timelion.topNavMenu.save.saveEntireSheet.inputAriaLabel' | i18n: { defaultMessage: 'Name' } }}"
>
<saved-object-save-as-check-box
class="kuiVerticalRhythmSmall"
saved-object="opts.savedSheet"
style="margin-bottom: 4px;"
></saved-object-save-as-check-box>
<button
ng-disabled="!opts.savedSheet.title"
type="submit"
class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
class="timApp__button"
i18n-id="timelion.topNavMenu.save.saveEntireSheet.submitButtonLabel"
i18n-default-message="Save"
data-test-subj="timelionFinishSaveButton"
@ -96,7 +97,7 @@
<button
ng-disabled="!panelTitle"
type="submit"
class="kuiButton kuiButton--primary"
class="timApp__button"
i18n-id="timelion.topNavMenu.save.saveAsDashboardPanel.submitButtonLabel"
i18n-default-message="Save"
></button>

View file

@ -1,6 +1,6 @@
<form role="form">
<h2
class="kuiLocalDropdownTitle"
class="timApp__sectionTitle"
i18n-id="timelion.topNavMenu.sheetOptionsTitle"
i18n-default-message="Sheet options"
></h2>

View file

@ -21,7 +21,6 @@ import { BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import {
CoreSetup,
CoreStart,
Plugin,
PluginInitializerContext,
DEFAULT_APP_CATEGORIES,
@ -31,7 +30,7 @@ import {
AppNavLinkStatus,
} from '../../../core/public';
import { Panel } from './panels/panel';
import { initAngularBootstrap, KibanaLegacyStart } from '../../kibana_legacy/public';
import { initAngularBootstrap } from '../../kibana_legacy/public';
import { createKbnUrlTracker } from '../../kibana_utils/public';
import { DataPublicPluginStart, esFilters, DataPublicPluginSetup } from '../../data/public';
import { NavigationPublicPluginStart } from '../../navigation/public';
@ -53,7 +52,6 @@ export interface TimelionPluginStartDependencies {
visualizations: VisualizationsStart;
visTypeTimelion: VisTypeTimelionPluginStart;
savedObjects: SavedObjectsStart;
kibanaLegacy: KibanaLegacyStart;
}
/** @internal */
@ -142,9 +140,7 @@ export class TimelionPlugin
});
}
public start(core: CoreStart, { kibanaLegacy }: { kibanaLegacy: KibanaLegacyStart }) {
kibanaLegacy.loadFontAwesome();
}
public start() {}
public stop(): void {
if (this.stopUrlTracking) {