Replace deprecated EUI icons in files owned by @elastic/kibana-cases

src/platform/packages/shared/kbn-cases-components/src/tooltip/icon_with_count.test.tsx

@@ -14,13 +14,13 @@ import { IconWithCount } from './icon_with_count';
 
 describe('IconWithCount', () => {
   it('renders component correctly', () => {
-    const res = render(<IconWithCount count={5} icon={'editorComment'} />);
+    const res = render(<IconWithCount count={5} icon={'comment'} />);
 
     expect(res.getByTestId('comment-count-icon')).toBeInTheDocument();
   });
 
   it('renders count correctly', () => {
-    const res = render(<IconWithCount count={100} icon={'editorComment'} />);
+    const res = render(<IconWithCount count={100} icon={'comment'} />);
 
     expect(res.getByText(100)).toBeInTheDocument();
   });

src/platform/packages/shared/kbn-cases-components/src/tooltip/tooltip_content.tsx

@@ -30,7 +30,7 @@ const CaseTooltipContentComponent = React.memo<CaseTooltipContentProps>(
           <EuiFlexItem grow={false}>
             <Status status={status} />
           </EuiFlexItem>
-          <IconWithCount count={totalComments} icon={'editorComment'} />
+          <IconWithCount count={totalComments} icon={'comment'} />
         </EuiFlexGroup>
         <EuiFlexGroup direction="column" gutterSize="xs">
           <EuiFlexItem>

x-pack/platform/plugins/shared/cases/public/components/actions/assignees/no_selected_assignees.tsx

@@ -21,7 +21,7 @@ const NoSelectedAssigneesComponent: React.FC<{ totalSelectedCases: number }> = (
       data-test-subj="case-user-profiles-assignees-no-selected-assignees"
     >
       <EuiFlexItem grow={false}>
-        <EuiIcon type="userAvatar" size="xl" />
+        <EuiIcon type="user" size="xl" />
         <EuiSpacer size="xs" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

x-pack/platform/plugins/shared/cases/public/components/actions/assignees/use_assignees_action.test.tsx

@@ -43,7 +43,7 @@ describe('useAssigneesAction', () => {
         "disabled": false,
         "icon": <EuiIcon
           size="m"
-          type="userAvatar"
+          type="user"
         />,
         "key": "cases-bulk-action-assignees",
         "name": "Edit assignees",

x-pack/platform/plugins/shared/cases/public/components/actions/assignees/use_assignees_action.tsx

@@ -33,7 +33,7 @@ export const useAssigneesAction = ({ onAction, onActionSuccess, isDisabled }: Us
       onClick: () => openFlyout(selectedCases),
       disabled: isActionDisabled,
       'data-test-subj': 'cases-bulk-action-assignees',
-      icon: <EuiIcon type="userAvatar" size="m" />,
+      icon: <EuiIcon type="user" size="m" />,
       key: 'cases-bulk-action-assignees',
     };
   };

x-pack/platform/plugins/shared/cases/public/components/actions/copy_id/use_copy_id_action.test.tsx

@@ -45,7 +45,7 @@ describe('useCopyIDAction', () => {
         "data-test-subj": "cases-action-copy-id",
         "icon": <EuiIcon
           size="m"
-          type="copyClipboard"
+          type="copy"
         />,
         "key": "cases-action-copy-id",
         "name": <EuiTextColor>

x-pack/platform/plugins/shared/cases/public/components/actions/copy_id/use_copy_id_action.tsx

@@ -26,7 +26,7 @@ export const useCopyIDAction = ({ onActionSuccess }: UseCopyIDActionProps) => {
         });
       },
       'data-test-subj': 'cases-action-copy-id',
-      icon: <EuiIcon type="copyClipboard" size="m" />,
+      icon: <EuiIcon type="copy" size="m" />,
       key: 'cases-action-copy-id',
     };
   };

x-pack/platform/plugins/shared/cases/public/components/add_comment/index.tsx

@@ -244,7 +244,7 @@ export const AddComment = React.memo(
                         <EuiButton
                           data-test-subj="submit-comment"
                           fill
-                          iconType="plusInCircle"
+                          iconType="plusCircle"
                           isDisabled={isDisabled}
                           isLoading={isLoading}
                           onClick={onSubmit}

x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.tsx

@@ -116,7 +116,7 @@ const AssigneesFilterPopoverComponent: React.FC<AssigneesFilterPopoverProps> = (
       button={
         <EuiFilterButton
           data-test-subj="options-filter-popover-button-assignees"
-          iconType="arrowDown"
+          iconType="chevronSingleDown"
           onClick={togglePopover}
           isLoading={isLoadingData}
           isSelected={isPopoverOpen}

x-pack/platform/plugins/shared/cases/public/components/all_cases/columns_popover.tsx

@@ -193,7 +193,7 @@ export const ColumnsPopover: React.FC<Props> = ({
                             aria-label={i18n.DRAG_HANDLE}
                             grow={false}
                           >
-                            <EuiIcon type="grab" color="subdued" />
+                            <EuiIcon type="dragVertical" color="subdued" />
                           </EuiPanel>
                         </EuiFlexItem>
                       )}

x-pack/platform/plugins/shared/cases/public/components/all_cases/multi_select_filter.tsx

@@ -133,7 +133,7 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
             ${buttonCss}
           `}
           data-test-subj={`options-filter-popover-button-${id}`}
-          iconType={buttonIconType || 'arrowDown'}
+          iconType={buttonIconType || 'chevronSingleDown'}
           onClick={toggleIsPopoverOpen}
           isSelected={isPopoverOpen}
           numFilters={showActiveOptionsNumber ? options.length : undefined}

x-pack/platform/plugins/shared/cases/public/components/all_cases/nav_buttons.tsx

@@ -66,7 +66,7 @@ export const NavButtons: FunctionComponent<Props> = ({ actionsErrors }) => {
               fill
               onClick={navigateToCreateCaseClick}
               href={getCreateCaseUrl()}
-              iconType="plusInCircle"
+              iconType="plusCircle"
               data-test-subj="createNewCaseBtn"
             >
               {i18n.CREATE_CASE_TITLE}

x-pack/platform/plugins/shared/cases/public/components/all_cases/table.tsx

@@ -111,7 +111,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
                   size="s"
                   onClick={navigateToCreateCaseClick}
                   href={getCreateCaseUrl()}
-                  iconType="plusInCircle"
+                  iconType="plusCircle"
                   data-test-subj="cases-table-add-case"
                 >
                   {i18n.CREATE_CASE_TITLE}

x-pack/platform/plugins/shared/cases/public/components/all_cases/table_filters.tsx

@@ -126,7 +126,7 @@ const CasesTableFiltersComponent = ({
           <EuiButton
             fill
             onClick={handleOnCreateCasePressed}
-            iconType="plusInCircle"
+            iconType="plusCircle"
             data-test-subj="cases-table-add-case-filter-bar"
           >
             {i18n.CREATE_CASE_TITLE}

x-pack/platform/plugins/shared/cases/public/components/all_cases/use_actions.tsx

@@ -190,7 +190,7 @@ const ActionColumnComponent: React.FC<{ theCase: CaseUI; disableActions: boolean
         button={
           <EuiButtonIcon
             onClick={tooglePopover}
-            iconType="boxesHorizontal"
+            iconType="boxesVertical"
             aria-label={i18n.ACTIONS_BUTTON_ARIA_LABEL(theCase.title)}
             color="text"
             key={`case-action-popover-button-${theCase.id}`}

x-pack/platform/plugins/shared/cases/public/components/all_cases/use_bulk_actions.test.tsx

@@ -86,7 +86,7 @@ describe('useBulkActions', () => {
                   "disabled": false,
                   "icon": <EuiIcon
                     size="m"
-                    type="userAvatar"
+                    type="user"
                   />,
                   "key": "cases-bulk-action-assignees",
                   "name": "Edit assignees",

x-pack/platform/plugins/shared/cases/public/components/all_cases/utility_bar.tsx

@@ -188,7 +188,7 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
                               onClick={togglePopover}
                               size="xs"
                               iconSide="right"
-                              iconType="arrowDown"
+                              iconType="chevronSingleDown"
                               flush="left"
                               data-test-subj="case-table-bulk-actions-link-icon"
                             >

x-pack/platform/plugins/shared/cases/public/components/app/use_readonly_header.ts

@@ -19,13 +19,13 @@ export function useReadonlyHeader() {
   const { permissions } = useCasesContext();
   const chrome = useKibana().services.chrome;
 
-  // if the user is read only then display the glasses badge in the global navigation header
+  // if the user is read only then display the readOnly badge in the global navigation header
   const setBadge = useCallback(() => {
     if (isReadOnlyPermissions(permissions)) {
       chrome.setBadge({
         text: i18n.READ_ONLY_BADGE_TEXT,
         tooltip: i18n.READ_ONLY_BADGE_TOOLTIP,
-        iconType: 'glasses',
+        iconType: 'readOnly',
       });
     }
   }, [chrome, permissions]);

x-pack/platform/plugins/shared/cases/public/components/attachments/alert/show_alert.tsx

@@ -41,7 +41,7 @@ const UserActionShowAlertComponent = ({
         aria-label={i18n.SHOW_ALERT_TOOLTIP}
         data-test-subj={`comment-action-show-alert-${id}`}
         onClick={onClick}
-        iconType="arrowRight"
+        iconType="chevronSingleRight"
         id={`${id}-show-alert`}
       />
     </EuiToolTip>

x-pack/platform/plugins/shared/cases/public/components/attachments/event/show_event.tsx

@@ -41,7 +41,7 @@ const UserActionShowEventComponent = ({
         aria-label={i18n.SHOW_EVENT_TOOLTIP}
         data-test-subj={`comment-action-show-event-${id}`}
         onClick={onClick}
-        iconType="arrowRight"
+        iconType="chevronSingleRight"
         id={`${id}-show-event`}
       />
     </EuiToolTip>

x-pack/platform/plugins/shared/cases/public/components/attachments/file/add_file.tsx

@@ -111,7 +111,7 @@ const AddFileComponent: React.FC<AddFileProps> = ({ caseId }) => {
     <EuiFlexItem grow={false}>
       <EuiButton
         data-test-subj="cases-files-add"
-        iconType="plusInCircle"
+        iconType="plusCircle"
         isDisabled={isLoading}
         isLoading={isLoading}
         onClick={showModal}

x-pack/platform/plugins/shared/cases/public/components/attachments/file/file_actions_popover_button.tsx

@@ -69,7 +69,7 @@ export const FileActionsPopoverButton: React.FC<{ caseId: string; theFile: FileJ
           theFile.hash?.md5
             ? {
                 name: 'MD5',
-                icon: 'copyClipboard',
+                icon: 'copy',
                 onClick: () => {
                   if (theFile.hash?.md5) {
                     navigator.clipboard.writeText(theFile.hash.md5).then(() => {
@@ -84,7 +84,7 @@ export const FileActionsPopoverButton: React.FC<{ caseId: string; theFile: FileJ
           theFile.hash?.sha1
             ? {
                 name: 'SHA1',
-                icon: 'copyClipboard',
+                icon: 'copy',
                 onClick: () => {
                   if (theFile.hash?.sha1) {
                     navigator.clipboard.writeText(theFile.hash.sha1).then(() => {
@@ -99,7 +99,7 @@ export const FileActionsPopoverButton: React.FC<{ caseId: string; theFile: FileJ
           theFile.hash?.sha256
             ? {
                 name: 'SHA256',
-                icon: 'copyClipboard',
+                icon: 'copy',
                 onClick: () => {
                   if (theFile.hash?.sha256) {
                     navigator.clipboard.writeText(theFile.hash.sha256).then(() => {
@@ -118,7 +118,7 @@ export const FileActionsPopoverButton: React.FC<{ caseId: string; theFile: FileJ
     if (fileHashesAvailable) {
       mainPanelItems.push({
         name: i18n.COPY_FILE_HASH,
-        icon: 'copyClipboard',
+        icon: 'copy',
         panel: 1,
         'data-test-subj': 'cases-files-copy-hash-button',
       });
@@ -158,7 +158,7 @@ export const FileActionsPopoverButton: React.FC<{ caseId: string; theFile: FileJ
         button={
           <EuiButtonIcon
             onClick={tooglePopover}
-            iconType="boxesHorizontal"
+            iconType="boxesVertical"
             aria-label={i18n.ACTIONS}
             color="text"
             key={`cases-files-actions-popover-button-${theFile.id}`}

x-pack/platform/plugins/shared/cases/public/components/case_action_bar/actions.test.tsx

@@ -54,7 +54,7 @@ describe('CaseView actions', () => {
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
   });
 
-  it('clicking copyClipboard icon copies case id', () => {
+  it('clicking copy icon copies case id', () => {
     const originalClipboard = global.window.navigator.clipboard;
 
     Object.defineProperty(navigator, 'clipboard', {
@@ -74,7 +74,7 @@ describe('CaseView actions', () => {
       .find('button[data-test-subj="property-actions-case-ellipses"]')
       .first()
       .simulate('click');
-    wrapper.find('button[data-test-subj="property-actions-case-copyClipboard"]').simulate('click');
+    wrapper.find('button[data-test-subj="property-actions-case-copy"]').simulate('click');
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(basicCase.id);
 
@@ -96,9 +96,7 @@ describe('CaseView actions', () => {
       .first()
       .simulate('click');
     expect(wrapper.find('[data-test-subj="property-actions-case-trash"]').exists()).toBeFalsy();
-    expect(
-      wrapper.find('[data-test-subj="property-actions-case-copyClipboard"]').exists()
-    ).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="property-actions-case-copy"]').exists()).toBeTruthy();
   });
 
   it('toggle delete modal and confirm', async () => {
@@ -145,7 +143,7 @@ describe('CaseView actions', () => {
       .first()
       .simulate('click');
     expect(
-      wrapper.find('[data-test-subj="property-actions-case-popout"]').first().prop('aria-label')
+      wrapper.find('[data-test-subj="property-actions-case-external"]').first().prop('aria-label')
     ).toEqual(i18n.VIEW_INCIDENT(basicPush.externalTitle));
   });
 });

x-pack/platform/plugins/shared/cases/public/components/case_action_bar/actions.tsx

@@ -43,7 +43,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({ caseData, currentExternal
     () => [
       {
         type: AttachmentActionType.BUTTON as const,
-        iconType: 'copyClipboard',
+        iconType: 'copy',
         label: i18n.COPY_ID_ACTION_LABEL,
         onClick: () => {
           navigator.clipboard.writeText(caseData.id);
@@ -54,7 +54,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({ caseData, currentExternal
         ? [
             {
               type: AttachmentActionType.BUTTON as const,
-              iconType: 'popout',
+              iconType: 'external',
               label: i18n.VIEW_INCIDENT(currentExternalIncident?.externalTitle ?? ''),
               onClick: () => window.open(currentExternalIncident?.externalUrl, '_blank'),
             },

x-pack/platform/plugins/shared/cases/public/components/case_action_bar/index.test.tsx

@@ -157,7 +157,7 @@ describe('CaseActionBar', () => {
     await userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
     expect(screen.queryByText('Delete case')).not.toBeInTheDocument();
     expect(screen.queryByTestId('property-actions-case-trash')).not.toBeInTheDocument();
-    expect(screen.getByTestId('property-actions-case-copyClipboard')).toBeInTheDocument();
+    expect(screen.getByTestId('property-actions-case-copy')).toBeInTheDocument();
   });
 
   it('should show the the delete item in the menu when the user does have delete privileges', async () => {
@@ -183,7 +183,7 @@ describe('CaseActionBar', () => {
     await userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
 
     await waitFor(() => {
-      expect(screen.getByTestId('property-actions-case-popout')).toBeInTheDocument();
+      expect(screen.getByTestId('property-actions-case-external')).toBeInTheDocument();
     });
   });
 
@@ -192,6 +192,6 @@ describe('CaseActionBar', () => {
 
     await userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
 
-    expect(screen.queryByTestId('property-actions-case-popout')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('property-actions-case-external')).not.toBeInTheDocument();
   });
 });

x-pack/platform/plugins/shared/cases/public/components/case_view/components/user_list.tsx

@@ -61,7 +61,7 @@ const renderUsers = (
         <EuiButtonIcon
           data-test-subj="user-list-email-button"
           onClick={handleSendEmail.bind(null, userInfo.user?.email)}
-          iconType="email"
+          iconType="mail"
           aria-label={i18n.SEND_EMAIL_ARIA(
             userInfo.user?.full_name ? userInfo.user?.full_name : userInfo.user?.username ?? ''
           )}

x-pack/platform/plugins/shared/cases/public/components/configure_cases/connectors_dropdown.test.tsx

@@ -55,7 +55,7 @@ describe('ConnectorsDropdown', () => {
               <EuiIcon
                 css="unknown styles"
                 size="m"
-                type="minusInCircle"
+                type="minusCircle"
               />
             </EuiFlexItem>
             <EuiFlexItem>

x-pack/platform/plugins/shared/cases/public/components/configure_cases/connectors_dropdown.tsx

@@ -51,7 +51,7 @@ const noConnectorOption = {
             margin-right: 13px;
             margin-bottom: 0 !important;
           `}
-          type="minusInCircle"
+          type="minusCircle"
           size={ICON_SIZE}
         />
       </EuiFlexItem>

x-pack/platform/plugins/shared/cases/public/components/create/submit_button.tsx

@@ -23,7 +23,7 @@ const SubmitCaseButtonComponent: React.FC<SubmitCaseButtonComponentProps> = ({ i
       tour-step="create-case-submit"
       data-test-subj="create-case-submit"
       fill
-      iconType="plusInCircle"
+      iconType="plusCircle"
       isDisabled={isSubmitting}
       isLoading={isSubmitting}
       onClick={submit}

x-pack/platform/plugins/shared/cases/public/components/custom_fields/custom_fields_list/index.tsx

@@ -96,7 +96,7 @@ const CustomFieldsListComponent: React.FC<Props> = (props) => {
                         <EuiButtonIcon
                           data-test-subj={`${customField.key}-custom-field-delete`}
                           aria-label={`${customField.key}-custom-field-delete`}
-                          iconType="minusInCircle"
+                          iconType="minusCircle"
                           color="danger"
                           onClick={() => setSelectedItem(customField)}
                         />

x-pack/platform/plugins/shared/cases/public/components/custom_fields/index.tsx

@@ -96,7 +96,7 @@ const CustomFieldsComponent: React.FC<Props> = ({
                 isDisabled={disabled || error}
                 size="s"
                 onClick={onAddCustomField}
-                iconType="plusInCircle"
+                iconType="plusCircle"
                 data-test-subj="add-custom-field"
               >
                 {i18n.ADD_CUSTOM_FIELD}

x-pack/platform/plugins/shared/cases/public/components/edit_connector/push_button.tsx

@@ -32,7 +32,7 @@ const PushButtonComponent: React.FC<PushButtonProps> = ({
   const button = (
     <EuiButtonEmpty
       data-test-subj="push-to-external-service"
-      iconType="importAction"
+      iconType="download"
       onClick={pushToService}
       disabled={disabled}
       isLoading={isLoading}