Fix API key modal display

meilisearch · Feb 11, 2025 · bd41773 · bd41773
1 parent 130a50b
commit bd41773
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/cypress/e2e/test-api-key-modal.js b/cypress/e2e/test-api-key-modal.js
@@ -19,7 +19,7 @@ describe(`API key modal`, () => {
       cy.contains(
         'This dashboard will help you check the search results with ease.'
       )
-      cy.contains('Set your API key (optional)')
+      cy.contains('Enter your Admin API key (optional)')
       cy.contains('Select an index')
     })
   })
@@ -29,7 +29,7 @@ describe(`API key modal`, () => {
       cy.get('span').contains('API Key').parent().click()
       cy.wait(WAITING_TIME)
       cy.get('div[aria-label=settings-api-key]').within(() => {
-        cy.contains('Enter your admin API key (optional)')
+        cy.contains('Enter your Admin API key (optional)')
         cy.contains('No API key provided.')
       })
     })

diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,7 @@ import useLocalStorage from 'hooks/useLocalStorage'
 import ApiKeyModalContent from 'components/ApiKeyModalContent'
 import Body from 'components/Body'
 import Modal from 'components/Modal'
-import NoMeilisearchRunning from 'components/NoMeilisearchRunning'
+import UnreachableInstance from 'components/UnreachableInstance'
 import ApiKeyAwarenessBanner from 'components/ApiKeyAwarenessBanner'
 import RightPanel from 'components/RightPanel'
 import Header from 'components/Header'
@@ -40,7 +40,11 @@ const App = () => {
   const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')
   const [isApiKeyBannerVisible, setIsApiKeyBannerVisible] = useState(false)
   const [isRightPanelOpen, setIsRightPanelOpen] = useState(true)
+
   const dialog = useDialogState({ animated: true, visible: false })
+  const closeModalHandler = () => {
+    dialog.hide()
+  }
 
   const {
     meilisearchJsClient,
@@ -148,10 +152,10 @@ const App = () => {
             />
           </InstantSearch>
         ) : (
-          <NoMeilisearchRunning baseUrl={baseUrl} />
+          <UnreachableInstance baseUrl={baseUrl} />
         )}
-        <Modal dialog={dialog}>
-          <ApiKeyModalContent dialog={dialog} />
+        <Modal title="Enter your Admin API key" dialog={dialog}>
+          <ApiKeyModalContent dialog={dialog} closeModal={closeModalHandler} />
         </Modal>
       </div>
     </ApiKeyContext.Provider>

diff --git a/src/components/ApiKeyModalContent.js b/src/components/ApiKeyModalContent.js
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { MeiliSearch as Meilisearch } from 'meilisearch'
 
 import { baseUrl } from 'App'
-import Box from 'components/Box'
 import Button from 'components/Button'
 import Input from 'components/Input'
 import Link from 'components/Link'
@@ -19,6 +18,17 @@ const ErrorMessage = styled(Typography)`
   top: 32px;
 `
 
+const InputContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+const FullWidthInput = styled(Input)`
+  display: block;
+  height: 34px;
+  width: 100%;
+`
+
 const ApiKeyModalContent = ({ closeModal }) => {
   const { apiKey, setApiKey } = React.useContext(ApiKeyContext)
   const [value, setValue] = React.useState(apiKey || '')
@@ -46,9 +56,8 @@ const ApiKeyModalContent = ({ closeModal }) => {
 
   return (
     <>
-      <Box display="flex">
-        <Input
-          style={{ display: 'block', height: 34 }}
+      <InputContainer>
+        <FullWidthInput
           name="apiKey"
           type="text"
           value={value}
@@ -63,28 +72,29 @@ const ApiKeyModalContent = ({ closeModal }) => {
           variant="filled"
           size="small"
           onClick={() => updateClient()}
-          style={{ minWidth: 'auto', width: 48, marginLeft: 16 }}
+          style={{ minWidth: 'auto', width: 64, marginLeft: 24 }}
         >
-          Go
+          Save
         </Button>
-      </Box>
-      <Box position="relative">
-        <Typography variant="typo11" my={3} color="gray.6" mt={2}>
-          An API key that has at least{' '}
+      </InputContainer>
+      <div>
+        <Typography variant="typo11" my={3} color="gray.6" mt={3}>
+          The API key should have permission to check the instance health and
+          list indexes. Learn more about{' '}
           <Link
             href="https://docs.meilisearch.com/reference/api/keys.html#create-a-key"
             target="_blank"
           >
-            permission
-          </Link>{' '}
-          to get the indexes, search and get the version of Meilisearch.
+            API keys
+          </Link>
+          .
         </Typography>
         {error && (
           <ErrorMessage variant="typo11" color="main.default">
             {error}
           </ErrorMessage>
         )}
-      </Box>
+      </div>
     </>
   )
 }

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -100,6 +100,10 @@ const LogoBox = ({ version }) => (
 
 const ApiKey = ({ requireApiKeyToWork }) => {
   const dialog = useDialogState()
+  const closeModalHandler = () => {
+    dialog.hide()
+  }
+
   return (
     <>
       <DialogDisclosure {...dialog}>
@@ -117,7 +121,7 @@ const ApiKey = ({ requireApiKeyToWork }) => {
         ariaLabel="settings-api-key"
       >
         {requireApiKeyToWork ? (
-          <ApiKeyModalContent closeModal={() => dialog.hide()} />
+          <ApiKeyModalContent closeModal={closeModalHandler} />
         ) : (
           <Typography variant="typo11" color="gray.6">
             No API key provided. Learn about{' '}

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -71,7 +71,7 @@ const InputContainer = styled.div`
 const Input = ({ icon, ref, clear, type, value, ...props }) => {
   const input = useRef(null)
   return (
-    <InputContainer ref={ref}>
+    <InputContainer ref={ref} style={{ width: '100%' }}>
       {icon}
       <InputField
         $hasIcon={icon}

diff --git a/src/components/NoMeilisearchRunning.js → src/components/UnreachableInstance.js b/src/components/NoMeilisearchRunning.js → src/components/UnreachableInstance.js
@@ -4,7 +4,7 @@ import EmptyView from 'components/EmptyView'
 import BodyWrapper from 'components/BodyWrapper'
 import Box from 'components/Box'
 
-const NoMeilisearchRunning = ({ baseUrl, errorMessage }) => (
+const UnreachableInstance = ({ baseUrl }) => (
   <BodyWrapper>
     <Box width={928} m="0 auto" py={4} display="flex" flexDirection="column">
       <EmptyView buttonLink="https://docs.meilisearch.com/learn/getting_started/quick_start.html">
@@ -38,4 +38,4 @@ const NoMeilisearchRunning = ({ baseUrl, errorMessage }) => (
   </BodyWrapper>
 )
 
-export default NoMeilisearchRunning
+export default UnreachableInstance