Design PR

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -0,0 +1 @@
+@import './graph_settings/index';

x-pack/legacy/plugins/graph/public/components/graph_settings/_index.scss

@@ -0,0 +1,2 @@
+@import './legacy_icon';
+@import './url_template_list';

x-pack/legacy/plugins/graph/public/components/graph_settings/_legacy_icon.scss

@@ -0,0 +1,7 @@
+.gphLegacyIcon {
+ width: $euiSizeS * 2;
+}
+
+.gphLegacyIcon--list {
+ margin-right: $euiSizeM;
+}

x-pack/legacy/plugins/graph/public/components/graph_settings/_url_template_list.scss

@@ -0,0 +1,17 @@
+.gphUrlTemplateList__accordion {
+ border-top: $euiBorderThin;
+ border-bottom: $euiBorderThin;
+
+ & + & {
+ // If there is another after it, shift up 1px to overlap borders
+ margin-top: -1px;
+ }
+
+ &-isOpen {
+ background-color: $euiPageBackgroundColor;
+ }
+}
+
+.gphUrlTemplateList__accordionbutton {
+ padding: $euiSizeM;
+}

x-pack/legacy/plugins/graph/public/components/graph_settings/blacklist_form.tsx

@@ -59,6 +59,9 @@ export function BlacklistForm({
  'aria-label': i18n.translate('xpack.graph.blacklist.removeButtonAriaLabel', {
  defaultMessage: 'Remove',
  }),
+ title: i18n.translate('xpack.graph.blacklist.removeButtonAriaLabel', {
+ defaultMessage: 'Remove',
+ }),
  color: 'danger',
  onClick: () => {
  unblacklistNode(node);
@@ -72,14 +75,16 @@ export function BlacklistForm({
  data-test-subj="graphUnblacklistAll"
  color="danger"
  iconType="trash"
+ size="s"
+ fill
  onClick={() => {
  blacklistedNodes.forEach(node => {
  unblacklistNode(node);
  });
  }}
  >
  {i18n.translate('xpack.graph.settings.blacklist.clearButtonLabel', {
- defaultMessage: 'Clear all',
+ defaultMessage: 'Remove all',
  })}
  </EuiButton>
  </>

x-pack/legacy/plugins/graph/public/components/graph_settings/url_template_form.tsx

@@ -6,15 +6,14 @@
 
 import React, { useState, useEffect } from 'react';
 import {
- EuiForm,
  EuiFormRow,
  EuiFieldText,
  EuiComboBox,
  EuiButton,
- EuiSpacer,
  EuiFlexGroup,
  EuiFlexItem,
  EuiButtonEmpty,
+ EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UrlTemplate } from '../../types';
@@ -114,7 +113,6 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
  }
  }}
  >
- <EuiSpacer size="s" />
  <EuiFormRow
  fullWidth
  label={i18n.translate('xpack.graph.settings.drillDowns.urlDescriptionInputLabel', {
@@ -134,68 +132,69 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
  )}
  />
  </EuiFormRow>
- <EuiForm>
- <EuiFormRow
-  fullWidth
- label={i18n.translate('xpack.graph.settings.drillDowns.urlInputLabel', {
-  defaultMessage: 'URL',
-  })}
- helpText={
- <>
- {autoformatUrl && (
+ <EuiFormRow
+ fullWidth
+ label={i18n.translate('xpack.graph.settings.drillDowns.urlInputLabel', {
+ defaultMessage: 'URL',
+ })}
+ helpText={
+ <>
+ {autoformatUrl && (
+ <p>
  <strong>
  {i18n.translate('xpack.graph.settings.drillDowns.kibanaUrlWarningText', {
  defaultMessage: 'Possible Kibana URL pasted, ',
  })}
- <button className="gphSettings__helpTextButton" onClick={convertUrl}>
- {i18n.translate(
- 'xpack.graph.settings.drillDowns.kibanaUrlWarningConvertOptionLinkText',
- { defaultMessage: 'convert it' }
- )}
- </button>
- <br />
+ <EuiLink onClick={convertUrl}>
+ <strong>
+ {i18n.translate(
+ 'xpack.graph.settings.drillDowns.kibanaUrlWarningConvertOptionLinkText',
+ { defaultMessage: 'convert it' }
+ )}
+ </strong>
+ </EuiLink>
  </strong>
- )}
- {i18n.translate('xpack.graph.settings.drillDowns.urlInputHelpText', {
- defaultMessage:
- 'Define template URLs using {gquery} where the selected vertex terms are inserted',
- values: { gquery: '{{gquery}}' },
- })}
- </>
- }
- onBlur={() => setTouched({ ...touched, url: true })}
+ </p>
+ )}
+ {i18n.translate('xpack.graph.settings.drillDowns.urlInputHelpText', {
+ defaultMessage:
+ 'Define template URLs using {gquery} where the selected vertex terms are inserted',
+ values: { gquery: '{{gquery}}' },
+ })}
+ </>
+ }
+ onBlur={() => setTouched({ ...touched, url: true })}
+ isInvalid={urlPlaceholderMissing || (touched.url && !currentTemplate.url)}
+ error={
+ urlPlaceholderMissing
+ ? [
+ i18n.translate('xpack.graph.settings.drillDowns.invalidUrlWarningText', {
+ defaultMessage: 'The URL must contain a {placeholder} string',
+ values: { placeholder: '{{gquery}}' },
+ }),
+ ]
+ : []
+ }
+ >
+ <EuiFieldText
+ fullWidth
+ placeholder="https://www.google.co.uk/#q={{gquery}}"
+ value={currentTemplate.url}
+ onChange={e => {
+ setValue('url', e.target.value);
+ setAutoformatUrl(false);
+ }}
+ onPaste={e => {
+ e.preventDefault();
+ const pastedUrl = e.clipboardData.getData('text/plain');
+ if (isKibanaUrl(pastedUrl)) {
+ setAutoformatUrl(true);
+ }
+ setValue('url', pastedUrl);
+ }}
  isInvalid={urlPlaceholderMissing || (touched.url && !currentTemplate.url)}
- error={
- urlPlaceholderMissing
- ? [
- i18n.translate('xpack.graph.settings.drillDowns.invalidUrlWarningText', {
- defaultMessage: 'The URL must contain a {placeholder} string',
- values: { placeholder: '{{gquery}}' },
- }),
- ]
- : []
- }
- >
- <EuiFieldText
- fullWidth
- placeholder="https://www.google.co.uk/#q={{gquery}}"
- value={currentTemplate.url}
- onChange={e => {
- setValue('url', e.target.value);
- setAutoformatUrl(false);
- }}
- onPaste={e => {
- e.preventDefault();
- const pastedUrl = e.clipboardData.getData('text/plain');
- if (isKibanaUrl(pastedUrl)) {
- setAutoformatUrl(true);
- }
- setValue('url', pastedUrl);
- }}
- isInvalid={urlPlaceholderMissing || (touched.url && !currentTemplate.url)}
- />
- </EuiFormRow>
- </EuiForm>
+ />
+ </EuiFormRow>
  <EuiFormRow
  fullWidth
  helpText={currentTemplate.encoder.description}
@@ -239,7 +238,7 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
  ))}
  </div>
  </EuiFormRow>
