Change copy, enable sync all behind a user tag

Created by: artemruts

Description

These changes slightly change the copy and enables Sync all repositories radio button when the user has the AllowUserExternalServicePrivate tag. Radio button are behind the shimmer effect now.

Details

1. AllowUserExternalServicePrivate tag controls minor copy changes and enables the Sync all repositories radio button

2. Sync all repositories radio button

Repo selection radio buttons had to be placed behind a shimmer.
When the private code is enabled we need to determine if the user selected all of the affiliate repos, and if we should set Sync all repositories radio button as active. To do that we need to wait for two queries to complete:

• ExternalServices - to check if code hosts are configure and to build a list of all synced (already selected) affiliated repos;
• AffiliatedRepositories - to determine how many affiliated repos user has.

Queries need to happen serially because AffiliatedRepositories endpoint can only be queried when the code host(s) are configured. Executing queries serially gives us control wether we should send the AffiliatedRepositories request. Serial requests create latency and that's why the shimmer was modified and moved.

How to test

Using psql connect to the sourcegraph (most likely the default) db and execute the following query:

1. Set user tag a. adding user AllowUserExternalServicePrivate tag:

   update users set tags = array_append(tags, 'AllowUserExternalServicePrivate') where username = '<your username>';

   https://user-images.githubusercontent.com/1319181/116275902-05b77c80-a752-11eb-96db-01d3bf9c6e6c.mov

   b. removing user tag:

   update users set tags = array_remove(tags, 'AllowUserExternalServicePrivate') where username = '<your username>';

2. Use personal access token to add new code host connection

3. Navigate to Settings → Repositories page

Demos

 Detailed demos. Same functionality, outdated shimmer

1. Private code enabled, all repos we synced

https://user-images.githubusercontent.com/1319181/115652302-050a8a80-a2fb-11eb-852d-4772e1ac4460.mov

2. Private code enabled, some repos we synced

https://user-images.githubusercontent.com/1319181/115652499-62064080-a2fb-11eb-9981-676f98cacd7c.mov

3. Private code enabled, none we synced

https://user-images.githubusercontent.com/1319181/115653158-a5ad7a00-a2fc-11eb-82d8-55eb17cb8741.mov

3. Private code disabled, all public repos we synced

https://user-images.githubusercontent.com/1319181/115652795-e789f080-a2fb-11eb-90d6-be589ad38817.mov

4. Private code disabled, some public repos we synced

https://user-images.githubusercontent.com/1319181/115652862-0ee0bd80-a2fc-11eb-9501-1a1348c22b7e.mov

5. Private code disabled, none public we synced

https://user-images.githubusercontent.com/1319181/115653265-d9889f80-a2fc-11eb-982b-f9b218629c1c.mov

Questions

• is it enough to put private repos behind the AllowUserExternalServicePrivate tag?

Page is accessible only by signed-in users with AllowUserExternalServicePublic tag. Do we need anything special for Admins?