fix(deps): update dependency @heroicons/react to v2 (#2970)

* fix(deps): update dependency @heroicons/react to v2

* fix: update imports and fix icon name changes for heroicons

* fix: also update MiniStatusBadge to use new check icon

* fix: update last place with old import

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: sct <ryan@sct.dev>

src/components/Layout/LanguagePicker/index.tsx

@@ -3,7 +3,7 @@ import { availableLanguages } from '@app/context/LanguageContext';
 import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
 import { Transition } from '@headlessui/react';
-import { TranslateIcon } from '@heroicons/react/solid';
+import { LanguageIcon } from '@heroicons/react/24/solid';
 import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -28,7 +28,7 @@ const LanguagePicker = () => {
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
-          <TranslateIcon className="h-6 w-6" />
+          <LanguageIcon className="h-6 w-6" />
         </button>
       </div>
       <Transition

src/components/Layout/Notifications/index.tsx

@@ -1,4 +1,4 @@
-import { BellIcon } from '@heroicons/react/outline';
+import { BellIcon } from '@heroicons/react/24/outline';
 
 const Notifications = () => {
   return (

src/components/Layout/SearchInput/index.tsx

@@ -1,6 +1,6 @@
 import useSearchInput from '@app/hooks/useSearchInput';
-import { XCircleIcon } from '@heroicons/react/outline';
-import { SearchIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -18,7 +18,7 @@ const SearchInput = () => {
         </label>
         <div className="relative flex w-full items-center text-white focus-within:text-gray-200">
           <div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
-            <SearchIcon className="h-5 w-5" />
+            <MagnifyingGlassIcon className="h-5 w-5" />
           </div>
           <input
             id="search_field"

src/components/Layout/Sidebar/index.tsx

@@ -5,11 +5,11 @@ import { Transition } from '@headlessui/react';
 import {
   ClockIcon,
   CogIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   SparklesIcon,
   UsersIcon,
-  XIcon,
-} from '@heroicons/react/outline';
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
@@ -56,7 +56,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     href: '/issues',
     messagesKey: 'issues',
     svgIcon: (
-      <ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
+      <ExclamationTriangleIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
     ),
     activeRegExp: /^\/issues/,
     requiredPermission: [
@@ -126,7 +126,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                       aria-label="Close sidebar"
                       onClick={() => setClosed()}
                     >
-                      <XIcon className="h-6 w-6 text-white" />
+                      <XMarkIcon className="h-6 w-6 text-white" />
                     </button>
                   </div>
                   <div

src/components/Layout/UserDropdown/index.tsx

@@ -1,8 +1,11 @@
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
 import { useUser } from '@app/hooks/useUser';
 import { Menu, Transition } from '@headlessui/react';
-import { ClockIcon, LogoutIcon } from '@heroicons/react/outline';
-import { CogIcon, UserIcon } from '@heroicons/react/solid';
+import {
+  ArrowRightOnRectangleIcon,
+  ClockIcon,
+} from '@heroicons/react/24/outline';
+import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
@@ -147,7 +150,7 @@ const UserDropdown = () => {
                     }`}
                     onClick={() => logout()}
                   >
-                    <LogoutIcon className="mr-2 inline h-5 w-5" />
+                    <ArrowRightOnRectangleIcon className="mr-2 inline h-5 w-5" />
                     <span>{intl.formatMessage(messages.signout)}</span>
                   </a>
                 )}

src/components/Layout/VersionStatus/index.tsx

@@ -1,9 +1,9 @@
 import {
-  ArrowCircleUpIcon,
+  ArrowUpCircleIcon,
   BeakerIcon,
-  CodeIcon,
+  CodeBracketIcon,
   ServerIcon,
-} from '@heroicons/react/outline';
+} from '@heroicons/react/24/outline';
 import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
@@ -56,7 +56,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
         }`}
       >
         {data.commitTag === 'local' ? (
-          <CodeIcon className="h-6 w-6" />
+          <CodeBracketIcon className="h-6 w-6" />
         ) : data.version.startsWith('develop-') ? (
           <BeakerIcon className="h-6 w-6" />
         ) : (
@@ -80,7 +80,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
             )}
           </span>
         </div>
-        {data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
+        {data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
       </a>
     </Link>
   );

src/components/Layout/index.tsx

@@ -6,8 +6,8 @@ import type { AvailableLocale } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
-import { MenuAlt2Icon } from '@heroicons/react/outline';
-import { ArrowLeftIcon } from '@heroicons/react/solid';
+import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
+import { ArrowLeftIcon } from '@heroicons/react/24/solid';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -76,7 +76,7 @@ const Layout = ({ children }: LayoutProps) => {
             onClick={() => setSidebarOpen(true)}
             data-testid="sidebar-toggle"
           >
-            <MenuAlt2Icon className="h-6 w-6" />
+            <Bars3BottomLeftIcon className="h-6 w-6" />
           </button>
           <div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
             <button