[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>
+  );
+};