Code AI platform with Code Search & Cody
Go to file
Jason Hawk Harris cff1669bc1
Svelte: Perforce UI elements refactor (#64279)
## UI Updates for Perforce Depots and Git Repos

Fixes SRCH-530

**NOTE: This PR is a refactor of an earlier
[PR](https://github.com/sourcegraph/sourcegraph/pull/64014) that was
reverted. For that reason, the PR description is largely the same.**

This PR introduces changes to the UI to differentiate between Perforce
Depots and Git repositories. Below are the key changes included in this
commit:

### 1. Dynamic Top-Level Navigation

**For Perforce Depots:**

![Screenshot 2024-07-31 at 10 10 37
AM](https://github.com/user-attachments/assets/2d261b51-f8fa-4599-acae-3520d38996f3)

**For Git Repos:**

![Screenshot 2024-07-31 at 10 10 14
AM](https://github.com/user-attachments/assets/0f9ee3f7-918a-42d8-908f-04593ed52ebd)

### 2. Tabs on Revision Picker

**For Perforce Depots:**

Since we only need one tab for changelists, no tabs are shown.

![Screenshot 2024-07-31 at 10 20 24
AM](https://github.com/user-attachments/assets/f1006d56-67aa-41ab-a13b-905e157cb283)

**For Git Repos:**

We have tabs for Branches, Tags, and Commits.

![Screenshot 2024-07-31 at 10 23 02
AM](https://github.com/user-attachments/assets/38907d51-0407-4cd7-ad4c-1c5967dfddf3)

### 3. Commits/Changelists Page

**For Git Repos:**

The page displays Git commits.

![Screenshot 2024-07-31 at 10 26 23
AM](https://github.com/user-attachments/assets/85245d1d-708f-4d51-9da3-0425c3f085d0)

**For Perforce Depots:**

The page displays Perforce changelists.

![Screenshot 2024-07-31 at 10 26 39
AM](https://github.com/user-attachments/assets/2f6f16aa-d498-4763-949d-d1a13f9a26ac)

### 4. Vocabulary Adjustments

- We display either Git commit SHAs or Changelist IDs based on the
project type.
- For authorship, we use "submitted by" for Perforce and "committed by"
for Git.
- We refer to "Commits" for Git projects and "Changelists" for Perforce
projects.

**Examples:**

- **For Git Commits:**

![Screenshot 2024-07-31 at 10 37 08
AM](https://github.com/user-attachments/assets/ac15b0b3-4c85-4a4c-80c0-ec9384b72eca)

- **For Perforce Changelists:**

![Screenshot 2024-07-31 at 10 37 35
AM](https://github.com/user-attachments/assets/4230cb32-5285-4141-b374-f3ea23042e1d)

### 5. URL Mapping

URLs are now structured differently based on the project type:

- **Commits Page:**
  - Git: `/[repo-name]/-/commits`
  - Perforce: `/[repo-name]/-/changelists`
  
- **Individual Item Page:**
  - Git: `/[repo-name]/-/commit/[commit-hash]`
  - Perforce: `/[depot-name]/-/changelist/[changelist-ID]`

When viewing a specific commit or changelist:
- **Git:** `/[repo-name]@[git-commit-hash]`
- **Perforce:** `/[repo-name]@changelist/[changelist-id]`

_NOTE: The value displayed in the search field will also change
accordingly._


### What is left to be done?
**On repo search results, when searching a revision, we still show the
git commit SHA instead of the changelist ID for perforce depots:**
![Screenshot 2024-07-31 at 10 59 12
AM](https://github.com/user-attachments/assets/38bc2a3e-be8b-4585-9fe0-776149a7f230)

I plan to make a follow-up issue for this and begin work on it
immediately. It's a little trickier than the other changes because in
the RepositoryMatch type, there is no value that can help us determine
whether a project is a depot or a repo. We need to find another way to
fetch that data.

### Request for reviewers: 
1. Please try to break these new features and tell me what you find. I
stumbled on a number of little gotchas while working on this, and I'm
sure I've missed some.

## Test plan
<!-- REQUIRED; info at
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles
-->
- Manual/Visual testing
- Adjust e2e and integration tests to obtain a passing CI
- Test directly visiting a URL versus getting there via click
- Add unit tests for new/updated helper functions

---------

Co-authored-by: Camden Cheek <camden@ccheek.com>
2024-08-14 19:18:24 +00:00
.apko
.aspect
.buildkite
.github
.vscode
client Svelte: Perforce UI elements refactor (#64279) 2024-08-14 19:18:24 +00:00
cmd Svelte: Perforce UI elements refactor (#64279) 2024-08-14 19:18:24 +00:00
dev
doc
docker-images
internal chore: Bump autoindexing image SHAs (#64472) 2024-08-14 16:39:08 +00:00
lib
migrations
monitoring
schema
testing
third_party
third-party-licenses
tools
ui/assets
wolfi-images
wolfi-packages
.bazel_fix_commands.json
.bazelignore
.bazeliskrc
.bazelrc
.bazelversion
.dockerignore
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.graphqlrc.yml
.hadolint.yaml
.mailmap
.mocharc.js
.npmrc
.pre-commit-config.yaml
.prettierignore
.stylelintignore
.stylelintrc.json
.swcrc
.tool-versions
.trivyignore
BUILD.bazel
CHANGELOG.md
CODENOTIFY
CONTRIBUTING.md
deps.bzl
doc.go
eslint-relative-formatter.js
flake.lock
flake.nix
gen.go
go.mod
go.sum
graphql-schema-linter.config.js
LICENSE
LICENSE.enterprise
linter_deps.bzl
mockgen.temp.yaml
mockgen.test.yaml
mockgen.yaml
nogo_config.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
postcss.config.js
prettier.config.js
README.md
release.yaml
renovate.json
SECURITY.md
service-catalog.yaml
sg.config.yaml
shell.nix
stamp_tags.bzl
tsconfig.base.json
tsconfig.json
vitest.shared.ts
vitest.workspace.ts
WORKSPACE

DocsContributingTwitterDiscord

Build status Scorecard Latest release Discord Contributors


Sourcegraph makes it easy to read, write, and fix code—even in big, complex codebases.

  • Code search: Search all of your repositories across all branches and all code hosts.
  • Code intelligence: Navigate code, find references, see code owners, trace history, and more.
  • Fix and refactor: Roll out large-scale changes to many repositories at once and track big migrations.

Getting started



Development

Refer to the Developing Sourcegraph guide to get started.

Documentation

The doc directory has additional documentation for developing and understanding Sourcegraph:

License

This repository contains primarily non-OSS-licensed files. See LICENSE.

Copyright (c) 2018-present Sourcegraph Inc.