Activate the no-unused-vars rule in eslint. (streamlit#6300)

* Initial cleanup of unused vars. * More unused vars removed. * Taking cate of $theme as well. * Remove redundant variable.
vdonato · Mar 13, 2023 · 7fc3dd3 · 7fc3dd3
1 parent 264b725
commit 7fc3dd3
Show file tree

Hide file tree

Showing 29 changed files with 65 additions and 74 deletions.
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
@@ -58,8 +58,13 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     // Don't warn about unused function params
     "@typescript-eslint/no-unused-vars": [
-      "warn",
-      { "args": "none", "ignoreRestSiblings": true }
+      "error",
+      {
+        "vars": "all",
+        "args": "after-used",
+        "ignoreRestSiblings": false,
+        "argsIgnorePattern": "^_"
+      }
     ],
     // It's safe to use functions before they're defined
     "@typescript-eslint/no-use-before-define": [

diff --git a/frontend/src/components/core/AppContext/index.tsx b/frontend/src/components/core/AppContext/index.tsx
@@ -53,13 +53,13 @@ export default React.createContext<Props>({
   showToolbar: false,
   showColoredLine: false,
   isFullScreen: false,
-  setFullScreen: (value: boolean) => {},
-  addScriptFinishedHandler: (func: () => void) => {},
-  removeScriptFinishedHandler: (func: () => void) => {},
+  setFullScreen: () => {},
+  addScriptFinishedHandler: () => {},
+  removeScriptFinishedHandler: () => {},
   activeTheme: baseTheme,
-  setTheme: (theme: ThemeConfig) => {},
+  setTheme: () => {},
   availableThemes: [],
-  addThemes: (themes: ThemeConfig[]) => {},
+  addThemes: () => {},
   sidebarChevronDownshift: 0,
   getBaseUriParts: getWindowBaseUriParts,
 })
diff --git a/frontend/src/components/core/Header/styled-components.ts b/frontend/src/components/core/Header/styled-components.ts
@@ -23,7 +23,7 @@ export interface StyledHeaderProps {
 }
 
 export const StyledHeader = styled.header<StyledHeaderProps>(
-  ({ isWideMode, showHeader, theme }) => ({
+  ({ showHeader, theme }) => ({
     position: "fixed",
     top: theme.spacing.none,
     left: theme.spacing.none,

diff --git a/frontend/src/components/core/MainMenu/styled-components.ts b/frontend/src/components/core/MainMenu/styled-components.ts
@@ -171,7 +171,7 @@ export const StyledMenuItemLabel = styled.span(({ theme }) => ({
   fontFamily: theme.fonts.sansSerif,
 }))
 
-export const StyledUl = styled.ul(({ theme }) => ({
+export const StyledUl = styled.ul(() => ({
   borderBottom: "$1px solid rgba(38, 39, 48, 0.2)",
   borderTop: "$1px solid rgba(38, 39, 48, 0.2)",
   margin: "-.20rem 0 -.5rem 0",

diff --git a/frontend/src/components/core/Maybe/Maybe.tsx b/frontend/src/components/core/Maybe/Maybe.tsx
@@ -24,11 +24,7 @@ export interface State {}
 
 class Maybe extends React.Component<Props, State> {
   // eslint-disable-next-line class-methods-use-this
-  public shouldComponentUpdate(
-    nextProps: Readonly<Props>,
-    nextState: Readonly<State>,
-    nextContext: any
-  ): boolean {
+  public shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
     // We have our component update if either props.enable or nextProps.enable
     // is true to ensure that we rerender in the case that an Element is
     // removed by replacing it with an empty one (so goes from enabled->disabled).

diff --git a/frontend/src/components/core/Sidebar/styled-components.ts b/frontend/src/components/core/Sidebar/styled-components.ts
@@ -63,7 +63,7 @@ export const StyledSidebar = styled.section<StyledSidebarProps>(
   }
 )
 
-export const StyledSidebarNavContainer = styled.div(({ theme }) => ({
+export const StyledSidebarNavContainer = styled.div(() => ({
   position: "relative",
 }))
 
@@ -164,7 +164,7 @@ export const StyledSidebarNavSeparatorContainer =
     })
   )
 
-export const StyledSidebarNavLinkContainer = styled.div(({ theme }) => ({
+export const StyledSidebarNavLinkContainer = styled.div(() => ({
   display: "flex",
   flexDirection: "column",
 }))
@@ -286,7 +286,7 @@ export interface StyledSidebarContentProps {
 }
 
 export const StyledSidebarContent = styled.div<StyledSidebarContentProps>(
-  ({ hideScrollbar, theme }) => ({
+  ({ hideScrollbar }) => ({
     position: "relative",
     height: "100%",
     width: "100%",

diff --git a/frontend/src/components/core/StatusWidget/StatusWidget.tsx b/frontend/src/components/core/StatusWidget/StatusWidget.tsx
@@ -157,8 +157,7 @@ class StatusWidget extends PureComponent<StatusWidgetProps, State> {
 
   /** Called by React on prop changes */
   public static getDerivedStateFromProps(
-    props: Readonly<StatusWidgetProps>,
-    state: State
+    props: Readonly<StatusWidgetProps>
   ): Partial<State> | null {
     // Reset transient event-related state when prop changes
     // render that state irrelevant

diff --git a/frontend/src/components/core/StatusWidget/styled-components.ts b/frontend/src/components/core/StatusWidget/styled-components.ts
@@ -132,7 +132,7 @@ export const StyledAppRunningIcon = styled.img<StyledAppRunningIconProps>(
   }
 )
 
-export const StyledStatusWidget = styled.div(({ theme }) => ({
+export const StyledStatusWidget = styled.div(() => ({
   "&.StatusWidget-appear": {
     opacity: 0,
   },
@@ -161,7 +161,7 @@ export const StyledStatusWidget = styled.div(({ theme }) => ({
   },
 }))
 
-export const StyledShortcutLabel = styled.div(({ theme }) => ({
+export const StyledShortcutLabel = styled.div(() => ({
   "&::first-letter": {
     textDecoration: "underline",
   },

diff --git a/frontend/src/components/core/StreamlitDialog/styled-components.ts b/frontend/src/components/core/StreamlitDialog/styled-components.ts
@@ -29,7 +29,7 @@ export const StyledCommandLine = styled.textarea(({ theme }) => ({
   height: "6rem",
 }))
 
-export const StyledShortcutLabel = styled.span(({ theme }) => ({
+export const StyledShortcutLabel = styled.span(() => ({
   "&::first-letter": {
     textDecoration: "underline",
   },
@@ -75,15 +75,15 @@ export const StyledHeader = styled.h2(({ theme }) => ({
   },
 }))
 
-export const StyledLabel = styled.label(({ theme }) => ({
+export const StyledLabel = styled.label(() => ({
   paddingBottom: 0,
   paddingTop: 0,
   marginBottom: 0,
   marginTop: 0,
   lineHeight: 1.25,
 }))
 
-export const StyledSmall = styled(Small)(({ theme }) => ({
+export const StyledSmall = styled(Small)(() => ({
   display: "block",
   paddingBottom: 0,
   paddingTop: 0,
@@ -135,7 +135,7 @@ export const StyledCheckbox = styled.input(({ theme }) => ({
   },
 }))
 
-export const StyledDeployErrorContent = styled.div(({ theme }) => ({
+export const StyledDeployErrorContent = styled.div(() => ({
   "& > ul": {
     paddingLeft: "1.4rem",
   },

diff --git a/frontend/src/components/core/ToolbarActions/ToolbarActions.test.tsx b/frontend/src/components/core/ToolbarActions/ToolbarActions.test.tsx
@@ -29,7 +29,6 @@ describe("ActionButton", () => {
   const getProps = (
     extended?: Partial<ActionButtonProps>
   ): ActionButtonProps => ({
-    borderless: false,
     label: "the label",
     icon: "star.svg",
     onClick: jest.fn(),
@@ -56,7 +55,7 @@ describe("ActionButton", () => {
 
   it("does not render label if not provided", () => {
     const wrapper = shallow(
-      <ActionButton {...getProps({ label: undefined, borderless: true })} />
+      <ActionButton {...getProps({ label: undefined })} />
     )
 
     expect(wrapper).toMatchSnapshot()

diff --git a/frontend/src/components/core/ToolbarActions/ToolbarActions.tsx b/frontend/src/components/core/ToolbarActions/ToolbarActions.tsx
@@ -27,14 +27,12 @@ import {
 } from "./styled-components"
 
 export interface ActionButtonProps {
-  borderless?: boolean
   label?: string
   icon?: string
   onClick: () => void
 }
 
 export function ActionButton({
-  borderless,
   label,
   icon,
   onClick,
@@ -62,12 +60,11 @@ function ToolbarActions({
 }: ToolbarActionsProps): ReactElement {
   return (
     <>
-      {hostToolbarItems.map(({ borderless, key, label, icon }) => (
+      {hostToolbarItems.map(({ key, label, icon }) => (
         <ActionButton
           key={key}
           label={label}
           icon={icon}
-          borderless={borderless}
           onClick={() =>
             sendMessageToHost({
               type: "TOOLBAR_ITEM_CALLBACK",

diff --git a/frontend/src/components/core/ToolbarActions/styled-components.ts b/frontend/src/components/core/ToolbarActions/styled-components.ts
@@ -29,7 +29,7 @@ export interface StyledActionButtonIconProps {
 }
 
 export const StyledActionButtonIcon = styled.div<StyledActionButtonIconProps>(
-  ({ theme, icon }) => ({
+  ({ icon }) => ({
     background: `url("${icon}") no-repeat center / contain`,
 
     // NOTE: We intentionally don't use any of the preset theme iconSizes here

diff --git a/frontend/src/components/elements/ImageList/styled-components.ts b/frontend/src/components/elements/ImageList/styled-components.ts
@@ -24,7 +24,7 @@ export const StyledImageList = styled.div(({ theme }) => ({
   rowGap: theme.spacing.lg,
 }))
 
-export const StyledImageContainer = styled.div(({ theme }) => ({
+export const StyledImageContainer = styled.div(() => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "stretch",

diff --git a/frontend/src/components/elements/VegaLiteChart/VegaLiteChart.tsx b/frontend/src/components/elements/VegaLiteChart/VegaLiteChart.tsx
@@ -380,7 +380,7 @@ function getDataSets(
 
   const datasets: { [dataset: string]: any } = {}
 
-  el.get("datasets").forEach((x: any, i: number) => {
+  el.get("datasets").forEach((x: any) => {
     if (!x) {
       return
     }

diff --git a/frontend/src/components/shared/ColorPicker/ColorPicker.tsx b/frontend/src/components/shared/ColorPicker/ColorPicker.tsx
@@ -80,7 +80,7 @@ class ColorPicker extends React.PureComponent<Props, State> {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+  public componentDidCatch(error: Error): void {
     if (error?.name === "SecurityError") {
       // 2021.06.30 - on Streamlit Sharing, ColorPicker throws a cross-origin
       // error when its popover window is closed. There's an issue open in the

diff --git a/frontend/src/components/shared/ColorPicker/styled-components.ts b/frontend/src/components/shared/ColorPicker/styled-components.ts
@@ -59,7 +59,7 @@ export const StyledColorBlock = styled.div(({ theme }) => ({
   },
 }))
 
-export const StyledColorValue = styled.div(({ theme }) => ({
+export const StyledColorValue = styled.div(() => ({
   display: "flex",
   alignItems: "center",
   padding: "0 0.8rem",

diff --git a/frontend/src/components/shared/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/shared/ErrorBoundary/ErrorBoundary.tsx
@@ -42,7 +42,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
     }
   }
 
-  public componentDidCatch = (error: Error, info: React.ErrorInfo): void => {
+  public componentDidCatch = (error: Error): void => {
     logError(`${error.name}: ${error.message}\n${error.stack}`)
   }
 

diff --git a/frontend/src/components/shared/ProgressBar/ProgressBar.tsx b/frontend/src/components/shared/ProgressBar/ProgressBar.tsx
@@ -81,7 +81,7 @@ function ProgressBar({
       }),
     },
     BarProgress: {
-      style: ({ $theme }: { $theme: any }) => ({
+      style: () => ({
         backgroundColor: usingCustomTheme
           ? theme.colors.primary
           : theme.colors.blue70,

diff --git a/frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx b/frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx
@@ -31,7 +31,7 @@ import {
   Components,
   ReactMarkdownProps,
 } from "react-markdown/lib/ast-to-react"
-import { once } from "lodash"
+import { once, omit } from "lodash"
 import remarkDirective from "remark-directive"
 import remarkMathPlugin from "remark-math"
 import rehypeRaw from "rehype-raw"
@@ -210,7 +210,6 @@ type HeadingProps = JSX.IntrinsicElements["h1"] &
 export const CustomHeading: FunctionComponent<HeadingProps> = ({
   node,
   children,
-  level,
   ...rest
 }) => {
   const anchor = rest["data-anchor"]
@@ -254,7 +253,6 @@ export type CustomCodeTagProps = JSX.IntrinsicElements["code"] &
  * Renders code tag with highlighting based on requested language.
  */
 export const CustomCodeTag: FunctionComponent<CustomCodeTagProps> = ({
-  node,
   inline,
   className,
   children,
@@ -276,7 +274,7 @@ export const CustomCodeTag: FunctionComponent<CustomCodeTagProps> = ({
       </StreamlitSyntaxHighlighter>
     </>
   ) : (
-    <code className={className} {...props}>
+    <code className={className} {...omit(props, "node")}>
       {children}
     </code>
   )
@@ -452,18 +450,18 @@ export function LinkWithTargetBlank(props: LinkProps): ReactElement {
   // if it's a #hash link, don't open in new tab
   const { href } = props
   if (href && href.startsWith("#")) {
-    const { children, node, ...rest } = props
-    return <a {...rest}>{children}</a>
+    const { children, ...rest } = props
+    return <a {...omit(rest, "node")}>{children}</a>
   }
 
-  const { title, children, node, target, rel, ...rest } = props
+  const { title, children, target, rel, ...rest } = props
   return (
     <a
       href={href}
       title={title}
       target={target || "_blank"}
       rel={rel || "noopener noreferrer"}
-      {...rest}
+      {...omit(rest, "node")}
     >
       {children}
     </a>

diff --git a/frontend/src/components/shared/TooltipIcon/styled-components.ts b/frontend/src/components/shared/TooltipIcon/styled-components.ts
@@ -32,7 +32,7 @@ export const StyledTooltipIconWrapper =
     },
   }))
 
-export const StyledLabelHelpWrapper = styled.div(({ theme }) => ({
+export const StyledLabelHelpWrapper = styled.div(() => ({
   display: "flex",
   visibility: "visible",
   verticalAlign: "middle",

diff --git a/frontend/src/components/widgets/CameraInput/styled-components.ts b/frontend/src/components/widgets/CameraInput/styled-components.ts
@@ -61,16 +61,14 @@ function getSizeStyle(size: Size, theme: Theme): CSSObject {
 
 type RequiredCameraInputButtonProps = Required<CameraInputButtonProps>
 
-export const StyledCameraInput = styled.div<StyledCameraInputProps>(
-  ({ theme, width }) => ({
-    // This is used to position the "Switch facing mode" button
-    // with respect to the webcam block.
-    position: "relative",
-    overflow: "hidden",
-    width: "100%",
-    objectFit: "contain",
-  })
-)
+export const StyledCameraInput = styled.div<StyledCameraInputProps>(() => ({
+  // This is used to position the "Switch facing mode" button
+  // with respect to the webcam block.
+  position: "relative",
+  overflow: "hidden",
+  width: "100%",
+  objectFit: "contain",
+}))
 
 export interface StyledBoxProps {
   width: number
@@ -108,7 +106,7 @@ export const StyledLink = styled.a(({ theme }) => ({
   textDecoration: "none",
 }))
 
-export const StyledSpan = styled.span(({ theme }) => ({
+export const StyledSpan = styled.span(() => ({
   display: "flex",
   alignItems: "center",
 }))
@@ -123,11 +121,11 @@ export const StyledSwitchFacingModeButton = styled.div(({ theme }) => ({
   opacity: 0.6,
 }))
 
-export const StyledWebcamWrapper = styled.div(({ theme }) => ({
+export const StyledWebcamWrapper = styled.div(() => ({
   display: "flex",
 }))
 
-export const StyledProgressBar = styled.div(({ theme }) => ({
+export const StyledProgressBar = styled.div(() => ({
   height: "fit-content",
   width: "100%",
   position: "absolute",

diff --git a/frontend/src/components/widgets/Checkbox/styled-components.tsx b/frontend/src/components/widgets/Checkbox/styled-components.tsx
@@ -23,7 +23,7 @@ export interface StyledContentProps {
 }
 
 export const StyledContent = styled.div<StyledContentProps>(
-  ({ theme, visibility }) => ({
+  ({ visibility }) => ({
     display: visibility === LabelVisibilityOptions.Collapsed ? "none" : "flex",
     visibility:
       visibility === LabelVisibilityOptions.Hidden ? "hidden" : "visible",

diff --git a/frontend/src/components/widgets/DataFrame/hooks/useDataEditor.test.ts b/frontend/src/components/widgets/DataFrame/hooks/useDataEditor.test.ts
@@ -68,7 +68,7 @@ const getOriginalIndexMock = jest.fn().mockImplementation((index: number) => {
 })
 const getCellContentMock = jest
   .fn()
-  .mockImplementation(([col, row]: readonly [number, number]) => {
+  .mockImplementation(([col]: readonly [number]) => {
     const column = MOCK_COLUMNS[col]
     if (column.kind === "number") {
       return column.getCell(123)