Cleanup extra 'v' in version of the document card (#4319)

* Cleanup extra 'v' in version of the document card

* adds tests

Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>

packages/insomnia-app/app/ui/components/__tests__/workspace-card.test.ts

@@ -0,0 +1,20 @@
+import { getVersionDisplayment } from '../workspace-card';
+
+describe('getVersionDisplayment', () => {
+  it('returns falsey values as-is', () => {
+    expect(getVersionDisplayment(undefined)).toEqual(undefined);
+    expect(getVersionDisplayment(null)).toEqual(null);
+    expect(getVersionDisplayment('')).toEqual('');
+  });
+
+  it('does not add a `v` if the string starts with one', () => {
+    expect(getVersionDisplayment('v1')).toEqual('v1');
+    expect(getVersionDisplayment('victor')).toEqual('victor');
+  });
+
+  it("adds a `v` to all strings that don't start with a v", () => {
+    expect(getVersionDisplayment('1')).toEqual('v1');
+    expect(getVersionDisplayment('1.0.0')).toEqual('v1.0.0');
+    expect(getVersionDisplayment('alpha1')).toEqual('valpha1'); // yes, we know this is non-ideal, see INS-1320.
+  });
+});

packages/insomnia-app/app/ui/components/workspace-card.tsx

@@ -33,6 +33,18 @@ export interface WorkspaceCardProps {
   onSelect: (workspaceId: string, activity: GlobalActivity) => void;
 }
 
+export const getVersionDisplayment = (version?: string | null) => {
+  if (!version) {
+    return version;
+  }
+
+  if (!version.startsWith('v')) {
+    return `v${version}`;
+  }
+
+  return version;
+};
+
 export const WorkspaceCard: FC<WorkspaceCardProps> = ({
   apiSpec,
   filter,
@@ -85,7 +97,7 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
     />
   );
 
-  const version = spec?.info?.version || '';
+  const version = getVersionDisplayment(spec?.info?.version);
   let label: string = strings.collection.singular;
   let format = '';
   let labelIcon = <i className="fa fa-bars" />;
@@ -108,7 +120,7 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
   }
 
   // Filter the card by multiple different properties
-  const matchResults = fuzzyMatchAll(filter, [title, label, branch, version], {
+  const matchResults = fuzzyMatchAll(filter, [title, label, branch || '', version || ''], {
     splitSpace: true,
     loose: true,
   });
@@ -120,21 +132,15 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
 
   return (
     <Card
-      docBranch={
+      docBranch={branch ? <Highlight search={filter} text={branch} /> : undefined}
-        branch ? <Highlight search={filter} text={branch} /> : undefined
-      }
       docTitle={title ? <Highlight search={filter} text={title} /> : undefined}
-      docVersion={
+      docVersion={version ? <Highlight search={filter} text={version} /> : undefined}
-        version ? <Highlight search={filter} text={`v${version}`} /> : undefined
+      tagLabel={label ? (
-      }
+        <>
-      tagLabel={
+          <span className="margin-right-xs">{labelIcon}</span>
-        label ? (
+          <Highlight search={filter} text={label} />
-          <>
+        </>
-            <span className="margin-right-xs">{labelIcon}</span>
+      ) : undefined}
-            <Highlight search={filter} text={label} />
-          </>
-        ) : undefined
-      }
       docLog={log}
       docMenu={docMenu}
       docFormat={format}