Add interactive search

[katjuell]

What should this PR do?

Resolves DEVED-110 by adding an interactive search component to do interactive searches in posts using the Sourcegraph product.

Also resolves DEVED-146 by adding a backend to the repo, which will be deployed as a separate service via Docker (see DEVED-151).

Also (last one) resolves DEVED-151, which containerizes the backend for local dev testing and deployment (see instructions for local dev below).

Right now, this feature will return a set number of string query matches from a locally configured Sourcegraph Docker container (configuration details below). In the short term, it is possible to iterate on this WIP using a local Docker setup. The next step will be configuring a more robust test setup on a dedicated test VM using the Compose workflow. From there, we can move on to configuring our prod setup.

Quick video demo

Screen.Recording.2022-01-03.at.1.50.56.PM.mov

Why are we making this change?

• We would like to have interactivity on our posts, and to be able to demonstrate Sourcegraph in action.

What are the acceptance criteria?

• Meaningful results are displayed on tutorials that use the SourcegraphInteractiveSearch component.
• Displayed results are highlighted correctly, depending on the type of search.
• Mobile views display correctly.
• New queries can be entered into the search input field, and meaningful results are returned when the Search on Sourcegraph button is clicked.
• The search on Sourcegraph cloud option opens SG cloud in another tab with the correct query.
• Query input for SG cloud should match what has been most recently entered into the InteractiveSearch input field.

How should this PR be tested?

• Install Ngrok locally, if you do not already have it.
• In your ngrok.yml config file, add the following config to create two tunnels below your authtoken:

tunnels:
  first:
    addr: 3000
    proto: http    
  second:
    addr: 7080
    proto: http

NB: You can create multiple tunnels on a free tier account

• Create the tunnels with ./ngrok start --all
• Clone sourcegraph/sourcegraph if you do not have it already, navigate to the dev directory, and run the run-server-image.sh script: ./run-server-image.sh
• Navigate to localhost:7080 and sign up for an admin account on your local instance.
• Once you are in, generate an access token under http://localhost:7080/site-admin/tokens. Note: this does not need to be a sudo token.
• In your site config (http://localhost:7080/site-admin/configuration), add the following values, using your ngrok output from the terminal, which should look like this:

Forwarding                    http://21dda4518c8a.ngrok.io -> http://localhost:7080                                                            
Forwarding                    https://21dda4518c8a.ngrok.io -> http://localhost:7080                                                           
Forwarding                    http://eacfc82777a1.ngrok.io -> http://localhost:3000                                                            
Forwarding                    https://eacfc82777a1.ngrok.io -> http://localhost:3000         

In your Sourcegraph site config, add the following values:

"externalURL": "<your ngrok 7080 tunnel>",
"corsOrigin": "<your ngrok 3000 tunnel>",

• Add the following repos to your site config to get meaningful search results on the tutorial records that use interactive search:

"repos": [
    "sourcegraph/sourcegraph",
    "sourcegraph/about",
    "sivkun/react-analysis",
    "commaai/openpilot",
    "30-seconds/30-seconds-of-code",
    "prisma/women-world-wide",
    "elastic/elasticsearch",
    "GoogleCloudPlatform/functions-framework-python"
  ]

• Next, make sure that you have run the script/install.sh script, to get the local dependencies in your backend and client directories.
• Go to backend/.env and fill out the following values:

ORIGIN_URL='<your ngrok 3000 tunnel>'
SEARCH_API_AUTH_TOKEN='<your sourcegraph access token>'
SEARCH_API_URL='<your ngrok 7080 tunnel>/.api/graphql'

• Test without Docker: Split your terminal, and, in one pane, cd to the client directory and start up your dev server: npm run dev. In the other pane, cd to the backend directory, and fire it up: npm run start.
• Using your ngrok 3000 url, navigate to regular-expression-patterns to see the SourcegraphInteractiveSearch component in action, or add it to another record of your choosing using the following pattern:

<SourcegraphInteractiveSearch initialQuery=<your query> />

• Test with Docker: In client/.env, update your SEARCH_URL to be the following value:

SEARCH_URL='http://localhost/search'

• Split your terminal, and, in one pane, cd to the client directory and start up your dev server: npm run dev. In the other pane, cd to the backend directory, and fire up the Docker setup: docker-compose up -d
• Using your ngrok 3000 url, navigate to regular-expression-patterns to see the SourcegraphInteractiveSearch component in action

Pull request process

Reviewers:

1. Test functionality using the criteria above.
2. Offer tips for efficiency, feedback on best practices, and possible alternative approaches and things that may not have been considered.
3. For shorter, "quick" PRs, use your best judgement on #​2.
4. Use a collaborative approach and provide resources and/or context where appropriate.
5. Provide screenshots/grabs where appropriate to show findings during review.

Reviewees:

1. Prefer incremental and appropriately-scoped changes.
2. Leave a comment on things you want explicit feedback on.
3. Respond clearly to comments and questions.

[netlify]

✔️ Deploy Preview for sourcegraph-learn ready!

🔨 Explore the source changes: 7fbab7a

🔍 Inspect the deploy log: https://app.netlify.com/sites/sourcegraph-learn/deploys/614e4e3bed3a4c0007505b5b

😎 Browse the preview: https://deploy-preview-177--sourcegraph-learn.netlify.app