Add eslint rule to alphabetize imports (#3994)

* add eslint rule to alphabetize imports

* update and fix unsafe chain

.eslintrc

@@ -6,11 +6,23 @@
         "plugin:@typescript-eslint/recommended",
         "plugin:import/typescript"
     ],
+    "plugins": [
+        "@typescript-eslint",
+        "import"
+    ],
     "rules": {
         "import/default": 0,
         "import/no-named-as-default-member": 0,
         "import/named": 2,
-        "import/order": 2,
+        "import/order": [
+            2,
+            {
+                "alphabetize": {
+                    "order": "asc",
+                    "caseInsensitive": true
+                }
+            }
+        ],
         "@typescript-eslint/explicit-module-boundary-types": 0,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/ban-ts-comment": 0,
@@ -20,5 +32,5 @@
     "ignorePatterns": "rpc",
     "parserOptions": {
         "project": "./tsconfig.json"
-     }
+    }
 }

package.json

@@ -100,10 +100,10 @@
     "@types/react-dom": "^17.0.5",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "buffer": "^5.7.1",
-    "eslint": "^7.28.0",
+    "eslint": "^8.48.0",
     "eslint-plugin-import": "^2.25.4",
     "jest": "^27.3.1",
     "jest-styled-components": "^7.0.4",
@@ -112,7 +112,7 @@
     "process": "^0.11.10",
     "react-test-renderer": "^17.0.2",
     "ts-jest": "^27.1.1",
