[Enterprise Search] Migrate util and components from ent-search

x-pack/plugins/enterprise_search/public/applications/shared/truncate/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { truncate, truncateBeginning } from './truncate';
+export { TruncatedContent } from './truncated_content';

x-pack/plugins/enterprise_search/public/applications/shared/truncate/truncate.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { truncate, truncateBeginning, TruncatedContent } from './';
+
+const content = 'foobarbaz';
+
+describe('TableHeader', () => {
+  it('renders with no truncation', () => {
+    const wrapper = shallow(<TruncatedContent length={4} content="foo" />);
+
+    expect(wrapper.find('span.truncated-content')).toHaveLength(0);
+    expect(wrapper.text()).toEqual('foo');
+  });
+
+  it('renders with truncation at the end', () => {
+    const wrapper = shallow(<TruncatedContent tooltipType="title" length={4} content={content} />);
+    const element = wrapper.find('span.truncated-content');
+
+    expect(element).toHaveLength(1);
+    expect(element.prop('title')).toEqual(content);
+    expect(wrapper.text()).toEqual('foob…');
+    expect(wrapper.find('span.truncated-content__tooltip')).toHaveLength(0);
+  });
+
+  it('renders with truncation at the beginning', () => {
+    const wrapper = shallow(
+      <TruncatedContent tooltipType="title" beginning length={4} content={content} />
+    );
+
+    expect(wrapper.find('span.truncated-content')).toHaveLength(1);
+    expect(wrapper.text()).toEqual('…rbaz');
+  });
+
+  it('renders with inline tooltip', () => {
+    const wrapper = shallow(<TruncatedContent beginning length={4} content={content} />);
+
+    expect(wrapper.find('span.truncated-content').prop('title')).toEqual('');
+    expect(wrapper.find('span.truncated-content__tooltip')).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/truncate/truncate.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export function truncate(text: string, length: number) {
+  return `${text.substring(0, length)}…`;
+}
+
+export function truncateBeginning(text: string, length: number) {
+  return `…${text.substring(text.length - length)}`;
+}

x-pack/plugins/enterprise_search/public/applications/shared/truncate/truncated_content.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { truncate, truncateBeginning } from './';
+
+interface ITruncatedContentProps {
+  content: string;
+  length: number;
+  beginning?: boolean;
+  tooltipType?: 'inline' | 'title';
+}
+
+export const TruncatedContent: React.FC<ITruncatedContentProps> = ({
+  content,
+  length,
+  beginning = false,
+  tooltipType = 'inline',
+}) => {
+  if (content.length <= length) return <>{content}</>;
+
+  const inline = tooltipType === 'inline';
+  return (
+    <span className="truncated-content" title={!inline ? content : ''}>
+      {beginning ? truncateBeginning(content, length) : truncate(content, length)}
+      {inline && <span className="truncated-content__tooltip">{content}</span>}
+    </span>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/shared/use_did_update_effect/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { useDidUpdateEffect } from './use_did_update_effect';

x-pack/plugins/enterprise_search/public/applications/shared/use_did_update_effect/use_did_update_effect.test.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { mount } from 'enzyme';
+
+import { EuiLink } from '@elastic/eui';
+
+import { useDidUpdateEffect } from './use_did_update_effect';
+
+const fn = jest.fn();
+
+const TestHook = ({ value }: { value: number }) => {
+  const [inputValue, setValue] = useState(value);
+  useDidUpdateEffect(fn, [inputValue]);
+  return <EuiLink onClick={() => setValue(2)} />;
+};
+
+const wrapper = mount(<TestHook value={1} />);
+
+describe('useDidUpdateEffect', () => {
+  it('should not fire function when value unchanged', () => {
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('should fire function when value changed', () => {
+    wrapper.find(EuiLink).simulate('click');
+    expect(fn).toHaveBeenCalled();
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/use_did_update_effect/use_did_update_effect.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Sometimes we don't want to fire the initial useEffect call.
+ * This custom Hook only fires after the intial render has completed.
+ */
+import { useEffect, useRef } from 'react';
+
+type TInput = string | number | object | Function | boolean | null | undefined;
+
+export const useDidUpdateEffect = (fn: Function, inputs: TInput[]) => {
+  const didMountRef = useRef(false);
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      fn();
+    } else {
+      didMountRef.current = true;
+    }
+  }, inputs);
+};