fixing lint errors (#17156)

Author: selfcontained

components/dashboard/src/admin/License.tsx

@@ -11,9 +11,6 @@ import { getGitpodService } from "../service/service";
 import { ReactComponent as Alert } from "../images/exclamation.svg";
 import { ReactComponent as Success } from "../images/check-circle.svg";
 import { LicenseInfo } from "@gitpod/gitpod-protocol";
-import { ReactComponent as XSvg } from "../images/x.svg";
-import { ReactComponent as CheckSvg } from "../images/check.svg";
-import { ReactComponent as LinkSvg } from "../images/external-link.svg";
 import SolidCard from "../components/SolidCard";
 import Card from "../components/Card";
 import { isGitpodIo } from "../utils";

components/dashboard/src/admin/ProjectsSearch.tsx

@@ -50,6 +50,7 @@ export function ProjectsSearch() {
         } else {
             setCurrentProject(undefined);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
 
     useEffect(() => {

components/dashboard/src/admin/Settings.tsx

@@ -44,6 +44,7 @@ export default function Settings() {
             const setting = await getGitpodService().server.adminGetSettings();
             setAdminSettings(setting);
         })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const actuallySetTelemetryPrefs = async (value: InstallationAdminSettings) => {

components/dashboard/src/admin/TeamsSearch.tsx

@@ -52,6 +52,7 @@ export function TeamsSearch() {
         } else {
             setCurrentTeam(undefined);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
 
     if (currentTeam) {

components/dashboard/src/admin/UserDetail.tsx

@@ -473,7 +473,7 @@ function renderBillingModeProperty(billingMode?: BillingMode): JSX.Element {
                     >
                         <p className="flex justify-left text-gitpod-red">
                             <span>UBP blocked by:</span>
-                            <img className="m-2" src={CaretDown} />
+                            <img className="m-2" src={CaretDown} alt="caret icon pointing down" />
                         </p>
                     </ContextMenu>
                 )}

components/dashboard/src/admin/UserSearch.tsx

@@ -40,6 +40,7 @@ export default function UserSearch() {
         } else {
             setCurrentUserState(undefined);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
 
     if (currentUser) {

components/dashboard/src/admin/WorkspacesSearch.tsx

@@ -66,12 +66,14 @@ export function WorkspaceSearch(props: Props) {
         } else {
             setCurrentWorkspaceState(undefined);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
 
     useEffect(() => {
         if (props.user) {
             search();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.user]);
 
     if (currentWorkspace) {

components/dashboard/src/components/ConfirmationModal.tsx

@@ -35,6 +35,7 @@ export default function ConfirmationModal(props: {
     const buttonDisabled = useRef(props.buttonDisabled);
     useEffect(() => {
         buttonDisabled.current = props.buttonDisabled;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

components/dashboard/src/components/ContextMenu.tsx

@@ -36,16 +36,6 @@ export interface ContextMenuEntry {
 function ContextMenu(props: ContextMenuProps) {
     const [expanded, setExpanded] = useState(false);
 
-    const { changeMenuState } = props;
-
-    useEffect(() => {
-        return () => {
-            if (changeMenuState) {
-                changeMenuState(!expanded);
-            }
-        };
-    }, [expanded]);
-
     const toggleExpanded = () => {
         setExpanded(!expanded);
         if (props.changeMenuState) {
@@ -80,6 +70,7 @@ function ContextMenu(props: ContextMenuProps) {
             window.removeEventListener("keydown", keydownHandler);
             window.removeEventListener("click", clickHandler);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // Empty array ensures that effect is only run on mount and unmount
 
     // Default 'children' is the three dots hamburger button.

components/dashboard/src/components/DropDown2.tsx

@@ -108,7 +108,7 @@ export const DropDown2: FunctionComponent<DropDown2Props> = (props) => {
                 e.preventDefault();
             }
         },
-        [filteredOptions, props, selectedElementTemp, setFocussedElement, showDropDown, toggleDropDown],
+        [filteredOptions, props, search, selectedElementTemp, setFocussedElement, showDropDown, toggleDropDown],
     );
 
     const handleBlur = useCallback(

components/dashboard/src/components/InfoBox.tsx

@@ -14,7 +14,7 @@ export default function InfoBox(p: { className?: string; children?: React.ReactN
                 (p.className || "")
             }
         >
-            <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} />
+            <img className="w-4 h-4 m-1 ml-2 mr-4" src={info} alt="info icon" />
             <span>{p.children}</span>
         </div>
     );

components/dashboard/src/components/MonacoEditor.tsx

@@ -78,6 +78,7 @@ export default function MonacoEditor(props: MonacoEditorProps) {
             });
         }
         return () => editorRef.current?.dispose();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {

components/dashboard/src/components/PendingChangesDropdown.tsx

@@ -46,7 +46,7 @@ export default function PendingChangesDropdown(props: { workspaceInstance?: Work
                 <span>
                     {totalChanges} Change{totalChanges === 1 ? "" : "s"}
                 </span>
-                <img className="m-2" src={CaretDown} />
+                <img className="m-2" src={CaretDown} alt="caret icon pointing down" />
             </p>
         </ContextMenu>
     );

components/dashboard/src/components/PrebuildLogs.tsx

@@ -5,7 +5,7 @@
  */
 
 import EventEmitter from "events";
-import React, { Suspense, useEffect, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useState } from "react";
 import {
     WorkspaceInstance,
     DisposableCollection,
@@ -32,18 +32,21 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
     const [logsEmitter] = useState(new EventEmitter());
     const [prebuild, setPrebuild] = useState<PrebuildWithStatus | undefined>();
 
-    function handlePrebuildUpdate(prebuild: PrebuildWithStatus) {
-        if (prebuild.info.buildWorkspaceId === props.workspaceId) {
-            setPrebuild(prebuild);
+    const handlePrebuildUpdate = useCallback(
+        (prebuild: PrebuildWithStatus) => {
+            if (prebuild.info.buildWorkspaceId === props.workspaceId) {
+                setPrebuild(prebuild);
 
-            // In case the Prebuild got "aborted" or "time(d)out" we want to user to proceed anyway
-            if (props.onIgnorePrebuild && (prebuild.status === "aborted" || prebuild.status === "timeout")) {
-                props.onIgnorePrebuild();
+                // In case the Prebuild got "aborted" or "time(d)out" we want to user to proceed anyway
+                if (props.onIgnorePrebuild && (prebuild.status === "aborted" || prebuild.status === "timeout")) {
+                    props.onIgnorePrebuild();
+                }
+                // TODO(gpl) We likely want to move the "happy path" logic (for status "available")
+                // here as well at some point. For that to work we need a "registerPrebuildUpdate(prebuildId)" API
             }
-            // TODO(gpl) We likely want to move the "happy path" logic (for status "available")
-            // here as well at some point. For that to work we need a "registerPrebuildUpdate(prebuildId)" API
-        }
-    }
+        },
+        [props],
+    );
 
     useEffect(() => {
         const disposables = new DisposableCollection();
@@ -105,7 +108,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
         return function cleanup() {
             disposables.dispose();
         };
-    }, [logsEmitter, props.workspaceId]);
+    }, [handlePrebuildUpdate, logsEmitter, props.workspaceId]);
 
     useEffect(() => {
         const workspaceId = props.workspaceId;

components/dashboard/src/components/WorkspaceLogs.tsx

@@ -56,6 +56,7 @@ export default function WorkspaceLogs(props: WorkspaceLogsProps) {
         return function cleanUp() {
             terminal.dispose();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
@@ -70,19 +71,22 @@ export default function WorkspaceLogs(props: WorkspaceLogsProps) {
             clearTimeout(timeout!);
             window.removeEventListener("resize", onWindowResize);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
         if (terminalRef.current && props.errorMessage) {
             terminalRef.current.write(`\r\n\u001b[38;5;196m${props.errorMessage}\u001b[0m\r\n`);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [terminalRef.current, props.errorMessage]);
 
     useEffect(() => {
         if (!terminalRef.current) {
             return;
         }
         terminalRef.current.setOption("theme", isDark ? darkTheme : lightTheme);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [terminalRef.current, isDark]);
 
     return (

components/dashboard/src/user-settings/selectClass.tsx

@@ -4,11 +4,9 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useEffect, useState } from "react";
-import { getGitpodService } from "../service/service";
+import { useState } from "react";
 import { trackEvent } from "../Analytics";
 import WorkspaceClass from "../components/WorkspaceClass";
-import { SupportedWorkspaceClass } from "@gitpod/gitpod-protocol/lib/workspace-class";
 import { useWorkspaceClasses } from "../data/workspaces/workspace-classes-query";
 
 interface SelectWorkspaceClassProps {