BED-5112: use prettier to organize imports (#1026)

* feat: use prettier to organize imports

* chore: remove unused type augmentation

* chore: remove augmentation from shared-ui

* chore: format bh-shared-ui with new prettier rule

* chore: format bhce with new prettier rule

* chore: format js-client-lib with new prettier rule

* chore: resolve static analysis errors

* fix: more static analysis errors

* chore: use the same ignore comment

* chore: ignore the setupTest files

* feat: add yarn format to CI

* fix: action code paths

* chore: update action

* fix: missing change directory

.github/workflows/build-ui.yml

@@ -42,6 +42,10 @@ jobs:
       - name: Install Deps
         run: |
           cd cmd/ui && yarn
+      
+      - name: Format js-client-library with Prettier
+        run: |
+          cd packages/javascript/js-client-library && yarn format && cd ../bh-shared-ui/ && yarn format && cd ../../../cmd/ui/ && yarn format
 
       - name: Run Build
         run: |

cmd/ui/.prettierrc

@@ -1,4 +1,5 @@
 {
+    "plugins": ["prettier-plugin-organize-imports"],
     "tabWidth": 4,
     "trailingComma": "es5",
     "semi": true,

cmd/ui/package.json

@@ -89,6 +89,7 @@
         "lint-staged": "^10.5.4",
         "msw": "^1.3.3",
         "prettier": "^3.2.5",
+        "prettier-plugin-organize-imports": "^4.1.0",
         "redux-devtools-extension": "^2.13.9",
         "redux-saga-test-plan": "^4.0.3",
         "typescript": "^5.1.6",

cmd/ui/src/App.test.tsx

@@ -14,12 +14,12 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { DeepPartial, apiClient } from 'bh-shared-ui';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import App, { Inner } from 'src/App';
-import { act, render, screen } from 'src/test-utils';
-import { DeepPartial, apiClient } from 'bh-shared-ui';
 import * as authSlice from 'src/ducks/auth/authSlice';
+import { act, render, screen } from 'src/test-utils';
 import { AppState } from './store';
 
 const server = setupServer(

cmd/ui/src/App.tsx

@@ -21,12 +21,12 @@ import {
     AppNotifications,
     GenericErrorBoundaryFallback,
     NotificationsProvider,
-    lightPalette,
+    components,
     darkPalette,
+    lightPalette,
+    setRootClass,
     typography,
-    components,
     useFeatureFlags,
-    setRootClass,
 } from 'bh-shared-ui';
 import { createBrowserHistory } from 'history';
 import React, { useEffect } from 'react';

cmd/ui/src/components/GraphButtons/GraphButtons.test.tsx

@@ -14,10 +14,10 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { render, screen } from 'src/test-utils';
-import GraphButtons from 'src/components/GraphButtons';
 import { SigmaContainer } from '@react-sigma/core';
 import userEvent from '@testing-library/user-event';
+import GraphButtons from 'src/components/GraphButtons';
+import { render, screen } from 'src/test-utils';
 
 describe('GraphLayoutButtons', () => {
     const user = userEvent.setup();

cmd/ui/src/components/GraphButtons/GraphButtons.tsx

@@ -17,7 +17,7 @@
 import { faCropAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Box, MenuItem } from '@mui/material';
-import { GraphMenu, GraphButton } from 'bh-shared-ui';
+import { GraphButton, GraphMenu } from 'bh-shared-ui';
 import isEmpty from 'lodash/isEmpty';
 import { FC } from 'react';
 import { useAppSelector } from 'src/store';

cmd/ui/src/components/Header.tsx

@@ -14,15 +14,15 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { faCog, faUsersRectangle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+import { faCog, faProjectDiagram, faUsersRectangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AppBar, Box, IconButton, Link, Toolbar, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
+import { MenuItem } from 'bh-shared-ui';
 import React from 'react';
 import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';
-import { MenuItem } from 'bh-shared-ui';
-import * as routes from 'src/ducks/global/routes';
 import SettingsMenu from 'src/components/SettingsMenu';
+import * as routes from 'src/ducks/global/routes';
 import { useAppSelector } from 'src/store';
 
 const useStyles = makeStyles((theme) => ({

cmd/ui/src/components/LeftNav/LeftNav.test.tsx

@@ -14,8 +14,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { render, screen } from 'src/test-utils';
 import LeftNav from 'src/components/LeftNav';
+import { render, screen } from 'src/test-utils';
 
 describe('LeftNav', () => {
     it('should render a single section with a single navigation item', () => {

cmd/ui/src/components/Notifier.tsx

@@ -13,11 +13,10 @@
 // limitations under the License.
 //
 // SPDX-License-Identifier: Apache-2.0
-import { SnackbarKey } from 'notistack';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, SvgIcon } from '@mui/material';
-import { useSnackbar } from 'notistack';
+import { SnackbarKey, useSnackbar } from 'notistack';
 import React, { useCallback, useEffect } from 'react';
 import { removeSnackbar } from 'src/ducks/global/actions';
 import { useAppDispatch, useAppSelector } from 'src/store';

cmd/ui/src/components/SigmaChart.tsx

@@ -14,11 +14,13 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { useTheme } from '@mui/material';
 import { SigmaContainer } from '@react-sigma/core';
 import '@react-sigma/core/lib/react-sigma.min.css';
 import Graph, { MultiDirectedGraph } from 'graphology';
 import { AbstractGraph, Attributes } from 'graphology-types';
 import { forwardRef } from 'react';
+import { SigmaNodeEventPayload } from 'sigma/sigma';
 import { GraphEvents } from 'src/components/GraphEvents';
 import { MAX_CAMERA_RATIO, MIN_CAMERA_RATIO } from 'src/ducks/graph/utils';
 import drawEdgeLabel from 'src/rendering/programs/edge-label';
@@ -30,8 +32,6 @@ import drawLabel from 'src/rendering/programs/node-label';
 import getNodeCombinedProgram from 'src/rendering/programs/node.combined';
 import getNodeGlyphsProgram from 'src/rendering/programs/node.glyphs';
 import GraphEdgeEvents from './GraphEdgeEvents';
-import { useTheme } from '@mui/material';
-import { SigmaNodeEventPayload } from 'sigma/sigma';
 
 interface SigmaChartProps {
     graph: Graph<Attributes, Attributes, Attributes>;

cmd/ui/src/ducks/assetgroups/reducer.ts

@@ -14,11 +14,11 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { createSelector } from '@reduxjs/toolkit';
 import { produce } from 'immer';
+import { AppState } from 'src/store';
 import * as actions from './actions';
 import * as types from './types';
-import { AppState } from 'src/store';
-import { createSelector } from '@reduxjs/toolkit';
 
 const INITIAL_STATE: types.AssetGroupsState = {
     assetGroups: [],

cmd/ui/src/ducks/assetgroups/saga.ts

@@ -14,18 +14,18 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { takeEvery, all, call, put } from 'redux-saga/effects';
-import * as actions from './actions';
 import { apiClient } from 'bh-shared-ui';
+import { SagaIterator } from 'redux-saga';
+import { all, call, put, takeEvery } from 'redux-saga/effects';
 import {
     GetAssetGroup,
     GetAssetGroupFailure,
     GetAssetGroupSuccess,
     ListAssetGroupsFailure,
     ListAssetGroupsSuccess,
 } from './actionCreators';
+import * as actions from './actions';
 import { GetAssetGroupAction } from './types';
-import { SagaIterator } from 'redux-saga';
 
 export function* listAssetGroupsSaga(): SagaIterator {
     try {

cmd/ui/src/ducks/auth/authSlice.ts

@@ -15,9 +15,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
-import { DateTime } from 'luxon';
 import { apiClient } from 'bh-shared-ui';
 import { PutUserAuthSecretRequest } from 'js-client-library';
+import { DateTime } from 'luxon';
 
 import type { AppDispatch, AppState } from 'src/store';
 import { addSnackbar } from '../global/actions';

cmd/ui/src/ducks/auth/types.ts

@@ -126,15 +126,15 @@ const START_SET_PWD = 'auth/STARTSETPWD';
 const ERROR = 'auth/ERROR';
 
 export {
-    START_FETCH_USERS,
-    SUCCESS_FETCH_USERS,
-    START_FETCH_ROLES,
-    SUCCESS_FETCH_ROLES,
+    ERROR,
     START_CREATE_USER,
-    START_UPDATE_USER,
     START_DELETE_USER,
+    START_FETCH_ROLES,
+    START_FETCH_USERS,
     START_SET_PWD,
-    ERROR,
+    START_UPDATE_USER,
+    SUCCESS_FETCH_ROLES,
+    SUCCESS_FETCH_USERS,
 };
 
 export interface StartFetchUsers {

cmd/ui/src/ducks/explore/saga.ts

@@ -14,24 +14,23 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { ActiveDirectoryRelationshipKind, AzureRelationshipKind, apiClient } from 'bh-shared-ui';
 import { SagaIterator } from 'redux-saga';
 import { all, call, fork, put, takeLatest } from 'redux-saga/effects';
-import { apiClient } from 'bh-shared-ui';
 import { putGraphData, putGraphError, putGraphVars, saveResponseForExport } from 'src/ducks/explore/actions';
 import {
     AssetGroupRequest,
+    CypherQueryRequest,
+    GRAPH_START,
     GraphEndpoints,
     GraphRequestType,
-    GRAPH_START,
     NodeInfoRequest,
     PathfindingRequest,
     SearchRequest,
     ShortestPathRequest,
-    CypherQueryRequest,
 } from 'src/ducks/explore/types';
 import { addSnackbar } from 'src/ducks/global/actions';
 import { getLinksIndex, getNodesIndex } from 'src/ducks/graph/graphutils';
-import { ActiveDirectoryRelationshipKind, AzureRelationshipKind } from 'bh-shared-ui';
 import { transformFlatGraphResponse, transformToFlatGraphResponse } from 'src/utils';
 
 function* graphQueryWatcher(): SagaIterator {

cmd/ui/src/ducks/explore/types.ts

@@ -32,17 +32,17 @@ const TOGGLE_TIER_ZERO_NODE = 'app/explore/TOGGLE_TIER_ZERO_NODE';
 const TOGGLE_OWNED_OBJECT_NODE = 'app/explore/TOGGLE_OWNED_OBJECT_NODE';
 
 export {
-    SET_GRAPH_LOADING,
-    GRAPH_START,
-    GRAPH_SUCCESS,
+    ADD_NODES,
     GRAPH_FAILURE,
+    GRAPH_INIT,
     GRAPH_SETVARS,
-    ADD_NODES,
+    GRAPH_START,
+    GRAPH_SUCCESS,
     REMOVE_NODES,
-    GRAPH_INIT,
     SAVE_RESPONSE_FOR_EXPORT,
-    TOGGLE_TIER_ZERO_NODE,
+    SET_GRAPH_LOADING,
     TOGGLE_OWNED_OBJECT_NODE,
+    TOGGLE_TIER_ZERO_NODE,
 };
 
 export enum GraphEndpoints {}

cmd/ui/src/ducks/global/reducer.ts

@@ -14,10 +14,10 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { produce, castDraft } from 'immer';
 import { combineReducers } from '@reduxjs/toolkit';
-import * as types from './types';
+import { castDraft, produce } from 'immer';
 import assign from 'lodash/assign';
+import * as types from './types';
 
 const initialGlobalState: types.GlobalViewState = {
     notifications: [],

cmd/ui/src/ducks/global/types.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 //
 // SPDX-License-Identifier: Apache-2.0
-import { SnackbarKey } from 'notistack';
 import { Notification } from 'bh-shared-ui';
+import { SnackbarKey } from 'notistack';
 
 const GLOBAL_ADD_SNACKBAR = 'app/global/ADDSNACKBAR';
 const GLOBAL_CLOSE_SNACKBAR = 'app/global/CLOSESNACKBAR';
@@ -30,14 +30,14 @@ const GLOBAL_SET_DARK_MODE = 'app/global/GLOBALSETDARKMODE';
 export {
     GLOBAL_ADD_SNACKBAR,
     GLOBAL_CLOSE_SNACKBAR,
-    GLOBAL_REMOVE_SNACKBAR,
-    GLOBAL_SET_EXPANDED,
-    GLOBAL_SET_DOMAIN,
     GLOBAL_FETCH_ASSET_GROUPS,
+    GLOBAL_REMOVE_SNACKBAR,
     GLOBAL_SET_ASSET_GROUPS,
-    GLOBAL_SET_ASSET_GROUP_INDEX,
     GLOBAL_SET_ASSET_GROUP_EDIT,
+    GLOBAL_SET_ASSET_GROUP_INDEX,
     GLOBAL_SET_DARK_MODE,
+    GLOBAL_SET_DOMAIN,
+    GLOBAL_SET_EXPANDED,
 };
 
 export interface GlobalViewState {

cmd/ui/src/ducks/graph/graphutils.ts

@@ -18,9 +18,9 @@ import extend from 'lodash/extend';
 import keys from 'lodash/keys';
 import pick from 'lodash/pick';
 import pickBy from 'lodash/pickBy';
-import { Index, Items } from 'src/utils';
 import { mapToRange, toGraphLinkColor, toWidth } from 'src/ducks/graph/colors';
 import { GraphNodeTypes } from 'src/ducks/graph/types';
+import { Index, Items } from 'src/utils';
 
 const getLinks: (data: Items) => Items[] = (data) => {
     const relKeys = Object.keys(data).filter((nodeKey) => {
@@ -246,16 +246,16 @@ const setFontIcons = (data: Items): void => {
 };
 
 export {
-    withLinkImact,
-    handleLabels,
-    setFontIcons,
-    getLinks,
-    getLinksIndex,
-    getNodesIndex,
+    ICONS,
     applyRelWidths,
     findRootId,
     findRootRelsIds,
     findTierZeroNodeId,
     getCombined,
-    ICONS,
+    getLinks,
+    getLinksIndex,
+    getNodesIndex,
+    handleLabels,
+    setFontIcons,
+    withLinkImact,
 };

cmd/ui/src/ducks/index.ts

@@ -14,9 +14,9 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as global } from './global';
-export { default as explore } from './explore';
-export { default as entityinfo } from './entityinfo';
-export { default as tierzero } from './tierzero';
 export { default as assetgroups } from './assetgroups';
 export { default as auth } from './auth/authSlice';
+export { default as entityinfo } from './entityinfo';
+export { default as explore } from './explore';
+export { default as global } from './global';
+export { default as tierzero } from './tierzero';

cmd/ui/src/ducks/tierzero/saga.ts

@@ -14,11 +14,11 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { apiClient } from 'bh-shared-ui';
 import find from 'lodash/find';
 import keys from 'lodash/keys';
 import { SagaIterator } from 'redux-saga';
 import { all, call, put, select, takeEvery } from 'redux-saga/effects';
-import { apiClient } from 'bh-shared-ui';
 import { addSnackbar } from 'src/ducks/global/actions';
 import { flushSuccess } from 'src/ducks/tierzero/actions';
 import { FLUSH_START } from 'src/ducks/tierzero/types';

cmd/ui/src/hooks/useCollectors.tsx

@@ -14,9 +14,9 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { apiClient } from 'bh-shared-ui';
 import { RequestOptions } from 'js-client-library';
 import { useQuery } from 'react-query';
-import { apiClient } from 'bh-shared-ui';
 
 export type CollectorType = 'sharphound' | 'azurehound';
 

cmd/ui/src/hooks/useLayoutDagre/useLayoutDagre.test.tsx

@@ -14,13 +14,13 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import dagre from 'dagrejs';
+import Graph from 'graphology';
 import {
-    copySigmaNodesToGraphlibGraph,
-    applyNodePositionsFromGraphlibGraph,
     NODE_DEFAULT_SIZE,
+    applyNodePositionsFromGraphlibGraph,
+    copySigmaNodesToGraphlibGraph,
 } from 'src/hooks/useLayoutDagre/useLayoutDagre';
-import Graph from 'graphology';
-import dagre from 'dagrejs';
 
 const sigmaGraph = new Graph();
 const graphlibGraph = new dagre.graphlib.Graph();