[Feature]: Update git hooks and package json

.pre-commit-config.yaml

@@ -17,3 +17,21 @@ repos:
     rev: v5.0.0
     hooks:
       - id: end-of-file-fixer
+
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: ''
+    hooks:
+      - id: eslint
+        name: ESLint
+        entry: eslint --fix --config frontend/.eslintrc --ignore-path frontend/.eslintignore
+        language: node
+        pass_filenames: false
+        cwd: "frontend/"
+        additional_dependencies:
+          - eslint@8.31.0
+          - eslint-config-prettier@8.10.0
+          - eslint-plugin-i18n@2.4.0
+          - eslint-plugin-prettier@4.2.1
+          - eslint-plugin-simple-import-sort@10.0.0
+          - '@typescript-eslint/eslint-plugin@5.48.1'
+          - '@typescript-eslint/parser@5.48.1'

frontend/.eslintignore

@@ -5,6 +5,8 @@ src/locale
 src/types
 src/setupProxy.js
 webpack/**
+webpack/env.js
+webpack/prod.js
 public
 staticServer.js
 webpack.config.js

frontend/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "repository": "git@gitlab.com:dstackai/dstackai-website.git",
   "author": "Oleg Vavilov",
-  "license": "MIT",
+  "license": "Apache 2.0",
   "private": true,
   "scripts": {
     "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",

frontend/src/components/FileUploader/FileEntry/index.tsx

@@ -22,6 +22,7 @@ export const FileEntry: React.FC<IProps> = ({ file, showImage = false, truncateL
     };
     reader.readAsDataURL(file);
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const ext = file.name.split('.').pop()!;
     const displayFileName =
         file.name.length - ext.length - 1 > truncateLength ? `${file.name.slice(0, truncateLength)}... .${ext}` : file.name;

frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { DISCORD_URL, QUICK_START_URL, TALLY_FORM_ID } from 'consts';
+import {
+    DISCORD_URL,
+    QUICK_START_URL,
+    // TALLY_FORM_ID
+} from 'consts';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { goToUrl } from 'libs';
 import { useGetRunsQuery } from 'services/run';
@@ -60,6 +64,7 @@ export const useTutorials = () => {
         dispatch(updateTutorialPanelState({ billingCompleted: true }));
     }, []);
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     const startConfigCliTutorial = useCallback(() => {}, [billingUrl]);
 
     const finishConfigCliTutorial = useCallback(() => {

frontend/src/libs/fetchBaseQueryHeaders.ts

@@ -15,9 +15,4 @@ function baseQueryHeaders(headers: Headers, { getState }: Pick<BaseQueryApi, 'ge
     return headers;
 }
 
-export function unauthorizedQueryHeaders(headers: Headers, { getState }: Pick<BaseQueryApi, 'getState'>): Headers {
-    headers.set('X-API-VERSION', 'latest');
-    return headers;
-}
-
 export default baseQueryHeaders;

frontend/src/libs/serverErrors.ts

@@ -36,6 +36,7 @@ export function isResponseServerError(formErrors: unknown): formErrors is Respon
     );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getServerError(error: any): string {
     let errorText = error?.error;
 

frontend/src/pages/Runs/Details/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, /*useNavigate,*/ useParams } from 'react-router-dom';
 import Button from '@cloudscape-design/components/button';
 
 import { ContentLayout, DetailsHeader, Tabs } from 'components';
@@ -10,7 +10,11 @@ import { getServerError, riseRouterException } from 'libs';
 import { ROUTES } from 'routes';
 import { useDeleteRunsMutation, useGetRunQuery, useStopRunsMutation } from 'services/run';
 
-import { isAvailableAbortingForRun, isAvailableDeletingForRun, isAvailableStoppingForRun } from '../utils';
+import {
+    isAvailableAbortingForRun,
+    isAvailableStoppingForRun,
+    // isAvailableDeletingForRun,
+} from '../utils';
 
 import styles from './styles.module.scss';
 
@@ -21,7 +25,7 @@ enum CodeTab {
 
 export const RunDetailsPage: React.FC = () => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
+    // const navigate = useNavigate();
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
     const paramRunId = params.runId ?? '';
@@ -41,7 +45,7 @@ export const RunDetailsPage: React.FC = () => {
     }, [runError]);
 
     const [stopRun, { isLoading: isStopping }] = useStopRunsMutation();