- <EuiFlexGroup justifyContent="flexEnd">
+ <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
  {isUpdateForm(props) && (
  <>
  <EuiFlexItem grow={null}>

x-pack/legacy/plugins/graph/public/components/graph_settings/url_template_list.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { EuiText, EuiAccordion, EuiSpacer, EuiIcon } from '@elastic/eui';
+import { EuiText, EuiAccordion, EuiSpacer, EuiIcon, EuiTextAlign, EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { GraphSettingsProps } from './graph_settings';
 import { UrlTemplateForm } from './url_template_form';
@@ -32,8 +32,14 @@ export function UrlTemplateList({
  <EuiAccordion
  id={getListKey(template)}
  buttonContent={template.description}
- className="gphSettingsAccordion"
- buttonClassName="gphSettingsAccordion__button"
+ // TODO: Change the icon below to the template.icon
+ extraAction={<EuiIcon type="alert" />}
+ className="gphUrlTemplateList__accordion"
+ buttonClassName="gphUrlTemplateList__accordionbutton"
+ onToggle={isOpen => {
+ /* TODO: Use this to set a classname .gphUrlTemplateList__accordion-isOpen for the background color change */
+ }}
+ paddingSize="m"
  >
  <UrlTemplateForm
  initialTemplate={template}
@@ -45,24 +51,34 @@ export function UrlTemplateList({
  }}
  />
  </EuiAccordion>
- <EuiSpacer />
  </Fragment>
  ))}
+
+ {/* TODO: Only show the following accordion when the user clicked "Add template" and auto-expand */}
  <EuiAccordion
  id="accordion-new"
  buttonContent={i18n.translate('xpack.graph.templates.addLabel', {
  defaultMessage: 'New template',
  })}
- className="gphSettingsAccordion"
- buttonClassName="gphSettingsAccordion__button"
- extraAction={<EuiIcon type="plusInCircleFilled" color="primary" />}
+ className="gphUrlTemplateList__accordion"
+ buttonClassName="gphUrlTemplateList__accordionbutton"
+ paddingSize="m"
  >
  <UrlTemplateForm
  onSubmit={newTemplate => {
  saveUrlTemplate(-1, newTemplate);
  }}
  />
  </EuiAccordion>
+
+ <EuiSpacer />
+
+ {/* TODO: Hook this up */}
+ <EuiTextAlign textAlign="center">
+ <EuiButton size="s" fill iconType="plusInCircle">
+ Add template
+ </EuiButton>
+ </EuiTextAlign>
  </>
  );
 }

x-pack/legacy/plugins/graph/public/index.scss

@@ -12,5 +12,4 @@
 
 @import './main';
 @import './angular/templates/index';
-
-@import './components/graph_settings/graph_settings';
+@import './components/index';