extensibility: add featured extensions to registry (#21665)

Co-authored-by: ᴜɴᴋɴᴡᴏɴ <[email protected]>

Author: tjkandala

CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to Sourcegraph are documented in this file.
 - Code Insights creation UI now has auto-save logic and clear all fields functionality [#21744](https://github.com/sourcegraph/sourcegraph/pull/21744)
 - A new bulk operation to retry many changesets at once has been added to Batch Changes. [#21173](https://github.com/sourcegraph/sourcegraph/pull/21173)
 - A `security_event_logs` database table has been added in support of upcoming security-related efforts. [#21949](https://github.com/sourcegraph/sourcegraph/pull/21949)
+- Added featured Sourcegraph extensions query to the GraphQL API, as well as a section in the extension registry to display featured extensions. [#21665](https://github.com/sourcegraph/sourcegraph/pull/21665)
 
 ### Changed
 

client/web/src/extensions/ExtensionCard.scss

@@ -1,6 +1,8 @@
 @import '../../../branded/src/components/Toggle.scss';
 
 .extension-card {
+    --icon-width: 3rem;
+
     &__background-section {
         height: 4.25rem;
         position: relative;
@@ -19,16 +21,26 @@
                 opacity: 0.15;
             }
         }
+
+        &--featured {
+            height: 8rem;
+        }
     }
 
     &__icon {
-        width: 3rem;
+        width: var(--icon-width);
         height: 3rem;
         object-fit: contain;
 
         position: absolute;
         left: 0;
         margin-left: 0.75rem;
+
+        &--featured {
+            // horizontally center icon over ::before pseudo-element background
+            left: calc(50% - (var(--icon-width) / 2));
+            margin-left: 0;
+        }
     }
 
     &__badge {

client/web/src/extensions/ExtensionCard.tsx

@@ -45,6 +45,9 @@ interface Props extends SettingsCascadeProps, PlatformContextProps<'updateSettin
     settingsURL: string | null | undefined
     /** The currently authenticated user. */
     authenticatedUser: AuthenticatedUser | null
+
+    /** Whether this is a featured extension. */
+    featured?: boolean
 }
 
 /** ms after which to remove visual feedback */
@@ -63,6 +66,7 @@ export const ExtensionCard = memo<Props>(function ExtensionCard({
     viewerSubject,
     siteSubject,
     authenticatedUser,
+    featured,
 }) {
     const manifest: ExtensionManifest | undefined =
         extension.manifest && !isErrorLike(extension.manifest) ? extension.manifest : undefined
@@ -174,6 +178,8 @@ export const ExtensionCard = memo<Props>(function ExtensionCard({
         return headerColorFromExtensionID(extension.id)
     }, [manifest?.headerColor, extension.id])
 
+    const iconClassName = classNames('extension-card__icon', featured && 'extension-card__icon--featured')
+
     return (
         <div
             className={classNames('extension-card card position-relative flex-1', {
@@ -185,15 +191,16 @@ export const ExtensionCard = memo<Props>(function ExtensionCard({
                 <div
                     className={classNames(
                         'extension-card__background-section d-flex align-items-center',
-                        headerColorStyles[headerColorClassName]
+                        headerColorStyles[headerColorClassName],
+                        featured && 'extension-card__background-section--featured'
                     )}
                 >
                     {icon ? (
-                        <img className="extension-card__icon" src={icon} alt="" />
+                        <img className={iconClassName} src={icon} alt="" />
                     ) : isSourcegraphExtension ? (
-                        <DefaultSourcegraphExtensionIcon className="extension-card__icon" />
+                        <DefaultSourcegraphExtensionIcon className={iconClassName} />
                     ) : (
-                        <DefaultExtensionIcon className="extension-card__icon" />
+                        <DefaultExtensionIcon className={iconClassName} />
                     )}
                     {extension.registryExtension?.isWorkInProgress && (
                         <ExtensionStatusBadge
@@ -215,7 +222,12 @@ export const ExtensionCard = memo<Props>(function ExtensionCard({
                             )}
                         </span>
                     </div>
-                    <div className="mt-3 extension-card__description">
+                    <div
+                        className={classNames(
+                            'mt-3 extension-card__description',
+                            featured && 'extension-card__description--featured'
+                        )}
+                    >
                         {extension.manifest ? (
                             isErrorLike(extension.manifest) ? (
                                 <span className="text-danger small" title={extension.manifest.message}>

client/web/src/extensions/ExtensionRegistry.tsx

@@ -25,7 +25,12 @@ import { eventLogger } from '../tracking/eventLogger'
 
 import { ExtensionBanner } from './ExtensionBanner'
 import { ExtensionRegistrySidenav } from './ExtensionRegistrySidenav'
-import { configureExtensionRegistry, ConfiguredExtensionRegistry } from './extensions'
+import {
+    configureExtensionRegistry,
+    ConfiguredExtensionRegistry,
+    MinimalConfiguredRegistryExtension,
+    configureFeaturedExtensions,
+} from './extensions'
 import { ExtensionsAreaRouteContext } from './ExtensionsArea'
 import { ExtensionsList } from './ExtensionsList'
 
@@ -43,21 +48,33 @@ const URL_QUERY_PARAM = 'query'
 const URL_CATEGORY_PARAM = 'category'
 const SHOW_EXPERIMENTAL_EXTENSIONS_KEY = 'show-experimental-extensions'
 
-export type ExtensionListData = typeof LOADING | (ConfiguredExtensionRegistry & { error: string | null }) | ErrorLike
+export type ExtensionListData =
+    | typeof LOADING
+    | (ConfiguredExtensionRegistry & {
+          featuredExtensions?: MinimalConfiguredRegistryExtension[]
+          error: string | null
+      })
+    | ErrorLike
 
 export type ExtensionsEnablement = 'all' | 'enabled' | 'disabled'
 
 export type ExtensionCategoryOrAll = ExtensionCategory | 'All'
 
 const extensionRegistryQuery = gql`
-    query RegistryExtensions($query: String, $prioritizeExtensionIDs: [String!]!) {
+    query RegistryExtensions($query: String, $prioritizeExtensionIDs: [String!]!, $getFeatured: Boolean!) {
         extensionRegistry {
             extensions(query: $query, prioritizeExtensionIDs: $prioritizeExtensionIDs) {
                 nodes {
                     ...RegistryExtensionFieldsForList
                 }
                 error
             }
+            featuredExtensions @include(if: $getFeatured) {
+                nodes {
+                    ...RegistryExtensionFieldsForList
+                }
+                error
+            }
         }
     }
     fragment RegistryExtensionFieldsForList on RegistryExtension {
@@ -95,10 +112,7 @@ const extensionRegistryQuery = gql`
     }
 `
 
-export type ConfiguredExtensionCache = Map<
-    string,
-    Pick<ConfiguredRegistryExtension<RegistryExtensionFieldsForList>, 'manifest' | 'id'>
->
+export type ConfiguredExtensionCache = Map<string, MinimalConfiguredRegistryExtension>
 
 /** A page that displays overview information about the available extensions. */
 export const ExtensionRegistry: React.FunctionComponent<Props> = props => {
@@ -179,12 +193,19 @@ export const ExtensionRegistry: React.FunctionComponent<Props> = props => {
                             query = `${query} category:"${category}"`
                         }
 
+                        // Only fetch + show featured extensions when there's no query or category selected.
+                        const shouldGetFeaturedExtensions = category === 'All' && query.trim() === ''
+
                         const resultOrError = platformContext.requestGraphQL<
                             RegistryExtensionsResult,
                             RegistryExtensionsVariables
                         >({
                             request: extensionRegistryQuery,
-                            variables: { query, prioritizeExtensionIDs: viewerConfiguredExtensions },
+                            variables: {
+                                query,
+                                prioritizeExtensionIDs: viewerConfiguredExtensions,
+                                getFeatured: shouldGetFeaturedExtensions,
+                            },
                             mightContainPrivateInfo: true,
                         })
 
@@ -206,8 +227,16 @@ export const ExtensionRegistry: React.FunctionComponent<Props> = props => {
 
                         const { error, nodes } = data.extensionRegistry.extensions
 
+                        const featuredExtensions = data.extensionRegistry.featuredExtensions?.nodes
+                            ? configureFeaturedExtensions(
+                                  data.extensionRegistry.featuredExtensions.nodes,
+                                  configuredExtensionCache
+                              )
+                            : undefined
+
                         return {
                             error,
+                            featuredExtensions,
                             ...configureExtensionRegistry(nodes, configuredExtensionCache),
                         }
                     }),

client/web/src/extensions/ExtensionsList.scss

@@ -2,12 +2,36 @@
     &__cards {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
-        grid-auto-rows: minmax(4rem, auto);
+        grid-auto-rows: minmax(16.25rem, auto);
         gap: $spacer * 0.75;
+
+        &--featured {
+            grid-auto-rows: minmax(21.25rem, auto);
+        }
     }
 
     &__category {
         margin-top: 2rem;
         font-size: 1.5rem !important;
     }
+
+    &__featured-section {
+        position: relative;
+        // 2rem gap before next section, 1rem extra for visual effect of ::before pseudo-element.
+        margin-bottom: 3rem;
+        // Same as above but for 2rem gap between featured section and search bar.
+        margin-top: 3rem;
+
+        // Use pseudo-element to make background "bleed out" of the container.
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            inset: -1rem;
+            background-color: var(--color-bg-1);
+            border: 1px solid var(--border-color-2);
+            border-radius: var(--border-radius);
+            padding: 0.5rem;
+        }
+    }
 }

client/web/src/extensions/ExtensionsList.tsx

@@ -87,7 +87,39 @@ export const ExtensionsList: React.FunctionComponent<Props> = ({
         return <ErrorAlert error={data} />
     }
 
-    const { error, extensions, extensionIDsByCategory } = data
+    const { error, extensions, extensionIDsByCategory, featuredExtensions } = data
+
+    const featuredExtensionsSection = featuredExtensions && featuredExtensions.length > 0 && (
+        <div key="Featured" className="extensions-list__featured-section">
+            <h3
+                className="extensions-list__category mb-3 font-weight-normal"
+                data-test-extension-category-header="Featured"
+            >
+                Featured
+            </h3>
+            <div className="extensions-list__cards extensions-list__cards--featured mt-1">
+                {featuredExtensions.map(featuredExtension => (
+                    <ExtensionCard
+                        key={featuredExtension.id}
+                        subject={subject}
+                        viewerSubject={viewerSubject?.subject}
+                        siteSubject={siteSubject?.subject}
+                        node={featuredExtension}
+                        settingsCascade={settingsCascade}
+                        platformContext={platformContext}
+                        enabled={isExtensionEnabled(settingsCascade.final, featuredExtension.id)}
+                        enabledForAllUsers={
+                            siteSubject ? isExtensionEnabled(siteSubject.settings, featuredExtension.id) : false
+                        }
+                        isLightTheme={props.isLightTheme}
+                        settingsURL={authenticatedUser?.settingsURL}
+                        authenticatedUser={authenticatedUser}
+                        featured={true}
+                    />
+                ))}
+            </div>
+        </div>
+    )
 
     if (Object.keys(extensions).length === 0) {
         return (
@@ -213,6 +245,7 @@ export const ExtensionsList: React.FunctionComponent<Props> = ({
     return (
         <>
             {error && <ErrorAlert className="mb-2" error={error} />}
+            {featuredExtensionsSection}
             {categorySections.length > 0 ? (
                 categorySections
             ) : (

client/web/src/extensions/extensions.ts

@@ -14,8 +14,13 @@ import { RegistryExtensionFieldsForList } from '../graphql-operations'
 import { validCategories } from './extension/extension'
 import { ConfiguredExtensionCache, ExtensionsEnablement } from './ExtensionRegistry'
 
+export type MinimalConfiguredRegistryExtension = Pick<
+    ConfiguredRegistryExtension<RegistryExtensionFieldsForList>,
+    'manifest' | 'id'
+>
+
 export interface ConfiguredRegistryExtensions {
-    [id: string]: Pick<ConfiguredRegistryExtension<RegistryExtensionFieldsForList>, 'manifest' | 'id'>
+    [id: string]: MinimalConfiguredRegistryExtension
 }
 
 export interface ConfiguredExtensionRegistry {
@@ -85,6 +90,30 @@ export function configureExtensionRegistry(
     return { extensions, extensionIDsByCategory }
 }
 
+/**
+ * Configures featured extensions to be displayed on the extension registry.
+ *
+ * Share configured extension cache with `configureExtensionRegistry`
+ * since featured extensions are likely to be displayed twice on the page.
+ */
+export function configureFeaturedExtensions(
+    featuredExtensions: RegistryExtensionFieldsForList[],
+    configuredExtensionCache: ConfiguredExtensionCache
+): MinimalConfiguredRegistryExtension[] {
+    const extensions: MinimalConfiguredRegistryExtension[] = []
+
+    for (const featuredExtension of featuredExtensions) {
+        let configuredRegistryExtension = configuredExtensionCache.get(featuredExtension.id)
+        if (!configuredRegistryExtension) {
+            configuredRegistryExtension = toConfiguredRegistryExtension(featuredExtension)
+            configuredExtensionCache.set(featuredExtension.id, configuredRegistryExtension)
+        }
+        extensions.push(configuredRegistryExtension)
+    }
+
+    return extensions
+}
+
 /**
  * Removes extensions that do not satify the enablement filter.
  *

client/web/src/integration/extension-registry.test.ts

@@ -196,6 +196,7 @@ describe('Extension Registry', () => {
                         error: null,
                         nodes: registryExtensionNodes,
                     },
+                    featuredExtensions: null,
                 },
             }),
             Extensions: () => ({
@@ -274,7 +275,11 @@ describe('Extension Registry', () => {
                 })
             }, 'RegistryExtensions')
 
-            assert.deepStrictEqual(request, { query: 'sqs', prioritizeExtensionIDs: ['sqs/word-count'] })
+            assert.deepStrictEqual(request, {
+                getFeatured: false,
+                query: 'sqs',
+                prioritizeExtensionIDs: ['sqs/word-count'],
+            })
         })
     })
 

client/web/src/integration/search.test.ts

@@ -222,7 +222,9 @@ describe('Search', () => {
         test('Is set from the URL query parameter when loading a search-related page', async () => {
             testContext.overrideGraphQL({
                 ...commonSearchGraphQLResults,
-                RegistryExtensions: () => ({ extensionRegistry: { extensions: { error: null, nodes: [] } } }),
+                RegistryExtensions: () => ({
+                    extensionRegistry: { extensions: { error: null, nodes: [] }, featuredExtensions: null },
+                }),
             })
             testContext.overrideSearchStreamEvents(mockDefaultStreamEvents)
 

cmd/frontend/graphqlbackend/extension_registry.go

@@ -46,6 +46,7 @@ type ExtensionRegistryResolver interface {
 	PublishExtension(context.Context, *ExtensionRegistryPublishExtensionArgs) (ExtensionRegistryMutationResult, error)
 	DeleteExtension(context.Context, *ExtensionRegistryDeleteExtensionArgs) (*EmptyResponse, error)
 	LocalExtensionIDPrefix() *string
+	FeaturedExtensions(context.Context) (FeaturedExtensionsConnection, error)
 
 	ImplementsLocalExtensionRegistry() bool // not exposed via GraphQL
 	// FilterRemoteExtensions enforces `allowRemoteExtensions` by returning a
@@ -154,3 +155,9 @@ type RegistryPublisherConnection interface {
 	TotalCount(context.Context) (int32, error)
 	PageInfo(context.Context) (*graphqlutil.PageInfo, error)
 }
+
+// FeaturedExtensions is the interface for the GraphQL type FeaturedExtensionsConnection.
+type FeaturedExtensionsConnection interface {
+	Nodes(context.Context) ([]RegistryExtension, error)
+	Error(context.Context) *string
+}