-    "typescript": "4.9.3",
+    "typescript": "^5.2.2",
     "yarn-audit-fix": "^10.0.1"
   },
   "alias": {

ui/components/DataTable/DataTable.tsx

@@ -13,6 +13,7 @@ import * as React from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { ThemeTypes } from "../../contexts/AppContext";
+import { SearchedNamespaces } from "../../lib/types";
 import { IconButton } from "../Button";
 import CheckboxActions from "../CheckboxActions";
 import ChipGroup from "../ChipGroup";
@@ -23,12 +24,10 @@ import FilterDialog, {
 } from "../FilterDialog";
 import Flex from "../Flex";
 import Icon, { IconType } from "../Icon";
+import InfoModal from "../InfoModal";
 import SearchField from "../SearchField";
 import Spacer from "../Spacer";
 import Text from "../Text";
-import InfoModal from "../InfoModal";
-import { SearchedNamespaces } from "../../lib/types";
-import SortableLabel from "./SortableLabel";
 import {
   filterRows,
   filterSelectionsToQueryString,
@@ -38,6 +37,7 @@ import {
   sortByField,
   toPairs,
 } from "./helpers";
+import SortableLabel from "./SortableLabel";
 import { Field, FilterState } from "./types";
 
 /** DataTable Properties  */

ui/components/Icon.tsx

@@ -14,9 +14,9 @@ import LogoutIcon from "@material-ui/icons/ExitToApp";
 import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
 import FilterIcon from "@material-ui/icons/FilterList";
 import HourglassFullIcon from "@material-ui/icons/HourglassFull";
+import InfoIcon from "@material-ui/icons/Info";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
-import InfoIcon from "@material-ui/icons/Info";
 import LaunchIcon from "@material-ui/icons/Launch";
 import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
 import NavigateNextIcon from "@material-ui/icons/NavigateNext";

ui/components/NotificationsTable.tsx

@@ -12,8 +12,8 @@ import DataTable, {
 } from "./DataTable";
 import Flex from "./Flex";
 import KubeStatusIndicator from "./KubeStatusIndicator";
-import MessageBox from "./MessageBox";
 import Link from "./Link";
+import MessageBox from "./MessageBox";
 import Spacer from "./Spacer";
 import Text from "./Text";
 

ui/components/Policies/PolicyList/PolicyTable.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from "react";
 import { useFeatureFlags } from "../../../hooks/featureflags";
+import { PolicyObj as Policy } from "../../../lib/api/core/core.pb";
 import { formatURL } from "../../../lib/nav";
 import { V2Routes } from "../../../lib/types";
 import DataTable, { filterConfig } from "../../DataTable";
 import Link from "../../Link";
 import Text from "../../Text";
+import Timestamp from "../../Timestamp";
 import PolicyMode from "../Utils/PolicyMode";
 import Severity from "../Utils/Severity";
-import { PolicyObj as Policy } from "../../../lib/api/core/core.pb";
-import Timestamp from "../../Timestamp";
 
 interface CustomPolicy extends Policy {
   audit?: string;

ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import remarkGfm from "remark-gfm";
-import { PolicyValidation } from "../../../lib/api/core/core.pb";
-import Flex from "../../Flex";
-import Text from "../../Text";
-import Timestamp from "../../Timestamp";
 
 import { AppContext } from "../../../contexts/AppContext";
 import { useFeatureFlags } from "../../../hooks/featureflags";
+import { PolicyValidation } from "../../../lib/api/core/core.pb";
 import { Kind } from "../../../lib/api/core/types.pb";
 import { formatURL } from "../../../lib/nav";
 import { FluxObject } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
 import ClusterDashboardLink from "../../ClusterDashboardLink";
+import Flex from "../../Flex";
 import Link from "../../Link";
+import Text from "../../Text";
+import Timestamp from "../../Timestamp";
 import HeaderRows, { RowItem } from "../Utils/HeaderRows";
 import { MarkdownEditor } from "../Utils/MarkdownEditor";
 import Parameters from "../Utils/Parameters";

ui/components/Policies/PolicyViolations/PolicyViolationPage.tsx

@@ -2,13 +2,13 @@ import React from "react";
 
 import styled from "styled-components";
 import { useGetPolicyValidationDetails } from "../../../hooks/policyViolations";
+import { PolicyValidation } from "../../../lib/api/core/core.pb";
 import { Kind } from "../../../lib/api/core/types.pb";
 import { formatURL } from "../../../lib/nav";
+import { FluxObject } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
 import Page from "../../Page";
 
-import { PolicyValidation } from "../../../lib/api/core/core.pb";
-import { FluxObject } from "../../../lib/objects";
 import { ViolationDetails } from "./PolicyViolationDetails";
 
 const getPath = (kind: string, violation?: PolicyValidation) => {

ui/components/Policies/PolicyViolations/Table/index.tsx

@@ -1,16 +1,16 @@
 import React from "react";
+import { useFeatureFlags } from "../../../../hooks/featureflags";
 import { useListPolicyValidations } from "../../../../hooks/policyViolations";
 import { ListPolicyValidationsRequest } from "../../../../lib/api/core/core.pb";
+import { Kind } from "../../../../lib/api/core/types.pb";
 import { formatURL } from "../../../../lib/nav";
 import { V2Routes } from "../../../../lib/types";
 import DataTable, { Field, filterConfig } from "../../../DataTable";
 import Link from "../../../Link";
 import RequestStateHandler from "../../../RequestStateHandler";
+import Text from "../../../Text";
 import Timestamp from "../../../Timestamp";
 import Severity from "../../Utils/Severity";
-import { useFeatureFlags } from "../../../../hooks/featureflags";
-import { Kind } from "../../../../lib/api/core/types.pb";
-import Text from "../../../Text";
 
 interface Props {
   req: ListPolicyValidationsRequest;

ui/components/Policies/__tests__/Severity.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import React from "react";
-import Severity from "../Utils/Severity";
 import { withTheme } from "../../../lib/test-utils";
+import Severity from "../Utils/Severity";
 
 function checkSeverity(severity: string) {
   render(withTheme(<Severity severity={severity} />));

ui/components/__tests__/Link.test.tsx

@@ -1,6 +1,6 @@
+import { render } from "@testing-library/react";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
-import { render } from "@testing-library/react";
 import { withTheme } from "../../lib/test-utils";
 import Link from "../Link";
 

ui/contexts/CoreClientContext.tsx

@@ -2,8 +2,8 @@ import qs from "query-string";
 import * as React from "react";
 import { useQuery } from "react-query";
 import { Core, GetFeatureFlagsResponse } from "../lib/api/core/core.pb";
-import { RequestError } from "../lib/types";
 import { TokenRefreshWrapper } from "../lib/requests";
+import { RequestError } from "../lib/types";
 import { AuthRoutes } from "./AuthContext";
 
 type Props = {

ui/hooks/Policies.ts

@@ -2,13 +2,13 @@ import { useContext } from "react";
 import { useQuery } from "react-query";
 
 import { CoreClientContext } from "../contexts/CoreClientContext";
-import { ReactQueryOptions, RequestError } from "../lib/types";
 import {
   ListPoliciesRequest,
   ListPoliciesResponse,
   GetPolicyRequest,
   GetPolicyResponse,
 } from "../lib/api/core/core.pb";
+import { ReactQueryOptions, RequestError } from "../lib/types";
 
 const LIST_POLICIES_QUERY_KEY = "list-policy";
 

ui/hooks/policyViolations.ts

@@ -2,13 +2,13 @@ import { useContext } from "react";
 import { useQuery } from "react-query";
 
 import { CoreClientContext } from "../contexts/CoreClientContext";
-import { ReactQueryOptions, RequestError } from "../lib/types";
 import {
   GetPolicyValidationRequest,
   GetPolicyValidationResponse,
   ListPolicyValidationsRequest,
   ListPolicyValidationsResponse,
 } from "../lib/api/core/core.pb";
+import { ReactQueryOptions, RequestError } from "../lib/types";
 
 const LIST_POLICY_VIOLATION_QUERY_KEY = "list-policy-violations";
 

ui/lib/__tests__/graph.test.ts

@@ -1,9 +1,9 @@
 import _ from "lodash";
+import { pod, rs } from "../__fixtures__/graph";
 import { Core, GetChildObjectsResponse } from "../api/core/core.pb";
 import { Kind } from "../api/core/types.pb";
 import { getChildren } from "../graph";
 import { createCoreMockClient } from "../test-utils";
-import { pod, rs } from "../__fixtures__/graph";
 
 describe("graph lib", () => {
   let client: typeof Core;

ui/lib/__tests__/objects.test.ts

@@ -1,5 +1,5 @@
-import { Kind } from "../api/core/types.pb";
 import { pod, rs } from "../__fixtures__/graph";
+import { Kind } from "../api/core/types.pb";
 import {
   Bucket,
   FluxObject,

ui/lib/objects.ts

@@ -8,8 +8,8 @@ import {
   Interval,
   Kind,
   NamespacedObjectReference,
-  Object as ResponseObject,
   ObjectRef,
+  Object as ResponseObject,
 } from "./api/core/types.pb";
 export type Automation = HelmRelease | Kustomization;
 export type Source =
@@ -342,7 +342,7 @@ export class ImagePolicy extends ImageUpdateAutomation {
     super(response);
   }
   get imagePolicy(): ImgPolicy {
-    const { policy } = this.obj?.spec;
+    const { policy } = this.obj?.spec || {};
     const [type] = Object.keys(policy);
     if (type) {
       const [val] = Object.values(policy[type]);

ui/pages/Error.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
-import Content from "../components/Page";
 import Flex from "../components/Flex";
+import Content from "../components/Page";
 
 type Props = {
   className?: string;

ui/pages/v2/UserInfo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { Auth } from "../../contexts/AuthContext";
 import Page from "../../components/Page";
 import UserGroupsTable from "../../components/UserGroupsTable";
+import { Auth } from "../../contexts/AuthContext";
 type Props = {
   className?: string;
 };