From faaa846161a19fd031bd6bcc1186fb457430c613 Mon Sep 17 00:00:00 2001 From: qdequele Date: Mon, 6 Mar 2023 16:01:45 +0100 Subject: [PATCH 1/4] Retrieve the API Key from the url parameters --- src/App.js | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index aeab5e75..9738070b 100644 --- a/src/App.js +++ b/src/App.js @@ -139,6 +139,28 @@ const App = () => { } React.useEffect(() => { + // Check if the API key is present on the url then put it in the local storage + const getAPIKeyFromUrl = () => { + const urlParams = new URLSearchParams(window.location.search) + const apiKeyParam = urlParams.get('api_key') + if (apiKeyParam) { + setApiKey(apiKeyParam) + + const testISClient = instantMeilisearch(baseUrl, apiKeyParam, { + primaryKey: 'id', + clientAgents, + }) + setISClient(testISClient) + + const testMSClient = new Meilisearch({ + host: baseUrl, + apiKey: apiKeyParam, + clientAgents, + }) + setMSClient(testMSClient) + } + } + // Check if an API key is required / a masterKey was set const fetchWithoutApiKey = async () => { try { @@ -153,10 +175,12 @@ const App = () => { } } } - + if (!apiKey || apiKey.length === 0) { + getAPIKeyFromUrl() + } fetchWithoutApiKey() getIndexesList() - }, []) + }, [apiKey]) // Check if a modal asking for API Key should be displayed React.useEffect(() => { From 77634f78313140b42af8aa5a8586483da5cb2ba5 Mon Sep 17 00:00:00 2001 From: Charlotte Vermandel Date: Mon, 13 Mar 2023 16:41:53 +0100 Subject: [PATCH 2/4] Trigger fetching of the api key query param on launch --- src/App.js | 47 ++++++++++++++-------------- src/components/ApiKeyModalContent.js | 5 --- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/App.js b/src/App.js index 9738070b..d3ee22b8 100644 --- a/src/App.js +++ b/src/App.js @@ -140,27 +140,11 @@ const App = () => { React.useEffect(() => { // Check if the API key is present on the url then put it in the local storage - const getAPIKeyFromUrl = () => { - const urlParams = new URLSearchParams(window.location.search) - const apiKeyParam = urlParams.get('api_key') - if (apiKeyParam) { - setApiKey(apiKeyParam) - - const testISClient = instantMeilisearch(baseUrl, apiKeyParam, { - primaryKey: 'id', - clientAgents, - }) - setISClient(testISClient) - - const testMSClient = new Meilisearch({ - host: baseUrl, - apiKey: apiKeyParam, - clientAgents, - }) - setMSClient(testMSClient) - } + const urlParams = new URLSearchParams(window.location.search) + const apiKeyParam = urlParams.get('api_key') + if (apiKeyParam) { + setApiKey(apiKeyParam) } - // Check if an API key is required / a masterKey was set const fetchWithoutApiKey = async () => { try { @@ -175,11 +159,28 @@ const App = () => { } } } - if (!apiKey || apiKey.length === 0) { - getAPIKeyFromUrl() - } + fetchWithoutApiKey() getIndexesList() + }, []) + + React.useEffect(() => { + if (apiKey) { + setISClient( + instantMeilisearch(baseUrl, apiKey, { + primaryKey: 'id', + clientAgents, + }) + ) + + setMSClient( + new Meilisearch({ + host: baseUrl, + apiKey, + clientAgents, + }) + ) + } }, [apiKey]) // Check if a modal asking for API Key should be displayed diff --git a/src/components/ApiKeyModalContent.js b/src/components/ApiKeyModalContent.js index 3ca54ebf..a0204530 100644 --- a/src/components/ApiKeyModalContent.js +++ b/src/components/ApiKeyModalContent.js @@ -1,7 +1,6 @@ import React from 'react' import styled from 'styled-components' import { MeiliSearch as Meilisearch } from 'meilisearch' -import { instantMeiliSearch as instantMeilisearch } from '@meilisearch/instant-meilisearch' import { baseUrl } from 'App' import Box from 'components/Box' @@ -11,7 +10,6 @@ import Link from 'components/Link' import Typography from 'components/Typography' import ApiKeyContext from 'context/ApiKeyContext' -import ClientContext from 'context/ClientContext' import clientAgents from '../version/client-agents' @@ -22,7 +20,6 @@ const ErrorMessage = styled(Typography)` ` const ApiKeyModalContent = ({ closeModal }) => { - const { setISClient, setMSClient } = React.useContext(ClientContext) const { apiKey, setApiKey } = React.useContext(ApiKeyContext) const [value, setValue] = React.useState(apiKey || '') const [error, setError] = React.useState() @@ -36,8 +33,6 @@ const ApiKeyModalContent = ({ closeModal }) => { try { await clientToTry.getIndexes() setApiKey(value) - setISClient(instantMeilisearch(baseUrl, value, { clientAgents })) - setMSClient(clientToTry) closeModal() setError() } catch (err) { From 44914ff11339098bdefbb51a3e1aef93e356ed04 Mon Sep 17 00:00:00 2001 From: Charlotte Vermandel Date: Mon, 13 Mar 2023 17:39:39 +0100 Subject: [PATCH 3/4] Remove client context --- .github/workflows/tests.yml | 44 ++++++++++- cypress/e2e/test-api-key-query-param.cy.js | 39 +++++++++ package.json | 2 + src/App.js | 92 ++++++++++------------ src/context/ClientContext.js | 13 --- 5 files changed, 127 insertions(+), 63 deletions(-) create mode 100644 cypress/e2e/test-api-key-query-param.cy.js delete mode 100644 src/context/ClientContext.js diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index e2ac702a..ab4324f3 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -83,7 +83,7 @@ jobs: with: start: yarn start:ci wait-on: 'http://0.0.0.0:3000' - command: yarn cy:run + command: yarn cy:run:test-no-api-key config-file: cypress.config.js - uses: actions/upload-artifact@v3 if: failure() @@ -137,3 +137,45 @@ jobs: with: name: cypress-videos path: cypress/videos + cypress_meilisearch-api-key-query-param: + runs-on: ubuntu-latest + container: + image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge + options: --user 1001 + services: + meilisearch: + image: getmeili/meilisearch:v0.30.5 + env: + MEILI_MASTER_KEY: 'masterKey' + MEILI_NO_ANALYTICS: 'true' + ports: + - '7700:7700' + steps: + - uses: actions/checkout@v3 + - name: Setup node and cache + uses: actions/setup-node@v3 + with: + node-version: 16 + cache: "yarn" + cache-dependency-path: yarn.lock + - name: Install dependencies + run: yarn + - name: Test + uses: cypress-io/github-action@v4 + env: + CYPRESS_host: http://meilisearch:7700 + with: + start: yarn start:ci + wait-on: 'http://0.0.0.0:3000' + command: yarn cy:run:test-api-key-required + config-file: cypress.config.js + - uses: actions/upload-artifact@v3 + if: failure() + with: + name: cypress-screenshots + path: cypress/screenshots + - uses: actions/upload-artifact@v3 + if: failure() + with: + name: cypress-videos + path: cypress/videos diff --git a/cypress/e2e/test-api-key-query-param.cy.js b/cypress/e2e/test-api-key-query-param.cy.js new file mode 100644 index 00000000..7e27db6d --- /dev/null +++ b/cypress/e2e/test-api-key-query-param.cy.js @@ -0,0 +1,39 @@ +/* eslint-disable cypress/no-unnecessary-waiting */ +const API_KEY = Cypress.env('apiKey') +const WAITING_TIME = Cypress.env('waitingTime') + +describe(`Test API key required with query params`, () => { + before(() => { + cy.deleteAllIndexes() + + cy.wait(WAITING_TIME) + cy.createIndex('movies') + cy.wait(WAITING_TIME) + cy.fixture('movies.json').then((movies) => { + cy.addDocuments('movies', movies) + cy.wait(WAITING_TIME) + }) + }) + + beforeEach(() => { + cy.visit(`/?api_key=${API_KEY}`) + }) + + it('Should display the movies', () => { + cy.get('ul') + .children() + .should(($p) => { + expect($p).to.have.length(20) + }) + }) + + it('Should have the api key written in the modal', () => { + // Test if the query parameter is written in the modal + // meaning it is added in the local storage + cy.get('span').contains('Api Key').parent().click() + cy.get('div[aria-label=settings-api-key]').within(() => { + cy.get('input[name="apiKey"]').should('have.value', API_KEY) + cy.get('button').contains('Go').click() + }) + }) +}) diff --git a/package.json b/package.json index 66693986..105c2ab4 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "cy:open": "cypress open", "cy:run:test-no-meilisearch": "cypress run --spec '**/*/test-no-meilisearch.cy.js'", "cy:run:test-api-key-required": "cypress run --spec '**/*/test-api-key-required.cy.js'", + "cy:run:test-api-key-query-param": "cypress run --spec '**/*/test-api-key-query-param.cy.js'", + "cy:run:test-no-api-key": "cypress run --spec '**/*/test-no-api-key-required.cy.js'", "cy:run": "cypress run --config excludeSpecPattern=['**/*/test-no-meilisearch.cy.js','**/*/test-api-key-required.cy.js']", "icons": "npx @svgr/cli --title-prop --no-dimensions --replace-attr-values \"#39486E=currentColor,#959DB3=currentColor\" -d src/components/icons src/components/icons/svg" }, diff --git a/src/App.js b/src/App.js index d3ee22b8..23a9f4e4 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,6 @@ import Modal from 'components/Modal' import OnBoarding from 'components/OnBoarding' import Results from 'components/Results' import ApiKeyContext from 'context/ApiKeyContext' -import ClientContext from 'context/ClientContext' import Typography from 'components/Typography' import { MeiliSearch as Meilisearch } from 'meilisearch' @@ -145,6 +144,7 @@ const App = () => { if (apiKeyParam) { setApiKey(apiKeyParam) } + // Check if an API key is required / a masterKey was set const fetchWithoutApiKey = async () => { try { @@ -201,55 +201,49 @@ const App = () => { getIndexesList() }, [MSClient, currentIndex?.uid]) - const clientContext = React.useMemo( - () => ({ ISClient, MSClient, setISClient, setMSClient }), - [] - ) return ( - - - - -
- - {/* */} - - {isMeilisearchRunning ? ( - - ) : ( - - )} - - - - - dialog.hide()} /> - - - - + + + +
+ + {/* */} + + {isMeilisearchRunning ? ( + + ) : ( + + )} + + + + + dialog.hide()} /> + + + ) } diff --git a/src/context/ClientContext.js b/src/context/ClientContext.js deleted file mode 100644 index 7a445f26..00000000 --- a/src/context/ClientContext.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -const ClientContext = React.createContext({ - ISClient: {}, - IMSlient: {}, - setISClient: () => {}, - setMSClient: () => {}, -}) - -export const ClientProvider = ClientContext.Provider -export const ClientConsumer = ClientContext.Consumer - -export default ClientContext From b1c61268484ad3419c1d82b983551abd6c878abb Mon Sep 17 00:00:00 2001 From: Charlotte Vermandel Date: Tue, 14 Mar 2023 12:27:30 +0100 Subject: [PATCH 4/4] Apply review changes --- .github/workflows/tests.yml | 49 ++-------------------- cypress/e2e/test-api-key-query-param.cy.js | 1 - package.json | 6 +-- 3 files changed, 6 insertions(+), 50 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index ab4324f3..5b2417eb 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -61,7 +61,7 @@ jobs: options: --user 1001 services: meilisearch: - image: getmeili/meilisearch:v0.30.5 + image: getmeili/meilisearch:v1.0.2 env: MEILI_NO_ANALYTICS: 'true' ports: @@ -83,7 +83,7 @@ jobs: with: start: yarn start:ci wait-on: 'http://0.0.0.0:3000' - command: yarn cy:run:test-no-api-key + command: yarn cy:run config-file: cypress.config.js - uses: actions/upload-artifact@v3 if: failure() @@ -102,49 +102,7 @@ jobs: options: --user 1001 services: meilisearch: - image: getmeili/meilisearch:v0.30.5 - env: - MEILI_MASTER_KEY: 'masterKey' - MEILI_NO_ANALYTICS: 'true' - ports: - - '7700:7700' - steps: - - uses: actions/checkout@v3 - - name: Setup node and cache - uses: actions/setup-node@v3 - with: - node-version: 16 - cache: "yarn" - cache-dependency-path: yarn.lock - - name: Install dependencies - run: yarn - - name: Test - uses: cypress-io/github-action@v4 - env: - CYPRESS_host: http://meilisearch:7700 - with: - start: yarn start:ci - wait-on: 'http://0.0.0.0:3000' - command: yarn cy:run:test-api-key-required - config-file: cypress.config.js - - uses: actions/upload-artifact@v3 - if: failure() - with: - name: cypress-screenshots - path: cypress/screenshots - - uses: actions/upload-artifact@v3 - if: failure() - with: - name: cypress-videos - path: cypress/videos - cypress_meilisearch-api-key-query-param: - runs-on: ubuntu-latest - container: - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge - options: --user 1001 - services: - meilisearch: - image: getmeili/meilisearch:v0.30.5 + image: getmeili/meilisearch:v1.0.2 env: MEILI_MASTER_KEY: 'masterKey' MEILI_NO_ANALYTICS: 'true' @@ -179,3 +137,4 @@ jobs: with: name: cypress-videos path: cypress/videos + \ No newline at end of file diff --git a/cypress/e2e/test-api-key-query-param.cy.js b/cypress/e2e/test-api-key-query-param.cy.js index 7e27db6d..2e6fa053 100644 --- a/cypress/e2e/test-api-key-query-param.cy.js +++ b/cypress/e2e/test-api-key-query-param.cy.js @@ -33,7 +33,6 @@ describe(`Test API key required with query params`, () => { cy.get('span').contains('Api Key').parent().click() cy.get('div[aria-label=settings-api-key]').within(() => { cy.get('input[name="apiKey"]').should('have.value', API_KEY) - cy.get('button').contains('Go').click() }) }) }) diff --git a/package.json b/package.json index 105c2ab4..22ce21b4 100644 --- a/package.json +++ b/package.json @@ -35,10 +35,8 @@ "build-storybook": "build-storybook", "cy:open": "cypress open", "cy:run:test-no-meilisearch": "cypress run --spec '**/*/test-no-meilisearch.cy.js'", - "cy:run:test-api-key-required": "cypress run --spec '**/*/test-api-key-required.cy.js'", - "cy:run:test-api-key-query-param": "cypress run --spec '**/*/test-api-key-query-param.cy.js'", - "cy:run:test-no-api-key": "cypress run --spec '**/*/test-no-api-key-required.cy.js'", - "cy:run": "cypress run --config excludeSpecPattern=['**/*/test-no-meilisearch.cy.js','**/*/test-api-key-required.cy.js']", + "cy:run:test-api-key-required": "cypress run --spec '**/*/test-api-key-required.cy.js,**/*/test-api-key-query-param.cy.js'", + "cy:run": "cypress run --config excludeSpecPattern=['**/*/test-no-meilisearch.cy.js','**/*/test-api-key-required.cy.js','**/*/test-api-key-query-param.cy.js']", "icons": "npx @svgr/cli --title-prop --no-dimensions --replace-attr-values \"#39486E=currentColor,#959DB3=currentColor\" -d src/components/icons src/components/icons/svg" }, "browserslist": [