Use Knip for detecting dead code (#3426)

web-app/knip.config.ts

@@ -0,0 +1,26 @@
+import type { KnipConfig } from "knip";
+
+export default {
+  entry: ["src/**/{index,main}.{ts,tsx}", "e2e/**/*.ts", "test/**/*.ts"],
+  project: [
+    "src/**/*.{ts,tsx}",
+    "!src/api/**/*",
+    "e2e/**/*.{ts,tsx}",
+    "test/**/*.ts",
+  ],
+  rules: {
+    binaries: "error",
+    classMembers: "error",
+    dependencies: "error",
+    devDependencies: "off",
+    duplicates: "error",
+    files: "error",
+    nsExports: "error",
+    nsTypes: "error",
+    unlisted: "error",
+    unresolved: "error",
+    types: "error",
+    exports: "error",
+    enumMembers: "off",
+  },
+} satisfies KnipConfig;

web-app/package.json

@@ -6,6 +6,8 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
+    "clsx": "^2.1.1",
+    "http-status-codes": "^2.3.0",
     "kbar": "^0.1.0-beta.45",
     "local-storage-fallback": "^4.1.2",
     "lodash": "^4.17.21",
@@ -36,7 +38,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "playwright": "PORT=5005 USE_BABEL_PLUGIN_ISTANBUL=1 react-app-rewired start",
-    "find-deadcode": "ts-prune -s consoleApi.ts | sh -c '(! grep -v \"used in module\")'"
+    "find-deadcode": "knip",
+    "format": "prettier . --write --log-level warn"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -60,6 +63,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@playwright/test": "^1.45.2",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
     "@types/luxon": "^3.4.2",
     "@types/node": "20.14.11",
@@ -75,14 +79,14 @@
     "@types/webpack-env": "^1.18.5",
     "babel-plugin-istanbul": "^6.1.1",
     "customize-cra": "^1.0.0",
+    "knip": "^5.27.2",
     "minio": "^8.0.1",
     "nyc": "^15.1.0",
     "prettier": "3.3.3",
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "testcafe": "3.6.2",
-    "ts-prune": "^0.10.3",
     "typescript": "^5.5.3"
   },
   "resolutions": {

web-app/src/common/types.ts

@@ -41,7 +41,7 @@ export interface IBytesCalc {
   unit: string;
 }
 
-export interface IEmbeddedCustomButton {
+interface IEmbeddedCustomButton {
   backgroundColor: string;
   textColor: string;
   hoverColor: string;
@@ -52,7 +52,7 @@ export interface IEmbeddedCustomButton {
   disabledText: string;
 }
 
-export interface IEmbeddedCustomTable {
+interface IEmbeddedCustomTable {
   border: string;
   disabledBorder: string;
   disabledBG: string;
@@ -61,14 +61,14 @@ export interface IEmbeddedCustomTable {
   hoverColor: string;
 }
 
-export interface IEmbeddedInputBox {
+interface IEmbeddedInputBox {
   border: string;
   hoverBorder: string;
   textColor: string;
   backgroundColor: string;
 }
 
-export interface IEmbeddedSwitch {
+interface IEmbeddedSwitch {
   switchBackground: string;
   bulletBorderColor: string;
   bulletBGColor: string;

web-app/src/common/utils.ts

@@ -32,8 +32,8 @@ export const units = [
   "ZiB",
   "YiB",
 ];
-export const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
-export const k8sCalcUnits = ["B", ...k8sUnits];
+const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
+const k8sCalcUnits = ["B", ...k8sUnits];
 
 export const niceBytes = (x: string, showK8sUnits: boolean = false) => {
   let n = parseInt(x, 10) || 0;
@@ -97,7 +97,7 @@ export const getBytes = (
 };
 
 //getBytesNumber, converts from a value and a unit from units array to bytes
-export const getBytesNumber = (
+const getBytesNumber = (
   value: string,
   unit: string,
   fromk8s: boolean = false,

web-app/src/config.ts

@@ -16,7 +16,7 @@
 
 import { ApplicationLogoProps } from "mds";
 
-export const MinIOPlan =
+const MinIOPlan =
   (
     document.head.querySelector(
       "[name~=minio-license][content]",

web-app/src/index.tsx

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import * as serviceWorker from "./serviceWorker";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { store } from "./store";
@@ -35,8 +34,3 @@ root.render(
     </Provider>
   </React.StrictMode>,
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

web-app/src/screens/Console/Buckets/BucketDetails/bucketDetailsSlice.ts

@@ -18,7 +18,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { AppState } from "../../../../store";
 import { Bucket } from "api/consoleApi";
 
-export interface BucketDetailsState {
+interface BucketDetailsState {
   selectedTab: string;
   loadingBucket: boolean;
   bucketInfo: Bucket | null;
@@ -30,7 +30,7 @@ const initialState: BucketDetailsState = {
   bucketInfo: null,
 };
 
-export const bucketDetailsSlice = createSlice({
+const bucketDetailsSlice = createSlice({
   name: "bucketDetails",
   initialState,
   reducers: {
@@ -46,7 +46,7 @@ export const bucketDetailsSlice = createSlice({
   },
 });
 
-export const { setBucketDetailsTab, setBucketInfo, setBucketDetailsLoad } =
+export const { setBucketInfo, setBucketDetailsLoad } =
   bucketDetailsSlice.actions;
 
 export const selBucketDetailsLoading = (state: AppState) =>

web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts

@@ -18,7 +18,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { addBucketAsync } from "./addBucketThunks";
 import { ObjectRetentionMode } from "api/consoleApi";
 
-export interface AddBucketState {
+interface AddBucketState {
   loading: boolean;
   isDirty: boolean;
   invalidFields: string[];
@@ -58,7 +58,7 @@ const initialState: AddBucketState = {
   excludedPrefixes: "",
 };
 
-export const addBucketsSlice = createSlice({
+const addBucketsSlice = createSlice({
   name: "addBuckets",
   initialState,
   reducers: {

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsHelpers.tsx

@@ -21,7 +21,7 @@ import { displayFileIconName } from "./utils";
 
 // Functions
 
-export const displayParsedDate = (object: BucketObjectItem) => {
+const displayParsedDate = (object: BucketObjectItem) => {
   if (object.name.endsWith("/")) {
     return "";
   }
@@ -41,14 +41,14 @@ export const displayParsedDate = (object: BucketObjectItem) => {
   return objectTime.toFormat("ccc, LLL dd yyyy HH:mm (ZZZZ)");
 };
 
-export const displayNiceBytes = (object: BucketObjectItem) => {
+const displayNiceBytes = (object: BucketObjectItem) => {
   if (object.name.endsWith("/") || !object.size) {
     return "-";
   }
   return niceBytes(String(object.size));
 };
 
-export const displayDeleteFlag = (state: boolean) => {
+const displayDeleteFlag = (state: boolean) => {
   return state ? "Yes" : "No";
 };
 

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/types.tsx

@@ -45,12 +45,12 @@ export interface WebsocketResponse {
   bucketName?: string;
 }
 
-export interface WebsocketErrorResponse {
+interface WebsocketErrorResponse {
   Code: number;
   APIError: ApiError;
 }
 
-export interface ObjectResponse {
+interface ObjectResponse {
   name: string;
   last_modified: string;
   size: number;

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx

@@ -42,7 +42,7 @@ interface IExtToIcon {
   extensions: string[];
 }
 
-export const extensionToIcon: IExtToIcon[] = [
+const extensionToIcon: IExtToIcon[] = [
   {
     icon: <FileVideoIcon />,
     extensions: ["mp4", "mov", "avi", "mpeg", "mpg"],

web-app/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts

@@ -16,7 +16,7 @@
 
 import { BucketObjectItem } from "./ListObjects/types";
 import { removeTrace } from "../../../ObjectBrowser/transferManager";
-import store from "../../../../../store";
+import { store } from "../../../../../store";
 import { ContentType, PermissionResource } from "api/consoleApi";
 import { api } from "../../../../../api";
 import { setErrorSnackMessage } from "../../../../../systemSlice";
@@ -199,7 +199,7 @@ class BrowserDownload {
 }
 
 export type AllowedPreviews = "image" | "pdf" | "audio" | "video" | "none";
-export const contentTypePreview = (contentType: string): AllowedPreviews => {
+const contentTypePreview = (contentType: string): AllowedPreviews => {
   if (contentType) {
     const mimeObjectType = (contentType || "").toLowerCase();
 
@@ -221,7 +221,7 @@ export const contentTypePreview = (contentType: string): AllowedPreviews => {
 };
 
 // Review file extension by name & returns the type of preview browser that can be used
-export const extensionPreview = (fileName: string): AllowedPreviews => {
+const extensionPreview = (fileName: string): AllowedPreviews => {
   const imageExtensions = [
     "jif",
     "jfif",

web-app/src/screens/Console/Buckets/types.tsx

@@ -63,12 +63,12 @@ export interface LifeCycleItem {
   status?: string;
 }
 
-export interface MultiBucketResult {
+interface MultiBucketResult {
   bucketName: string;
   error?: string;
 }
 
-export interface MultiBucketResult {
+interface MultiBucketResult {
   results: MultiBucketResult[];
 }
 

web-app/src/screens/Console/Common/CredentialsPrompt/types.ts

@@ -22,7 +22,7 @@ export interface NewServiceAccount {
   url?: string;
 }
 
-export interface ConsoleSA {
+interface ConsoleSA {
   accessKey: string;
   secretKey: string;
   url: string;

web-app/src/screens/Console/Configurations/types.ts

@@ -17,7 +17,7 @@
 import { SelectorTypes } from "../../../common/types";
 import { EnvOverride } from "../../../api/consoleApi";
 
-export type KVFieldType =
+type KVFieldType =
   | "string"
   | "password"
   | "number"

web-app/src/screens/Console/Dashboard/BasicDashboard/StatusCountCard.tsx

@@ -108,7 +108,7 @@ const StatusCountBase = styled.div(({ theme }) => ({
   },
 }));
 
-export const StatusCountCard = ({
+const StatusCountCard = ({
   onlineCount = 0,
   offlineCount = 0,
   icon = null,

web-app/src/screens/Console/Dashboard/CommonCard.tsx

@@ -21,7 +21,7 @@ import { Box } from "mds";
 import { Link } from "react-router-dom";
 import { widgetCommon } from "../Common/FormComponents/common/styleLibrary";
 
-export interface ISubInterface {
+interface ISubInterface {
   message: string;
   fontWeight?: "normal" | "bold";
 }

web-app/src/screens/Console/Dashboard/Prometheus/Widgets/UptimeActivityRenderer.tsx

@@ -18,7 +18,7 @@ import React from "react";
 import { Box } from "mds";
 import TimeStatItem from "../../TimeStatItem";
 
-export type SimpleWidgetRenderProps = {
+type SimpleWidgetRenderProps = {
   valueToRender?: any;
   loading?: boolean;
   title?: any;

web-app/src/screens/Console/Dashboard/Prometheus/Widgets/types.ts

@@ -36,7 +36,7 @@ export interface IPieChartConfiguration {
   strokeWidth?: number;
 }
 
-export interface ISinglePieConfiguration {
+interface ISinglePieConfiguration {
   colorList: string[];
   startAngle?: number;
   endAngle?: number;

web-app/src/screens/Console/Dashboard/dashboardSlice.ts

@@ -20,7 +20,7 @@ import { IDashboardPanel } from "./Prometheus/types";
 import { getUsageAsync } from "./dashboardThunks";
 import { AdminInfoResponse } from "api/consoleApi";
 
-export interface DashboardState {
+interface DashboardState {
   zoom: zoomState;
   usage: AdminInfoResponse | null;
   status: "idle" | "loading" | "failed";
@@ -36,7 +36,7 @@ const initialState: DashboardState = {
   usage: null,
   widgetLoadVersion: 0,
 };
-export const dashboardSlice = createSlice({
+const dashboardSlice = createSlice({
   name: "dashboard",
   initialState,
   reducers: {

web-app/src/screens/Console/EventDestinations/ConfTargetGeneric.tsx

@@ -37,11 +37,7 @@ interface IConfGenericProps {
 
 // Function to get defined values,
 //we make this because the backed sometimes don't return all the keys when there is an initial configuration
-export const valueDef = (
-  key: string,
-  type: string,
-  defaults: IElementValue[],
-) => {
+const valueDef = (key: string, type: string, defaults: IElementValue[]) => {
   let defValue = type === "on|off" ? "off" : "";
 
   if (defaults.length > 0) {

web-app/src/screens/Console/EventDestinations/destinationsSlice.ts

@@ -16,15 +16,15 @@
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-export interface DestinationState {
+interface DestinationState {
   loading: boolean;
 }
 
 const initialState: DestinationState = {
   loading: true,
 };
 
-export const destinationSlice = createSlice({
+const destinationSlice = createSlice({
   name: "destination",
   initialState,
   reducers: {