Fixed few ESLint issues

.github/workflows/prettier.yaml

@@ -1,13 +1,21 @@
 name: Continuous Integration
 
-on: pull_request
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
   prettier:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Prettify code
-        uses: creyD/[email protected]
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Run ESLint
+        run: pnpm run lint

package.json

@@ -7,7 +7,7 @@
 		"dev": "vite --host --port 3001",
 		"build": "tsc && vite build",
 		"build:test": "tsc && vite build --mode test",
-		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --quiet",
 		"start": "vite preview --host --port 3002",
 		"tsCheck": "tsc --noEmit",
 		"pq": "pretty-quick",

src/@types/parseable/api/dashboards.ts

@@ -44,11 +44,11 @@ export type TickConfig = {
 export type Visualization = {
 	visualization_type: VizType;
 	size: TileSize;
-	circular_chart_config?: null | { name_key: string; value_key: string } | {};
+	circular_chart_config?: null | { name_key: string; value_key: string } | object;
 	graph_config?:
 		| null
 		| { x_key: string; y_keys: string[]; type: CommonGraphBasicType; orientation: CommonGraphOrientationType }
-		| {};
+		| object;
 	color_config: ColorConfig[];
 	tick_config: TickConfig[];
 };
@@ -116,9 +116,9 @@ export type BarChartBasicTypes = 'default' | 'stacked' | 'percent';
 export type AreaChartBasicTypes = 'default' | 'stacked' | 'percent';
 
 // orientation
-export type BarChartOrientationType = 'horizontal' | 'vertical'
-export type AreaChartOrientationType =  'horizontal' | 'vertical'
-export type LineChartOrientationType =  'horizontal' | 'vertical'
+export type BarChartOrientationType = 'horizontal' | 'vertical';
+export type AreaChartOrientationType = 'horizontal' | 'vertical';
+export type LineChartOrientationType = 'horizontal' | 'vertical';
 
 export type BarChartProps = {
 	data: TileData;
@@ -137,7 +137,7 @@ export type LineChartProps = {
 	xUnit: UnitType;
 	yUnit: UnitType;
 	orientation: LineChartOrientationType;
-}
+};
 
 export type AreaChartProps = {
 	data: TileData;

src/@types/parseable/api/stream.ts

@@ -53,7 +53,7 @@ export type HotTierConfig =
 			available_size: string;
 			oldest_date_time_entry: string;
 	  }
-	| {};
+	| object;
 
 export type UpdateHotTierConfig = {
 	size: string;

src/api/auth.ts

@@ -13,4 +13,4 @@ export const loginIn = (username: string, password: string) => {
 
 export const logOut = () => {
 	return Axios().get(LOGOUT_URL);
-}
+};

src/api/constants.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 
 const API_V1 = 'api/v1';
 
-export type Params = Record<string, string> | null | {} | undefined;
+export type Params = Record<string, string> | null | object | undefined;
 
 const parseParamsToQueryString = (params: Params) => {
 	if (_.isEmpty(params) || _.isNil(params) || !params) return '';
@@ -20,7 +20,7 @@ const parseParamsToQueryString = (params: Params) => {
 // Streams Management
 export const LOG_STREAM_LIST_URL = `${API_V1}/logstream`;
 export const LOG_STREAMS_SCHEMA_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/schema`;
-export const LOG_QUERY_URL = (params?: Params, resourcePath: string = 'query') =>
+export const LOG_QUERY_URL = (params?: Params, resourcePath = 'query') =>
 	`${API_V1}/${resourcePath}` + parseParamsToQueryString(params);
 export const LOG_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/alert`;
 export const LIST_SAVED_FILTERS_URL = `${API_V1}/filters`;

src/api/query.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { Axios } from './axios';
 import { LOG_QUERY_URL } from './constants';
 import { Log, LogsQuery, LogsResponseWithHeaders } from '@/@types/parseable/api/query';

src/assets/customLoader/ParseableAnimate.tsx

@@ -57,4 +57,6 @@ const ParseableAnimated: MantineLoaderComponent = forwardRef(() => (
 	</svg>
 ));
 
+ParseableAnimated.displayName = 'ParsableAnimated';
+
 export default ParseableAnimated;

src/components/Header/RefreshInterval.tsx

@@ -12,7 +12,7 @@ import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/Ap
 const { setRefreshInterval, getCleanStoreForRefetch } = logsStoreReducers;
 const { syncTimeRange } = appStoreReducers;
 const RefreshInterval: FC = () => {
-	const [, setAppStore] = useAppStore((_store) => null);
+	const [, setAppStore] = useAppStore(() => null);
 	const [refreshInterval, setLogsStore] = useLogsStore((store) => store.refreshInterval);
 	const Icon = useMemo(() => (refreshInterval ? IconRefresh : IconRefreshOff), [refreshInterval]);
 	const timerRef = useRef<NodeJS.Timer | null>(null);

src/components/Header/RefreshNow.tsx

@@ -11,8 +11,8 @@ const { syncTimeRange } = appStoreReducers;
 const renderRefreshIcon = () => <IconReload size={px('1rem')} stroke={1.5} />;
 
 const RefreshNow: FC = () => {
-	const [, setLogsStore] = useLogsStore((_store) => null);
-	const [, setAppStore] = useAppStore((_store) => null);
+	const [, setLogsStore] = useLogsStore(() => null);
+	const [, setAppStore] = useAppStore(() => null);
 
 	const onRefresh = useCallback(() => {
 		setAppStore((store) => syncTimeRange(store));

src/components/Header/TimeRange.tsx

@@ -43,7 +43,7 @@ const RelativeTimeIntervals = (props: {
 
 const TimeRange: FC = () => {
 	const [timeRange, setAppStore] = useAppStore((store) => store.timeRange);
-	const [, setLogStore] = useLogsStore((_store) => null);
+	const [, setLogStore] = useLogsStore(() => null);
 	const { label, shiftInterval, interval, startTime, endTime, type } = timeRange;
 	const handleOuterClick = useCallback((event: any) => {
 		const targetClassNames: string[] = event.target?.classList || [];
@@ -204,7 +204,7 @@ function isDateInRange(startDate: Date, endDate: Date, currentDate: Date) {
 }
 
 const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened, resetToRelative }) => {
-	const [, setLogStore] = useLogsStore((_store) => null);
+	const [, setLogStore] = useLogsStore(() => null);
 	const [{ startTime: startTimeFromStore, endTime: endTimeFromStore, type }, setAppStore] = useAppStore(
 		(store) => store.timeRange,
 	);

src/components/Navbar/index.tsx

@@ -202,7 +202,9 @@ const Navbar: FC = () => {
 									? toggleUserModal
 									: navAction.key === 'logout'
 									? signOutHandler
-									: () => {};
+									: () => {
+											return;
+									  };
 							return (
 								<Stack
 									className={`${styles.navItemContainer} ${isActiveItem && styles.navItemActive}`}

src/components/Navbar/rolesHandler.ts

@@ -72,9 +72,9 @@ const getStreamsSepcificAccess = (rolesWithRoleName: UserRoles | null, stream?:
 		return null;
 	}
 
-	let access: string[] = [];
+	const access: string[] = [];
 	let roles: any[] = [];
-	for (var prop in rolesWithRoleName) {
+	for (const prop in rolesWithRoleName) {
 		roles = [...roles, ...rolesWithRoleName[prop]];
 	}
 	roles.forEach((role: any) => {
@@ -121,7 +121,7 @@ const getStreamsSepcificAccess = (rolesWithRoleName: UserRoles | null, stream?:
 const getUserSepcificStreams = (rolesWithRoleName: object[], streams: any[]) => {
 	let userStreams: any[] = [];
 	let roles: any[] = [];
-	for (var prop in rolesWithRoleName) {
+	for (const prop in rolesWithRoleName) {
 		roles = [...roles, ...(rolesWithRoleName[prop] as any)];
 	}
 	roles.forEach((role: any) => {

src/constants/theme.ts

@@ -12,4 +12,4 @@ export const DASHBOARDS_SIDEBAR_WIDTH = 200;
 export const DASHBOARD_TOOLBAR_HEIGHT = 50;
 export const JSON_VIEW_TOOLBAR_HEIGHT = 50;
 export const LOGS_CONFIG_SIDEBAR_WIDTH = 200;
-export const LOGS_FOOTER_HEIGHT = 50;
+export const LOGS_FOOTER_HEIGHT = 50;

src/hooks/useAlertsEditor.tsx

@@ -6,7 +6,7 @@ import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/St
 const { setAlertsConfig } = streamStoreReducers;
 
 const useAlertsQuery = (streamName: string, hasAlertsAccess: boolean, isStandAloneMode: boolean | null) => {
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const { data, isError, isSuccess, isLoading, refetch } = useQuery(
 		['fetch-log-stream-alert', streamName, hasAlertsAccess],
 		() => getLogStreamAlerts(streamName),

src/hooks/useCacheToggle.tsx

@@ -6,7 +6,7 @@ import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/St
 const { setCacheEnabled } = streamStoreReducers;
 
 export const useCacheToggle = (streamName: string) => {
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const {
 		data: checkCacheData,
 		refetch: getCacheStatusRefetch,

src/hooks/useClusterInfo.ts

@@ -8,7 +8,7 @@ import { useClusterStore, clusterStoreReducers } from '@/pages/Systems/providers
 const { setIngestorMachines, setCurrentMachineData } = clusterStoreReducers;
 
 export const useClusterInfo = () => {
-	const [, setClusterStore] = useClusterStore((_store) => null);
+	const [, setClusterStore] = useClusterStore(() => null);
 	const {
 		data: clusterInfoData,
 		isError: getClusterInfoError,

src/hooks/useDashboards.tsx

@@ -154,7 +154,7 @@ export const useTileQuery = (opts: {
 	onSuccess?: (data: TileQueryResponse) => void;
 	enabled?: boolean;
 }) => {
-	const [, setDashboardsStore] = useDashboardsStore((_store) => null);
+	const [, setDashboardsStore] = useDashboardsStore(() => null);
 	const { query, startTime, endTime, tileId, enabled = true } = opts;
 	const { isLoading, isFetching, isError, refetch } = useQuery(
 		[tileId, startTime, endTime],

src/hooks/useGetLogStreamSchema.ts

@@ -1,15 +1,14 @@
 import { getLogStreamSchema } from '@/api/logStream';
 import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider';
 import { AxiosError, isAxiosError } from 'axios';
-import _ from 'lodash';
 import { useQuery } from 'react-query';
 import { useState } from 'react';
 
 const { setStreamSchema } = streamStoreReducers;
 
 export const useGetStreamSchema = (opts: { streamName: string }) => {
 	const { streamName } = opts;
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const [errorMessage, setErrorMesssage] = useState<string | null>(null);
 
 	const { isError, isSuccess, isLoading, refetch, isRefetching } = useQuery(

src/hooks/useGetStreamInfo.tsx

@@ -7,7 +7,7 @@ import { useQuery } from 'react-query';
 const { setStreamInfo } = streamStoreReducers;
 
 export const useGetStreamInfo = (currentStream: string, initialFetch: boolean) => {
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const {
 		data: getStreamInfoData,
 		isError: getStreamInfoError,

src/hooks/useGetStreamMetadata.ts

@@ -8,7 +8,7 @@ import { useCallback, useState } from 'react';
 
 export type MetaData = {
 	[key: string]: {
-		stats: LogStreamStat | {};
+		stats: LogStreamStat | object;
 		retention: LogStreamRetention | [];
 	};
 };

src/hooks/useLogStreamStats.tsx

@@ -8,7 +8,7 @@ import { AxiosError, isAxiosError } from 'axios';
 const { setStats } = streamStoreReducers;
 
 export const useLogStreamStats = (streamName: string, fetchStartTime?: Dayjs) => {
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const {
 		data: getLogStreamStatsData,
 		isSuccess: getLogStreamStatsDataIsSuccess,

src/hooks/useLoginForm.ts

@@ -9,13 +9,13 @@ import { HOME_ROUTE } from '@/constants/routes';
 import { useId } from '@mantine/hooks';
 import { useEffect } from 'react';
 import Cookies from 'js-cookie';
-import { getQueryParam } from '@/utils';
+import { useGetQueryParam } from '@/utils';
 import { isAxiosError } from 'axios';
 import _ from 'lodash';
 
 export const useLoginForm = () => {
 	const notificationId = useId();
-	const queryParams = getQueryParam();
+	const queryParams = useGetQueryParam();
 	const [loading, setLoading] = useMountedState(false);
 	const [error, setError] = useMountedState<string | null>(null);
 	const auth = Cookies.get('session');

src/hooks/useQueryResult.tsx

@@ -60,10 +60,11 @@ export const useFetchCount = () => {
 	const { setTotalCount } = logsStoreReducers;
 	const [custQuerySearchState] = useLogsStore((store) => store.custQuerySearchState);
 	const [timeRange] = useAppStore((store) => store.timeRange);
-	const [, setLogsStore] = useLogsStore((_store) => null);
+	const [, setLogsStore] = useLogsStore(() => null);
 	const { isQuerySearchActive, custSearchQuery, activeMode } = custQuerySearchState;
 	const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
 
+	/* eslint-disable no-useless-escape */
 	const defaultQuery = `select count(*) as count from \"${currentStream}\"`;
 	const query = (() => {
 		if (isQuerySearchActive) {

src/hooks/useRetentionEditor.tsx

@@ -8,7 +8,7 @@ import _ from 'lodash';
 const { setRetention } = streamStoreReducers;
 
 export const useRetentionQuery = (streamName: string, hasSettingsAccess: boolean) => {
-	const [, setStreamStore] = useStreamStore((_store) => null);
+	const [, setStreamStore] = useStreamStore(() => null);
 	const {
 		data: getLogRetentionData,
 		isError: getLogRetentionIsError,

src/hooks/useSavedFilters.tsx

@@ -10,8 +10,8 @@ const { setSavedFilters } = appStoreReducers;
 const { updateSavedFilterId } = logsStoreReducers;
 
 const useSavedFiltersQuery = () => {
-	const [, setAppStore] = useAppStore((_store) => null);
-	const [, setLogsStore] = useLogsStore((_store) => null);
+	const [, setAppStore] = useAppStore(() => null);
+	const [, setLogsStore] = useLogsStore(() => null);
 	const { isError, isSuccess, isLoading, refetch, isRefetching } = useQuery(
 		['saved-filters'],
 		() => getSavedFilters(),

src/layouts/MainLayout/providers/AppProvider.tsx

@@ -122,8 +122,7 @@ const generateUserAcccessMap = (accessRoles: string[] | null) => {
 	return Object.keys(accessKeyMap).reduce((acc, accessKey: string) => {
 		return {
 			...acc,
-			[accessKey]:
-				accessRoles !== null && accessKeyMap.hasOwnProperty(accessKey) && accessRoles.includes(accessKeyMap[accessKey]),
+			[accessKey]: accessRoles !== null && accessKey in accessKeyMap && accessRoles.includes(accessKeyMap[accessKey]),
 		};
 	}, {});
 };

src/pages/Dashboards/CreateDashboardModal.tsx

@@ -29,7 +29,7 @@ const useDashboardForm = (opts: FormOpts) => {
 		initialValues: opts,
 		validate: {
 			name: (val) => (_.isEmpty(val) ? 'Name cannot be empty' : null),
-			description: (_val) => null,
+			description: () => null,
 		},
 		validateInputOnChange: true,
 		validateInputOnBlur: true,

src/pages/Dashboards/Dashboard.tsx

@@ -254,7 +254,7 @@ const ImportDashboardModal = () => {
 };
 
 const NoDashboardsView = () => {
-	const [, setDashboardsStore] = useDashboardsStore((_store) => null);
+	const [, setDashboardsStore] = useDashboardsStore(() => null);
 
 	const openCreateDashboardModal = useCallback(() => {
 		setDashboardsStore((store) => toggleCreateDashboardModal(store, true));
@@ -289,7 +289,7 @@ const NoDashboardsView = () => {
 };
 
 const NoTilesView = () => {
-	const [, setDashbaordsStore] = useDashboardsStore((_store) => null);
+	const [, setDashbaordsStore] = useDashboardsStore(() => null);
 
 	const openCreateTileModal = useCallback(() => {
 		setDashbaordsStore((store) => toggleCreateTileModal(store, true));

src/pages/Dashboards/SideBar.tsx

@@ -68,7 +68,7 @@ const DashboardList = (props: { updateTimeRange: (dashboard: Dashboard) => void
 const renderShareIcon = () => <IconFileDownload size={px('1rem')} stroke={1.5} />;
 
 const ImportDashboardButton = () => {
-	const [_store, setDashbaordsStore] = useDashboardsStore((_store) => null);
+	const [, setDashbaordsStore] = useDashboardsStore(() => null);
 	const onClick = useCallback(() => {
 		setDashbaordsStore((store) => toggleImportDashboardModal(store, true));
 	}, []);

src/pages/Dashboards/Table.tsx

@@ -59,7 +59,7 @@ const TableViz = (props: { data: TileQueryResponse; tick_config: TickConfig[] })
 
 	return (
 		<Stack ref={containerRef} style={{ flex: 1, width: '100%' }}>
-			<Stack style={{ height: initialHeight }} className='png-export-table-container'>
+			<Stack style={{ height: initialHeight }} className="png-export-table-container">
 				{hasNoData ? (
 					<NoDataView />
 				) : (

src/pages/Dashboards/Tile.tsx

@@ -165,7 +165,7 @@ function TileControls(props: { tile: TileType; data: TileQueryResponse }) {
 	} = props;
 	const { records = [], fields = [] } = data;
 	const [allowDrag] = useDashboardsStore((store) => store.allowDrag);
-	const [, setDashboardsStore] = useDashboardsStore((_store) => null);
+	const [, setDashboardsStore] = useDashboardsStore(() => null);
 
 	const exportPng = useCallback(() => {
 		handleCapture({ className: makeExportClassName(tile_id), fileName: name });