Autofocus "clear cache" button (streamlit#2739)

* autofocus clear cache button

* add test

* update test

* fix lint

frontend/src/components/core/StreamlitDialog/StreamlitDialog.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2018-2021 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Fragment } from "react"
+import { mount } from "lib/test_util"
+import { StreamlitDialog, DialogType } from "./StreamlitDialog"
+
+function flushPromises(): Promise<void> {
+  return new Promise(resolve => setImmediate(resolve))
+}
+
+describe("StreamlitDialog", () => {
+  it("renders clear cache dialog and focuses clear cache button", async () => {
+    const wrapper = mount(
+      <Fragment>
+        {StreamlitDialog({
+          type: DialogType.CLEAR_CACHE,
+          confirmCallback: () => {},
+          defaultAction: () => {},
+          onClose: () => {},
+        })}
+      </Fragment>
+    )
+
+    // Flush promises to give componentDidMount() a chance to run.
+    await flushPromises()
+
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find("button")
+          .at(1)
+          .is(":focus")
+      ).toBe(true)
+    }, 0)
+  })
+})

frontend/src/components/core/StreamlitDialog/StreamlitDialog.tsx

@@ -173,7 +173,11 @@ function clearCacheDialog(props: ClearCacheProps): ReactElement {
             <ModalButton kind={Kind.SECONDARY} onClick={props.onClose}>
               Cancel
             </ModalButton>
-            <ModalButton kind={Kind.PRIMARY} onClick={props.confirmCallback}>
+            <ModalButton
+              autoFocus
+              kind={Kind.PRIMARY}
+              onClick={props.confirmCallback}
+            >
               Clear cache
             </ModalButton>
           </ModalFooter>

frontend/src/components/shared/Button/Button.tsx

@@ -34,6 +34,7 @@ function Button({
   onClick,
   fluidWidth,
   children,
+  autoFocus,
 }: ButtonPropsT): ReactElement {
   let ComponentType = StyledPrimaryButton
 
@@ -54,6 +55,7 @@ function Button({
       fluidWidth={fluidWidth || false}
       disabled={disabled || false}
       onClick={onClick || (() => {})}
+      autoFocus={autoFocus || false}
     >
       {children}
     </ComponentType>

frontend/src/components/shared/Button/styled-components.ts

@@ -42,6 +42,7 @@ export interface ButtonProps {
   disabled?: boolean
   fluidWidth?: boolean
   children: ReactNode
+  autoFocus?: boolean
 }
 
 type RequiredButtonProps = Required<ButtonProps>