Merge pull request #123 from uselagoon/giturl-parsing

parser helper with multiple fallbacks
uselagoon · Oct 3, 2023 · 9a9c549 · 9a9c549
2 parents 7f0ee47 + 2152930
commit 9a9c549
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 26 deletions.
diff --git a/src/components/Environment/StyledEnvironment.tsx b/src/components/Environment/StyledEnvironment.tsx
@@ -78,12 +78,23 @@ export const StyledEnvironmentDetails = styled.div`
         background-size: 17px 16px;
       }
     }
-    &.source {
+    &.source,
+    &.giturl {
       width: 100%;
       &::before {
-        background-image: url('/static/images/git-lab.svg');
         background-size: 19px 17px;
       }
+
+      &.source {
+        &::before {
+          background-image: url('/static/images/git-lab.svg');
+        }
+      }
+      &.giturl {
+        &::before {
+          background-image: url('/static/images/git.svg');
+        }
+      }
       .field {
         color: ${color.linkBlue};
         max-width: 100%;

diff --git a/src/components/Environment/index.js b/src/components/Environment/index.js
@@ -16,10 +16,21 @@ import { StyledEnvironmentDetails } from './StyledEnvironment';
  * Displays the environment information.
  */
 const Environment = ({ environment }) => {
-  const gitUrlParsed = giturlparse(environment.project.gitUrl);
-  const gitBranchLink = `${gitUrlParsed.resource}/${gitUrlParsed.full_name}/${
-    environment.deployType === 'branch' ? `tree/${environment.name}` : `pull/${environment.name.replace(/pr-/i, '')}`
-  }`;
+  let gitUrlParsed;
+
+  try {
+    gitUrlParsed = giturlparse(environment.project.gitUrl);
+  } catch {
+    gitUrlParsed = null;
+  }
+
+  const gitBranchLink = gitUrlParsed
+    ? `${gitUrlParsed.resource}/${gitUrlParsed.full_name}/${
+        environment.deployType === 'branch'
+          ? `tree/${environment.name}`
+          : `pull/${environment.name.replace(/pr-/i, '')}`
+      }`
+    : '';
 
   return (
     <StyledEnvironmentDetails className="details">
@@ -59,16 +70,26 @@ const Environment = ({ environment }) => {
           <div className="field">{moment.utc(environment.updated).local().format('DD MMM YYYY, HH:mm:ss (Z)')}</div>
         </div>
       </div>
-      <div className="field-wrapper source">
-        <div>
-          <label>Source</label>
-          <div className="field">
-            <a className="hover-state" target="_blank" href={`https://${gitBranchLink}`}>
-              {gitBranchLink}
-            </a>
+      {gitBranchLink ? (
+        <div className="field-wrapper source">
+          <div>
+            <label>Source</label>
+            <div className="field">
+              <a className="hover-state" target="_blank" href={`https://${gitBranchLink}`}>
+                {gitBranchLink}
+              </a>
+            </div>
           </div>
         </div>
-      </div>
+      ) : (
+        <div className="field-wrapper giturl">
+          <div>
+            <label>Git URL</label>
+            <p>{environment.project.gitUrl}</p>
+          </div>
+        </div>
+      )}
+
       <div className="field-wrapper routes">
         {environment.project.productionEnvironment &&
           environment.project.standbyProductionEnvironment &&

diff --git a/src/components/ProjectDetailsSidebar/index.js b/src/components/ProjectDetailsSidebar/index.js
@@ -9,13 +9,20 @@ import { FieldWrapper, ProjectDetails } from "./StyledProjectSidebar";
 
 const ProjectDetailsSidebar = ({ project }) => {
   const [copied, setCopied] = useState(false);
-  const gitUrlParsed = giturlparse(project.gitUrl);
-  const gitLink = `${gitUrlParsed.resource}/${gitUrlParsed.full_name}`;
-
   const environmentCount = R.countBy(R.prop('environmentType'))(project.environments);
   const developEnvironmentCount = R.propOr(0, 'development', environmentCount);
   const projectUsesDeployTargets = project.deployTargetConfigs.length > 0;
 
+  let gitUrlParsed;
+
+  try {
+    gitUrlParsed = giturlparse(project.gitUrl);
+  } catch {
+    gitUrlParsed = null;
+  }
+
+  const gitLink = gitUrlParsed ? `${gitUrlParsed.resource}/${gitUrlParsed.full_name}` : '';
+
   return (
     <ProjectDetails className="details">
       <FieldWrapper className="field-wrapper created">
@@ -24,16 +31,19 @@ const ProjectDetailsSidebar = ({ project }) => {
           <div className="field">{moment.utc(project.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}</div>
         </div>
       </FieldWrapper>
-      <FieldWrapper className="field-wrapper origin">
-        <div>
-          <label>Origin</label>
-          <div className="field">
-            <a className="hover-state" target="_blank" href={`https://${gitLink}`}>
-              {gitLink}
-            </a>
+      {gitLink ? (
+        <FieldWrapper className="field-wrapper origin">
+          <div>
+            <label>Origin</label>
+            <div className="field">
+              <a className="hover-state" target="_blank" href={`https://${gitLink}`}>
+                {gitLink}
+              </a>
+            </div>
           </div>
-        </div>
-      </FieldWrapper>
+        </FieldWrapper>
+      ) : null}
+
       <FieldWrapper className="field-wrapper giturl">
         <div>
           <label>Git URL</label>