Refactor API key modal opening

.env

@@ -1,3 +1,6 @@
+# Meilisearch
+REACT_APP_MEILI_SERVER_ADDRESS=https://edge.meilisearch.com
+
 # Hubspot newsletter
 REACT_APP_HUBSPOT_PORTAL_ID=25945010
 REACT_APP_HUBSPOT_FORM_GUID=991e2a09-77c2-4428-9242-ebf26bfc6c64

src/App.js

@@ -18,8 +18,6 @@ import ApiKeyAwarenessBanner from 'components/ApiKeyAwarenessBanner'
 import RightPanel from 'components/RightPanel'
 import Header from 'components/Header'
 import getIndexesListWithStats from 'utils/getIndexesListWithStats'
-import shouldDisplayApiKeyModal from 'utils/shouldDisplayApiKeyModal'
-import hasAnApiKeySet from 'utils/hasAnApiKeySet'
 import clientAgents from './version/client-agents'
 
 export const baseUrl =
@@ -106,9 +104,10 @@ const App = () => {
       const isInstanceRunning = await meilisearchJsClient.isHealthy()
       setIsMeilisearchRunning(isInstanceRunning)
       if (isInstanceRunning) {
-        setRequireApiKeyToWork(await hasAnApiKeySet())
-        dialog.setVisible(await shouldDisplayApiKeyModal(meilisearchJsClient))
         getIndexesList()
+      } else {
+        setRequireApiKeyToWork(true)
+        dialog.setVisible(true)
       }
     }
     onClientUpdate()
@@ -149,7 +148,7 @@ const App = () => {
             />
           </InstantSearch>
         ) : (
-          <NoMeilisearchRunning />
+          <NoMeilisearchRunning baseUrl={baseUrl} />
         )}
         <Modal dialog={dialog}>
           <ApiKeyModalContent dialog={dialog} />

src/components/EmptyView.js

@@ -11,7 +11,7 @@ const EmptyView = ({ buttonLink, children, ...props }) => (
     alignItems="center"
     flexDirection="column"
     justifyContent="center"
-    maxWidth={264}
+    maxWidth={600}
     m="auto"
     {...props}
   >

src/components/NoMeilisearchRunning.js

@@ -4,7 +4,7 @@ import EmptyView from 'components/EmptyView'
 import BodyWrapper from 'components/BodyWrapper'
 import Box from 'components/Box'
 
-const NoMeilisearchRunning = () => (
+const NoMeilisearchRunning = ({ baseUrl, errorMessage }) => (
   <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">
@@ -14,15 +14,15 @@ const NoMeilisearchRunning = () => (
           mb={3}
           color="gray.0"
         >
-          It seems like Meilisearch isn’t running, did you forget to start it?
+          Cannot reach Meilisearch at <strong>{baseUrl}</strong>.
         </Typography>
         <Typography
           variant="typo8"
           style={{ textAlign: 'center' }}
-          mb={32}
-          color="gray.2"
+          mb={3}
+          color="gray.0"
         >
-          (Don’t forget to set an API Key if you want one)
+          Check the provided URL and API Key.
         </Typography>
         <Typography
           variant="typo8"