Skip to content

RFC 209: Extensions Discoverability

Created by: tjkandala

New Components

  • Big Toggle #13287
  • Common CTA banner

UX Changes

1) Entry Point #13699 (left: 0d. Needs review)

  • Add 'Extensions' with puzzle icon to navigation bar for all users
  • Display 'add extensions' for un-auth users and auth users who only have default extensions enabled.
    • Create function to determine if only default extensions are enabled.
    • Use new outlined button style

2) Extensions Registry #13699 (left: 2d)

  • Categories [change]

    • Each extension is assigned to only one category (use first category only)
    • New list of categories
    • Extensions list is now divided into the new categories
    • Programming languages category is not visible at first
    • (ongoing) Create new code editors extensions #13270 (closed)

  • Change 'Create new extension' label to 'Publish new extension'

  • Add informative text above the search bar on the extension registry

  • Search and filters [change]

    • Add a blue shadow to the search bar
    • Category filter changed from dropdown to toggle buttons
    • Category buttons work as toggles - can be turned on and off. It is possible to have more than one category button on
    • 'Options' filter dropdown changed to 'Show all' filter menu
    • Category buttons styles as outlined tag buttons used on the extension details page (add active state)

  • Extension card [change]

    • Reorder 'author/name' to extension name + 'by' author
    • Update text colors for extension name and author
    • Add a default puzzle icon to Sourcegraph extensions that have no icon
    • Update the text color for 'Disabled' label
    • Change the toggle component to new style (see #13287)

  • Un-auth users banners (for extension registry and extension details pages) [change]

    • Remove primary CTA button
    • Update text to 'An account is required to create and configure extensions. Register now!'
    • 'Register now' leads to the signup page. After singing up, user should be redirected back to the extension registry
    • Remove inline CTA and description displayed in the extension details page
    • Add alert displayed on hover on the toggle for un-auth users
    • Use big toggle on extension details page (see #13287)

  • Visual feedback: success state to the extension card in extension registry [add]

    • For default extension icon, change icon to success state (with a green check)
    • Change text to '[extension name] is now enabled in code search results. See how it works' ('See how it works links to extension details page')
    • Add contextual alert for enabled notification
    • Add contextual alert for disabled notification
    • Add transitions for visual feedback

  • - Integrate new page header and breadcrumbs

3) Creating New Extensions #13699 (left: 0d. Needs review)

  • Add a banner with CTA at the end of the extension registry.

  • Add link to Sourcegraph Docs (authoring extensions) to the create new extension page.

4) Command Palette #13305 (left: 0d)

  • Add an empty state to the command palette if there are no actions available
    • Display different messages to users with only default extensions and users who simply have no active extensions
    • Implement styles and illustration from Figma
    • Implement host-agnostic styling

5) Action Items Bar (left: unclear)

  • Visual adjustments

    • Action items for extensions are all displayed as icons. No labels expect for Codecov.
    • Extension action items should be displayed at all times, with active and disabled (40% opacity) states.
    • For inactive icons, display regular tooltips.
    • Extensions that have no action items should not be displayed in the bar.
    • For extensions that do not have icons, display a standard rectangular 'avatar' with the first 2 letters of its name.
      • For code owners information, only numbers should be displayed
    • On hover, keep the currently displayed tooltips.
    • Reduce the padding around action items to 0.375rem.
    • Add a divider between file-oriented action items and extensions.

  • Codecov extension

    • When active, label (percentage) should be displayed.
    • When disabled, remove label, only icon (40% opacity) should be displayed.
    • Change the disabled tooltip to 'There is no data about code coverage for this file'

  • Move repository settings from the action items bar to the Repository page

Refactoring

  • - Rename ExtensionsOverviewPage to ExtensionRegistry to align with product terminology
  • - Lift more state up to ExtensionRegistry to make ExtensionsList more focused
  • - Cache configured extensions for the lifetime of ExtensionsList to prevent parsing manifests more than once
  • - Refactor relevant components to function components
  • - Move onlyDefaultExtensionsAdded to /shared
  • - Simplify styles

DOCS

  • - "WIP extensions have a red badge", change red to orange
  • - Update extension categories