-    const [deleteRun, { isLoading: isDeleting }] = useDeleteRunsMutation();
+    const [, /* deleteRun ,*/ { isLoading: isDeleting }] = useDeleteRunsMutation();
 
     useBreadcrumbs([
         {
@@ -100,30 +104,30 @@ export const RunDetailsPage: React.FC = () => {
             });
     };
 
-    const deleteClickHandle = () => {
-        if (!runData) {
-            return;
-        }
-
-        deleteRun({
-            project_name: paramProjectName,
-            runs_names: [runData.run_spec.run_name],
-        })
-            .unwrap()
-            .then(() => {
-                navigate(ROUTES.RUNS.LIST);
-            })
-            .catch((error) => {
-                pushNotification({
-                    type: 'error',
-                    content: t('common.server_error', { error: getServerError(error) }),
-                });
-            });
-    };
+    // const deleteClickHandle = () => {
+    //     if (!runData) {
+    //         return;
+    //     }
+    //
+    //     deleteRun({
+    //         project_name: paramProjectName,
+    //         runs_names: [runData.run_spec.run_name],
+    //     })
+    //         .unwrap()
+    //         .then(() => {
+    //             navigate(ROUTES.RUNS.LIST);
+    //         })
+    //         .catch((error) => {
+    //             pushNotification({
+    //                 type: 'error',
+    //                 content: t('common.server_error', { error: getServerError(error) }),
+    //             });
+    //         });
+    // };
 
     const isDisabledAbortButton = !runData || !isAvailableAbortingForRun(runData.status) || isStopping || isDeleting;
     const isDisabledStopButton = !runData || !isAvailableStoppingForRun(runData.status) || isStopping || isDeleting;
-    const isDisabledDeleteButton = !runData || !isAvailableDeletingForRun(runData.status) || isStopping || isDeleting;
+    // const isDisabledDeleteButton = !runData || !isAvailableDeletingForRun(runData.status) || isStopping || isDeleting;
 
     return (
         <div className={styles.page}>

frontend/src/pages/Runs/List/index.tsx

@@ -25,7 +25,7 @@ import styles from './styles.module.scss';
 
 export const RunList: React.FC = () => {
     const { t } = useTranslation();
-    const [searchParams, setSearchParams] = useSearchParams();
+    const [, setSearchParams] = useSearchParams();
     const [preferences] = useRunListPreferences();
 
     useBreadcrumbs([
@@ -50,7 +50,10 @@ export const RunList: React.FC = () => {
 
     const { stopRuns, isStopping } = useStopRuns();
     const { abortRuns, isAborting } = useAbortRuns();
-    const { deleteRuns, isDeleting } = useDeleteRuns();
+    const {
+        // deleteRuns,
+        isDeleting,
+    } = useDeleteRuns();
 
     const { columns } = useColumnsDefinitions();
 
@@ -75,7 +78,11 @@ export const RunList: React.FC = () => {
 
     const { selectedItems } = collectionProps;
 
-    const { isDisabledAbortButton, isDisabledStopButton, isDisabledDeleteButton } = useDisabledStatesForButtons({
+    const {
+        isDisabledAbortButton,
+        isDisabledStopButton,
+        // isDisabledDeleteButton
+    } = useDisabledStatesForButtons({
         selectedRuns: selectedItems,
         isStopping,
         isAborting,
@@ -94,11 +101,11 @@ export const RunList: React.FC = () => {
         stopRuns([...selectedItems]).then(() => actions.setSelectedItems([]));
     };
 
-    const deleteClickHandle = () => {
-        if (!selectedItems?.length) return;
-
-        deleteRuns([...selectedItems]).catch(console.log);
-    };
+    // const deleteClickHandle = () => {
+    //     if (!selectedItems?.length) return;
+    //
+    //     deleteRuns([...selectedItems]).catch(console.log);
+    // };
 
     return (
         <Table

frontend/src/pages/User/Details/Billing/index.tsx

@@ -12,7 +12,7 @@ import { ROUTES } from 'routes';
 import {
     useGetUserBillingInfoQuery,
     useUserBillingCheckoutSessionMutation,
-    useUserBillingPortalSessionMutation,
+    // useUserBillingPortalSessionMutation,
 } from 'services/user';
 import { GlobalUserRole } from 'types';
 
@@ -37,7 +37,7 @@ export const Billing: React.FC = () => {
 
     const { data, isLoading } = useGetUserBillingInfoQuery({ username: paramUserName });
     const [billingCheckout, { isLoading: isLoadingBillingCheckout }] = useUserBillingCheckoutSessionMutation();
-    const [billingPortalSession, { isLoading: isLoadingBillingPortalSession }] = useUserBillingPortalSessionMutation();
+    // const [billingPortalSession, { isLoading: isLoadingBillingPortalSession }] = useUserBillingPortalSessionMutation();
 
     useBreadcrumbs([
         {
@@ -81,20 +81,21 @@ export const Billing: React.FC = () => {
         setShowPaymentModal(true);
     };
 
-    const editPaymentMethod = () => {
-        billingPortalSession({
-            username: paramUserName,
-        })
-            .unwrap()
-            .then((data) => goToUrl(data.url))
-            .catch((error) => {
-                pushNotification({
-                    type: 'error',
-                    content: t('common.server_error', { error: getServerError(error) }),
-                });
-            })
-            .finally(closeModal);
-    };
+    // const editPaymentMethod = () => {
+    //     billingPortalSession({
+    //         username: paramUserName,
+    //     })
+    //         .unwrap()
+    //         .then((data) => goToUrl(data.url))
+    //         .catch((error) => {
+    //             pushNotification({
+    //                 type: 'error',
+    //                 content: t('common.server_error', { error: getServerError(error) }),
+    //             });
+    //         })
+    //         .finally(closeModal);
+    // };
+
     const closeModal = () => {
         setShowPaymentModal(false);
     };

frontend/src/pages/User/Details/index.tsx

@@ -5,12 +5,12 @@ import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { ConfirmationDialog, ContentLayout, SpaceBetween, Tabs } from 'components';
 import { DetailsHeader } from 'components';
 
-import { useNotifications, usePermissionGuard } from 'hooks';
+import { useNotifications /* usePermissionGuard*/ } from 'hooks';
 import { getServerError, riseRouterException } from 'libs';
 import { ROUTES } from 'routes';
 import { useDeleteUsersMutation, useGetUserQuery } from 'services/user';
 
-import { GlobalUserRole } from '../../../types';
+// import { GlobalUserRole } from '../../../types';
 import { UserDetailsTabTypeEnum } from './types';
 
 export { Settings as UserSettings } from './Settings';
@@ -24,9 +24,9 @@ export const UserDetails: React.FC = () => {
     const paramUserName = params.userName ?? '';
     const navigate = useNavigate();
     const { error: userError } = useGetUserQuery({ name: paramUserName });
-    const [deleteUsers, { isLoading: isDeleting }] = useDeleteUsersMutation();
+    const [deleteUsers /*, { isLoading: isDeleting }*/] = useDeleteUsersMutation();
     const [pushNotification] = useNotifications();
-    const [isAvailableDeleteUser] = usePermissionGuard({ allowedGlobalRoles: [GlobalUserRole.ADMIN] });
+    // const [isAvailableDeleteUser] = usePermissionGuard({ allowedGlobalRoles: [GlobalUserRole.ADMIN] });
 
     useEffect(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

frontend/src/pages/Volumes/List/hooks.tsx

@@ -184,9 +184,9 @@ const getVolumeFinised = (volume: IVolume): string => {
     if (!volume.deleted_at && volume.status != 'failed') {
         return '-';
     }
-    let finished = volume.last_processed_at
+    let finished = volume.last_processed_at;
     if (volume.deleted_at) {
-        finished = volume.deleted_at
+        finished = volume.deleted_at;
     }
     return format(new Date(finished), DATE_TIME_FORMAT);
 };

frontend/src/services/run.ts

@@ -1,6 +1,5 @@
 import { sortBy as _sortBy } from 'lodash';
 import { API } from 'api';
-import { BaseQueryMeta, BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 import fetchBaseQueryHeaders from 'libs/fetchBaseQueryHeaders';

frontend/webpack/env.js

@@ -1,8 +1,8 @@
-const {join} = require('path');
+const { join } = require('path');
 
-const apiURLs = '/api'
+const apiURLs = '/api';
 
-const publicURLs = '/'
+const publicURLs = '/';
 
 const environment = process.env.NODE_ENV || 'production';
 const isProd = environment === 'production';
@@ -17,10 +17,10 @@ const apiUrl = process.env.API_URL || apiURLs;
 const publicUrl = process.env.PUBLIC_URL || publicURLs;
 const uiVersion = process.env.UI_VERSION === 'sky' ? 'sky' : 'enterprise';
 
-
-const title = uiVersion === 'enterprise' ? "dstack" : "dstack Sky";
-const description = "Get GPUs at the best prices and availability from a wide range of providers. No cloud " +
-    "account of your own is required.\n";
+const title = uiVersion === 'enterprise' ? 'dstack' : 'dstack Sky';
+const description =
+    'Get GPUs at the best prices and availability from a wide range of providers. No cloud ' +
+    'account of your own is required.\n';
 
 module.exports = {
     environment,
@@ -37,4 +37,4 @@ module.exports = {
     title,
     description,
     uiVersion,
-}
+};

frontend/webpack/prod.js

@@ -1,27 +1,26 @@
 // production config
-const {join} = require('path');
-const {buildDir, publicPath, srcDir} = require('./env');
+const { join } = require('path');
+const { buildDir, publicPath, srcDir } = require('./env');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
-
 module.exports = {
-    mode: "production",
+    mode: 'production',
     entry: join(srcDir, 'index.tsx'),
     output: {
         path: buildDir,
-        filename: "[name]-[contenthash].js",
+        filename: '[name]-[contenthash].js',
         publicPath: publicPath,
         clean: true,
     },
-    devtool: "source-map",
+    devtool: 'source-map',
     plugins: [
         new MiniCssExtractPlugin({
-            filename: "[name]-[contenthash].css",
+            filename: '[name]-[contenthash].css',
         }),
     ],
     optimization: {
         minimize: true,
-        minimizer: [new CssMinimizerPlugin()]
+        minimizer: [new CssMinimizerPlugin()],
     },
 };