search

uselagoon / lagoon-ui

Apache License 2.0
7 stars 2 forks source link

Output correct version control icon for detected Git URL #246

Open dan2k3k4 opened 5 months ago

dan2k3k4 commented 5 months ago

This is just a suggestion and doesn't need to be taken seriously 😅.

We can detect the type of version control system and output a better icon e.g. for GitHub, BitBucket, GitLab, with fallback to default icon as GitLab.

In src/components/ProjectDetailsSidebar/StyledProjectSidebar.tsx - we output .source class for gitBranchLink

      {gitBranchLink ? (
        <div className="field-wrapper source">

We could adapt this to output a class based on the detected Git URL, e.g.

const isGitHub = () => {
  const patternGitHub = '(?:git|https?|git@)(?:\\:\\/\\/)?github.com[/|:][A-Za-z0-9-]+?\\/[\\w\\.-]+?\\.git(?:\\/?|\\#[\\w\\.\\-_]+)?$';
  return new RegExp(patternGitHub).test(gitBranchLink);
}

In src/components/Environment/StyledEnvironment.tsx and a few other files, we basically hardcode the icon to always output the git-lab.svg

      &.source {
        &::before {
          background-image: url('/static/images/git-lab.svg');

So we would need more classes for e.g. &.source-github and ensure github.svg exists as a file in static/images folder, e.g.

      &.source-github {
        &::before {
          background-image: url('/static/images/githug.svg');
DaveDarsa commented 4 months ago

This is pretty good!