SONAR-21970 implement prettier plugin organize imports

server/sonar-web/.prettierrc

@@ -1,4 +1,5 @@
 {
   "printWidth": 100,
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-organize-imports"]
 }

server/sonar-web/design-system/package.json

@@ -49,6 +49,7 @@
     "postcss-calc": "9.0.1",
     "postcss-custom-properties": "12.1.11",
     "prettier": "^3.1.0",
+    "prettier-plugin-organize-imports": "3.2.4",
     "twin.macro": "3.4.1",
     "typescript": "5.3.3",
     "vite": "4.5.0",

server/sonar-web/design-system/src/components/__tests__/Link-test.tsx

@@ -18,8 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { screen } from '@testing-library/react';
-// @ts-expect-error React is needed for <></> fragments
-import React from 'react';
+import * as React from 'react';
 import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
 import { render } from '../../helpers/testUtils';
 import { ContentLink, DiscreetLink, StandoutLink as Link } from '../Link';
@@ -117,10 +116,14 @@ const setupWithMemoryRouter = (component: JSX.Element, initialEntries = ['/initi
       <Routes>
         <Route
           element={
-            <>
+            // Below: using <></> won't work in extensions ('React' is not defined). This is because the
+            // name 'React' would already have been minified to something else when <> is resolved to
+            // React.Fragment
+            // eslint-disable-next-line react/jsx-fragments
+            <React.Fragment>
               {component}
               <ShowPath />
-            </>
+            </React.Fragment>
           }
           path="/initial"
         />

server/sonar-web/design-system/src/components/__tests__/NavLink-test.tsx

@@ -18,8 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { screen } from '@testing-library/react';
-// @ts-expect-error React is needed for <></> fragments
-import React from 'react';
+import * as React from 'react';
 import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
 import { render } from '../../helpers/testUtils';
 import NavLink from '../NavLink';
@@ -99,10 +98,14 @@ const setupWithMemoryRouter = (component: JSX.Element, initialEntries = ['/initi
       <Routes>
         <Route
           element={
-            <>
+            // Below: using <></> won't work in extensions ('React' is not defined). This is because the
+            // name 'React' would already have been minified to something else when <> is resolved to
+            // React.Fragment
+            // eslint-disable-next-line react/jsx-fragments
+            <React.Fragment>
               {component}
               <ShowPath />
-            </>
+            </React.Fragment>
           }
           path="/initial"
         />

server/sonar-web/package.json

@@ -110,6 +110,7 @@
     "postcss-calc": "9.0.1",
     "postcss-custom-properties": "12.1.11",
     "prettier": "3.2.5",
+    "prettier-plugin-organize-imports": "3.2.4",
     "react-select-event": "5.5.1",
     "tailwindcss": "3.3.5",
     "turbo": "1.11.3",

server/sonar-web/src/main/js/api/mocks/QualityProfilesServiceMock.ts

@@ -72,7 +72,7 @@ import {
   searchUsers,
   setDefaultProfile,
 } from '../quality-profiles';
-import { getRuleDetails, searchRules, listRules } from '../rules';
+import { getRuleDetails, listRules, searchRules } from '../rules';
 
 jest.mock('../../api/rules');
 

server/sonar-web/src/main/js/app/components/GlobalFooter.tsx

@@ -33,8 +33,8 @@ import InstanceMessage from '../../components/common/InstanceMessage';
 import AppVersionStatus from '../../components/shared/AppVersionStatus';
 import { useDocUrl } from '../../helpers/docs';
 import { getEdition } from '../../helpers/editions';
-import { useAppState } from './app-state/withAppStateContext';
 import GlobalFooterBranding from './GlobalFooterBranding';
+import { useAppState } from './app-state/withAppStateContext';
 
 interface GlobalFooterProps {
   hideLoggedInInfo?: boolean;

server/sonar-web/src/main/js/apps/component-measures/sidebar/Sidebar.tsx

@@ -33,10 +33,10 @@ import * as React from 'react';
 import A11ySkipTarget from '../../../components/a11y/A11ySkipTarget';
 import { translate } from '../../../helpers/l10n';
 import useFollowScroll from '../../../hooks/useFollowScroll';
+import { Domain } from '../../../types/measures';
 import { MeasureEnhanced } from '../../../types/types';
 import { PROJECT_OVERVEW, Query, isProjectOverview, populateDomainsFromMeasures } from '../utils';
 import DomainSubnavigation from './DomainSubnavigation';
-import { Domain } from '../../../types/measures';
 
 interface Props {
   measures: MeasureEnhanced[];

server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx

@@ -19,13 +19,13 @@
  */
 import {
   ButtonPrimary,
-  Spinner,
   FlagErrorIcon,
   FlagMessage,
   FormField,
   InputField,
   LightPrimary,
   Link,
+  Spinner,
 } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';

server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreate.tsx

@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { LabelValueSelectOption } from 'design-system';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getGithubOrganizations, getGithubRepositories } from '../../../../api/alm-integrations';
 import { useLocation, useRouter } from '../../../../components/hoc/withRouter';
@@ -29,7 +30,6 @@ import MonorepoProjectCreate from '../monorepo/MonorepoProjectCreate';
 import { CreateProjectModes } from '../types';
 import GitHubProjectCreateRenderer from './GitHubProjectCreateRenderer';
 import { redirectToGithub } from './utils';
-import { LabelValueSelectOption } from 'design-system';
 
 interface Props {
   canAdmin: boolean;

server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx

@@ -30,8 +30,8 @@ import {
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../../helpers/l10n';
-import { usePersonalAccessToken } from '../usePersonalAccessToken';
 import { AlmInstanceBase } from '../../../../types/alm-settings';
+import { usePersonalAccessToken } from '../usePersonalAccessToken';
 
 interface Props {
   almSetting: AlmInstanceBase;

server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreate.tsx

@@ -17,20 +17,20 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { LabelValueSelectOption } from 'design-system';
+import { orderBy } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getGitlabProjects } from '../../../../api/alm-integrations';
+import { useLocation, useRouter } from '../../../../components/hoc/withRouter';
 import { GitlabProject } from '../../../../types/alm-integration';
 import { AlmInstanceBase } from '../../../../types/alm-settings';
+import { DopSetting } from '../../../../types/dop-translation';
 import { Paging } from '../../../../types/types';
 import { ImportProjectParam } from '../CreateProjectPage';
-import { CreateProjectModes } from '../types';
-import GitlabProjectCreateRenderer from './GitlabProjectCreateRenderer';
-import { DopSetting } from '../../../../types/dop-translation';
-import { useLocation, useRouter } from '../../../../components/hoc/withRouter';
 import MonorepoProjectCreate from '../monorepo/MonorepoProjectCreate';
+import { CreateProjectModes } from '../types';
 import GitlabPersonalAccessTokenForm from './GItlabPersonalAccessTokenForm';
-import { orderBy } from 'lodash';
-import { LabelValueSelectOption } from 'design-system';
+import GitlabProjectCreateRenderer from './GitlabProjectCreateRenderer';
 
 interface Props {
   canAdmin: boolean;

server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx

@@ -17,22 +17,22 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Link, Spinner } from '@sonarsource/echoes-react';
 import { LightPrimary, Title } from 'design-system';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { AvailableFeaturesContext } from '../../../../app/components/available-features/AvailableFeaturesContext';
 import { translate } from '../../../../helpers/l10n';
+import { queryToSearch } from '../../../../helpers/urls';
 import { GitlabProject } from '../../../../types/alm-integration';
 import { AlmInstanceBase, AlmKeys, AlmSettingsInstance } from '../../../../types/alm-settings';
+import { Feature } from '../../../../types/features';
 import { Paging } from '../../../../types/types';
 import AlmSettingsInstanceDropdown from '../components/AlmSettingsInstanceDropdown';
 import WrongBindingCountAlert from '../components/WrongBindingCountAlert';
+import { CreateProjectModes } from '../types';
 import GitlabPersonalAccessTokenForm from './GItlabPersonalAccessTokenForm';
 import GitlabProjectSelectionForm from './GitlabProjectSelectionForm';
-import { FormattedMessage } from 'react-intl';
-import { Link, Spinner } from '@sonarsource/echoes-react';
-import { queryToSearch } from '../../../../helpers/urls';
-import { CreateProjectModes } from '../types';
-import { Feature } from '../../../../types/features';
-import { AvailableFeaturesContext } from '../../../../app/components/available-features/AvailableFeaturesContext';
 
 export interface GitlabProjectCreateRendererProps {
   canAdmin?: boolean;

server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx

@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Link } from '@sonarsource/echoes-react';
 import { FlagMessage, InputSearch, LightPrimary } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -29,7 +30,6 @@ import { GitlabProject } from '../../../../types/alm-integration';
 import { Paging } from '../../../../types/types';
 import AlmRepoItem from '../components/AlmRepoItem';
 import { CreateProjectModes } from '../types';
-import { Link } from '@sonarsource/echoes-react';
 
 export interface GitlabProjectSelectionFormProps {
   loadingMore: boolean;

server/sonar-web/src/main/js/apps/create/project/__tests__/GitLab-it.tsx

@@ -27,8 +27,8 @@ import DopTranslationServiceMock from '../../../../api/mocks/DopTranslationServi
 import NewCodeDefinitionServiceMock from '../../../../api/mocks/NewCodeDefinitionServiceMock';
 import { renderApp } from '../../../../helpers/testReactTestingUtils';
 import { byLabelText, byRole, byText } from '../../../../helpers/testSelector';
-import CreateProjectPage from '../CreateProjectPage';
 import { Feature } from '../../../../types/features';
+import CreateProjectPage from '../CreateProjectPage';
 import { CreateProjectModes } from '../types';
 
 jest.mock('../../../../api/alm-integrations');

server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoConnectionSelector.tsx

@@ -20,13 +20,13 @@
 import { Title } from 'design-system/lib';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import DopSettingDropdown from '../components/DopSettingDropdown';
-import { MonorepoOrganisationSelector } from './MonorepoOrganisationSelector';
-import { MonorepoRepositorySelector } from './MonorepoRepositorySelector';
 import { LabelValueSelectOption } from '../../../../helpers/search';
-import { DopSetting } from '../../../../types/dop-translation';
 import { AlmKeys } from '../../../../types/alm-settings';
+import { DopSetting } from '../../../../types/dop-translation';
+import DopSettingDropdown from '../components/DopSettingDropdown';
 import MonorepoNoOrganisations from './MonorepoNoOrganisations';
+import { MonorepoOrganisationSelector } from './MonorepoOrganisationSelector';
+import { MonorepoRepositorySelector } from './MonorepoRepositorySelector';
 
 interface Props {
   almKey: AlmKeys;

server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectCreate.tsx

@@ -32,8 +32,8 @@ import { ImportProjectParam } from '../CreateProjectPage';
 import { ProjectData } from '../components/ProjectValidation';
 import { CreateProjectModes } from '../types';
 import { getSanitizedProjectKey } from '../utils';
-import { MonorepoProjectHeader } from './MonorepoProjectHeader';
 import { MonorepoConnectionSelector } from './MonorepoConnectionSelector';
+import { MonorepoProjectHeader } from './MonorepoProjectHeader';
 import { MonorepoProjectsList } from './MonorepoProjectsList';
 
 interface MonorepoProjectCreateProps {

server/sonar-web/src/main/js/apps/create/project/usePersonalAccessToken.ts

@@ -23,8 +23,8 @@ import {
   setAlmPersonalAccessToken,
 } from '../../../api/alm-integrations';
 import { translate } from '../../../helpers/l10n';
-import { tokenExistedBefore } from './utils';
 import { AlmInstanceBase } from '../../../types/alm-settings';
+import { tokenExistedBefore } from './utils';
 
 export interface PATType {
   validationFailed: boolean;

server/sonar-web/src/main/js/apps/projects/components/__tests__/FavoriteFilter-test.tsx

@@ -28,7 +28,7 @@ import {
   mockRouter,
 } from '../../../../helpers/testMocks';
 import { renderComponent } from '../../../../helpers/testReactTestingUtils';
-import { ALL_PATHNAME, FavoriteFilter, FAVORITE_PATHNAME } from '../FavoriteFilter';
+import { ALL_PATHNAME, FAVORITE_PATHNAME, FavoriteFilter } from '../FavoriteFilter';
 
 jest.mock('../../../../helpers/storage', () => ({
   save: jest.fn(),

server/sonar-web/src/main/js/apps/sessions/components/__tests__/Login-it.tsx

@@ -24,11 +24,11 @@ import { addGlobalErrorMessage } from 'design-system';
 import * as React from 'react';
 import { getLoginMessage } from '../../../../api/settings';
 import { getIdentityProviders } from '../../../../api/users';
+import { getBaseUrl } from '../../../../helpers/system';
 import { mockLocation } from '../../../../helpers/testMocks';
 import { renderComponent } from '../../../../helpers/testReactTestingUtils';
 import { byLabelText, byRole, byText } from '../../../../helpers/testSelector';
 import { LoginContainer } from '../LoginContainer';
-import { getBaseUrl } from '../../../../helpers/system';
 
 jest.mock('../../../../helpers/system', () => ({
   getBaseUrl: jest.fn().mockReturnValue(''),

server/sonar-web/src/main/js/apps/settings/components/authentication/ConfigurationForm.tsx

@@ -31,9 +31,9 @@ import { ProvisioningType } from '../../../../types/provisioning';
 import { Dict, Provider } from '../../../../types/types';
 import { AuthenticationTabs, DOCUMENTATION_LINK_SUFFIXES } from './Authentication';
 import AuthenticationFormField from './AuthenticationFormField';
+import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 import { SettingValue } from './hook/useConfiguration';
 import { isAllowToSignUpEnabled, isOrganizationListEmpty } from './hook/useGithubConfiguration';
-import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 
 interface Props {
   canBeSave: boolean;

server/sonar-web/src/main/js/apps/settings/components/authentication/ConfirmProvisioningModal.tsx

@@ -19,10 +19,10 @@
  */
 import { FlagMessage } from 'design-system';
 import React from 'react';
+import { useIntl } from 'react-intl';
 import ConfirmModal from '../../../../components/controls/ConfirmModal';
 import { ProvisioningType } from '../../../../types/provisioning';
 import { Provider } from '../../../../types/types';
-import { useIntl } from 'react-intl';
 
 interface Props {
   allowUsersToSignUp?: boolean;

server/sonar-web/src/main/js/apps/settings/components/authentication/GitLabAuthenticationTab.tsx

@@ -40,11 +40,11 @@ import { Provider } from '../../../../types/types';
 import { DOCUMENTATION_LINK_SUFFIXES } from './Authentication';
 import AuthenticationFormField from './AuthenticationFormField';
 import ConfigurationDetails from './ConfigurationDetails';
+import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 import GitLabConfigurationForm from './GitLabConfigurationForm';
 import GitLabConfigurationValidity from './GitLabConfigurationValidity';
 import ProvisioningSection from './ProvisioningSection';
 import TabHeader from './TabHeader';
-import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 
 interface ChangesForm {
   provisioningType?: GitLabConfigurationUpdateBody['provisioningType'];

server/sonar-web/src/main/js/apps/settings/components/authentication/GithubAuthenticationTab.tsx

@@ -37,6 +37,7 @@ import AuthenticationFormField from './AuthenticationFormField';
 import AutoProvisioningConsent from './AutoProvisionningConsent';
 import ConfigurationDetails from './ConfigurationDetails';
 import ConfigurationForm from './ConfigurationForm';
+import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 import GitHubConfigurationValidity from './GitHubConfigurationValidity';
 import GitHubMappingModal from './GitHubMappingModal';
 import ProvisioningSection from './ProvisioningSection';
@@ -48,7 +49,6 @@ import useGithubConfiguration, {
   isAllowToSignUpEnabled,
   isOrganizationListEmpty,
 } from './hook/useGithubConfiguration';
-import ConfirmProvisioningModal from './ConfirmProvisioningModal';
 
 interface GithubAuthenticationProps {
   definitions: ExtendedSettingDefinition[];

server/sonar-web/src/main/js/components/issue/popups/IssueTagsPopup.tsx

@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { searchIssueTags } from '../../../api/issues';
 import { MultiSelector } from 'design-system';
 import { difference, noop, without } from 'lodash';
 import * as React from 'react';
+import { searchIssueTags } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
 
 interface IssueTagsPopupProps {

server/sonar-web/src/main/js/components/workspace/WorkspaceNavComponent.tsx

@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ComponentDescriptor } from './context';
 import WorkspaceComponentTitle from './WorkspaceComponentTitle';
 import WorkspaceNavItem from './WorkspaceNavItem';
+import { ComponentDescriptor } from './context';
 
 export interface Props {
   component: ComponentDescriptor;

server/sonar-web/yarn.lock

@@ -5828,6 +5828,7 @@ __metadata:
     postcss-calc: "npm:9.0.1"
     postcss-custom-properties: "npm:12.1.11"
     prettier: "npm:3.2.5"
+    prettier-plugin-organize-imports: "npm:3.2.4"
     react: "npm:18.2.0"
     react-day-picker: "npm:8.10.0"
     react-dom: "npm:18.2.0"
@@ -7705,6 +7706,7 @@ __metadata:
     postcss-calc: "npm:9.0.1"
     postcss-custom-properties: "npm:12.1.11"
     prettier: "npm:^3.1.0"
+    prettier-plugin-organize-imports: "npm:3.2.4"
     react-toastify: "npm:10.0.4"
     twin.macro: "npm:3.4.1"
     typescript: "npm:5.3.3"
@@ -12748,6 +12750,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-plugin-organize-imports@npm:3.2.4":
+  version: 3.2.4
+  resolution: "prettier-plugin-organize-imports@npm:3.2.4"
+  peerDependencies:
+    "@volar/vue-language-plugin-pug": ^1.0.4
+    "@volar/vue-typescript": ^1.0.4
+    prettier: ">=2.0"
+    typescript: ">=2.9"
+  peerDependenciesMeta:
+    "@volar/vue-language-plugin-pug":
+      optional: true
+    "@volar/vue-typescript":
+      optional: true
+  checksum: 10/93c98d365af500aa4c72f5330d82c20a20d0e7661a9692e6f26a76a2f4f88b99e0f85dcb8871e98b6d687d6e19ea5f1dcc937f9e29fd0778e888675ecafed233
+  languageName: node
+  linkType: hard
+
 "prettier@npm:3.2.5":
   version: 3.2.5
   resolution: "prettier@npm:3.2.5"