column selector i18n

snide · snide · commit a98779a0f265 · 2019-09-04T16:07:41.000-07:00
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
@@ -1,8 +1,14 @@
-import React, { Fragment, FunctionComponent, useState } from 'react';
+import React, {
+  Fragment,
+  FunctionComponent,
+  useState,
+  ReactChild,
+} from 'react';
 import classNames from 'classnames';
 import { EuiDataGridColumn } from './data_grid_types';
 // @ts-ignore-next-line
 import { EuiPopover, EuiPopoverFooter } from '../popover';
+import { EuiI18n } from '../i18n';
 // @ts-ignore-next-line
 import { EuiButtonEmpty } from '../button';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -63,16 +69,25 @@ export const useColumnSelector = (
       panelPaddingSize="s"
       panelClassName="euiDataGridColumnSelectorPopover"
       button={
-        <EuiButtonEmpty
-          size="xs"
-          iconType="eyeClosed"
-          color="text"
-          className={controlBtnClasses}
-          onClick={() => setIsOpen(!isOpen)}>
-          {numberOfHiddenFields > 0
-            ? `${numberOfHiddenFields} hidden fields`
-            : 'Hide fields'}
-        </EuiButtonEmpty>
+        <EuiI18n
+          tokens={[
+            'euiColumnSelector.button',
+            'euiColumnSelector.buttonActive',
+          ]}
+          defaults={['Full screen', 'Exit full screen']}>
+          {([button, buttonActive]: ReactChild[]) => (
+            <EuiButtonEmpty
+              size="xs"
+              iconType="eyeClosed"
+              color="text"
+              className={controlBtnClasses}
+              onClick={() => setIsOpen(!isOpen)}>
+              {numberOfHiddenFields > 0
+                ? `${numberOfHiddenFields} ${buttonActive}`
+                : button}
+            </EuiButtonEmpty>
+          )}
+        </EuiI18n>
       }>
       <EuiDragDropContext onDragEnd={onDragEnd}>
         <EuiDroppable
@@ -127,15 +142,18 @@ export const useColumnSelector = (
               size="xs"
               flush="left"
               onClick={() => setVisibleColumns(sortedColumns)}>
-              Show all
+              <EuiI18n
+                token="euiColumnSelector.selectAll"
+                default="Select all"
+              />
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiButtonEmpty
               size="xs"
               flush="right"
               onClick={() => setVisibleColumns([])}>
-              Hide all
+              <EuiI18n token="euiColumnSelector.hideAll" default="hide all" />
             </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
