Refactoring

src/plugins/charts/public/static/components/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { RangeOption } from './range';
+export { SwitchOption } from './switch';

src/plugins/charts/public/static/components/range.tsx

@@ -0,0 +1,85 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import { EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface RangeOptionProps<ParamName extends string> {
+  label: string;
+  max: number;
+  min: number;
+  paramName: ParamName;
+  showInput?: boolean;
+  showLabels?: boolean;
+  showValue?: boolean;
+  step?: number;
+  value: '' | number;
+  setValue: (paramName: ParamName, value: number) => void;
+}
+
+function RangeOption<ParamName extends string>({
+  label,
+  max,
+  min,
+  showInput,
+  showLabels,
+  showValue = true,
+  step,
+  paramName,
+  value,
+  setValue,
+}: RangeOptionProps<ParamName>) {
+  const [stateValue, setStateValue] = useState(value);
+  const [isValidState, setIsValidState] = useState(true);
+
+  const error = i18n.translate('charts.controls.rangeErrorMessage', {
+    defaultMessage: 'Values must be on or between {min} and {max}',
+    values: { min, max },
+  });
+
+  const onChangeHandler: EuiRangeProps['onChange'] = (event, isValid) => {
+    const { valueAsNumber } = event.target as HTMLInputElement; // since we don't show ticks on EuiRange, the target will definitely be HTMLInputElement type, so we can cast it directly.
+
+    setStateValue(valueAsNumber);
+    setIsValidState(isValid);
+
+    if (isValid) {
+      setValue(paramName, valueAsNumber);
+    }
+  };
+  return (
+    <EuiFormRow label={label} fullWidth={true} isInvalid={!isValidState} error={error} compressed>
+      <EuiRange
+        compressed
+        fullWidth
+        max={max}
+        min={min}
+        showInput={showInput}
+        showLabels={showLabels}
+        showValue={showValue}
+        step={step}
+        value={stateValue}
+        onChange={onChangeHandler}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { RangeOption };

src/plugins/charts/public/static/components/switch.tsx

@@ -0,0 +1,59 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
+
+interface SwitchOptionProps<ParamName extends string> {
+  'data-test-subj'?: string;
+  label?: string;
+  tooltip?: string;
+  disabled?: boolean;
+  value?: boolean;
+  paramName: ParamName;
+  setValue: (paramName: ParamName, value: boolean) => void;
+}
+
+function SwitchOption<ParamName extends string>({
+  'data-test-subj': dataTestSubj,
+  tooltip,
+  label,
+  disabled,
+  paramName,
+  value = false,
+  setValue,
+}: SwitchOptionProps<ParamName>) {
+  return (
+    <EuiFormRow fullWidth={true} compressed={true}>
+      <EuiToolTip content={tooltip} delay="long" position="right">
+        <EuiSwitch
+          compressed={true}
+          label={label}
+          checked={value}
+          disabled={disabled}
+          data-test-subj={dataTestSubj}
+          onChange={ev => setValue(paramName, ev.target.checked)}
+        />
+      </EuiToolTip>
+    </EuiFormRow>
+  );
+}
+
+export { SwitchOption };

src/plugins/charts/public/static/index.ts

@@ -18,3 +18,4 @@
  */
 
 export * from './color_maps';
+export * from './components';

src/plugins/vis_type_markdown/public/index.scss

@@ -1,5 +1,3 @@
-@import 'src/legacy/ui/public/styles/styling_constants';
-
 // Prefix all styles with "mkd" to avoid conflicts.
 // Examples
 //   mkdChart

src/plugins/vis_type_markdown/public/markdown_fn.test.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// eslint-disable-next-line
 import { functionWrapper } from '../../expressions/common/expression_functions/specs/tests/utils';
 import { createMarkdownVisFn } from './markdown_fn';
 

src/plugins/vis_type_markdown/public/plugin.ts

@@ -24,6 +24,8 @@ import { VisualizationsSetup } from '../../visualizations/public';
 import { markdownVisDefinition } from './markdown_vis';
 import { createMarkdownVisFn } from './markdown_fn';
 
+import './index.scss';
+
 /** @internal */
 export interface MarkdownPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;

src/plugins/vis_type_markdown/public/settings_options.tsx

@@ -22,13 +22,13 @@ import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-// import { RangeOption, SwitchOption } from '../../../legacy/core_plugins/vis_type_vislib/public';
+import { RangeOption, SwitchOption } from '../../charts/public';
 import { MarkdownVisParams } from './types';
 
 function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {
   return (
     <EuiPanel paddingSize="s">
-      {/* <RangeOption
+      <RangeOption
         label={i18n.translate('visTypeMarkdown.params.fontSizeLabel', {
           defaultMessage: 'Base font size in points',
         })}
@@ -47,7 +47,7 @@ function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
         paramName="openLinksInNewTab"
         value={stateParams.openLinksInNewTab}
         setValue={setValue}
-      /> */}
+      />
     </EuiPanel>
   );
 }