simplify icons architecture

Author: elevatebart

packages/app/src/pages/Runs.vue

@@ -38,8 +38,10 @@ query Runs {
       cloudProject {
         id
         runs(first: 10){
-          id
-          ...RunsCard
+          nodes {
+            id
+            ...RunCard
+          }
         }
       }
     }

packages/app/src/runs/RunCard.vue

@@ -3,10 +3,7 @@
     class="block w-full overflow-hidden mb-4 border border-gray-100
   rounded bg-light-50 hocus-default"
   >
-    <ListRowHeader>
-      <template #icon>
-        <RunIcon :gql="props.gql" />
-      </template>
+    <ListRowHeader :icon="icon">
       <template #header>
         {{ run.commitInfo?.summary }}
       </template>
@@ -48,18 +45,22 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import ListRowHeader from '@cy/components/ListRowHeader.vue'
 import { gql } from '@urql/core'
-import RunIcon from './RunIcon.vue'
 import RunResults from './RunResults.vue'
 import type { RunCardFragment } from '../generated/graphql'
-import { computed } from 'vue-demi'
+import PassedIcon from '~icons/cy/status-passed-solid_x24.svg'
+import FailedIcon from '~icons/cy/status-failed-solid_x24.svg'
+import ErroredIcon from '~icons/cy/status-errored-solid_x24.svg'
+import SkippedIcon from '~icons/cy/status-skipped_x24.svg'
+import PendingIcon from '~icons/cy/status-pending_x24.svg'
 
 gql`
 fragment RunCard on CloudRun {
 	id
 	createdAt
-	...RunIcon
+	status
 	...RunResults
 	commitInfo {
 		authorName
@@ -74,6 +75,20 @@ const props = defineProps<{
 	gql: RunCardFragment
 }>()
 
+const icon = computed(() => {
+  return props.gql.status === 'PASSED'
+    ? PassedIcon
+    : props.gql.status === 'FAILED'
+      ? FailedIcon
+      : props.gql.status === 'TIMEDOUT' || props.gql.status === 'ERRORED' || props.gql.status === 'OVERLIMIT'
+        ? ErroredIcon
+        : props.gql.status === 'CANCELLED' || props.gql.status === 'NOTESTS'
+          ? SkippedIcon
+          : props.gql.status === 'RUNNING'
+            ? PendingIcon
+            : undefined
+})
+
 const run = computed(() => props.gql)
 
 </script>

packages/app/src/runs/RunIcon.spec.tsx

@@ -1,35 +1,28 @@
 <template>
   <div class="flex h-6 text-gray-500 border border-gray-200 rounded text-size-14px leading-20px">
-    <div class="flex items-center px-2 hover:bg-indigo-50">
-      <i-cy-status-flaky_x12 class="mr-1 h-12px w-12px icon-dark-gray-400" />
-      0
-      <!--
-				TODO: Is flake even exposed via the API?
-				{{props.gql.totalFlake}}
-				-->
-    </div>
-    <div class="flex items-center px-2 hover:bg-indigo-50">
-      <i-cy-status-skipped_x12 class="mr-1 h-12px w-12px icon-dark-gray-400" />
-      {{ props.gql.totalSkipped }}
-    </div>
-    <div class="flex items-center px-2 hover:bg-indigo-50">
-      <i-cy-status-pending_x12 class="mr-1 h-12px w-12px icon-dark-gray-400 icon-light-white" />
-      {{ props.gql.totalPending }}
-    </div>
-    <div class="flex items-center px-2 hover:bg-indigo-50">
-      <i-cy-status-passed_x12 class="mr-1 h-12px w-12px icon-dark-jade-400" />
-      {{ props.gql.totalPassed }}
-    </div>
-    <div class="flex items-center px-2 hover:bg-indigo-50">
-      <i-cy-status-failed_x12 class="mr-1 h-12px w-12px icon-dark-red-400" />
-      {{ props.gql.totalFailed }}
+    <div
+      v-for="(result, i) in results"
+      :key="i"
+      class="flex items-center px-2 hover:bg-indigo-50"
+    >
+      <component
+        :is="result.icon"
+        class="mr-1 h-12px w-12px"
+        :class="result.color"
+      />
+      {{ result.value }}
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { RunResultsFragment } from '../generated/graphql'
 import { gql } from '@urql/core'
+import FlakyIcon from '~icons/cy/status-flaky_x12.svg'
+import SkippedIcon from '~icons/cy/status-skipped_x12.svg'
+import PassedIcon from '~icons/cy/status-passed_x12.svg'
+import FailedIcon from '~icons/cy/status-failed_x12.svg'
+import PendingIcon from '~icons/cy/status-pending_x12.svg'
 
 gql`
 fragment RunResults on CloudRun {
@@ -38,11 +31,40 @@ fragment RunResults on CloudRun {
 	totalFailed
 	totalPending
 	totalSkipped
-	totalDuration
 }
 `
 
 const props = defineProps<{
 	gql: RunResultsFragment
 }>()
+
+const results = [
+  {
+    // TODO: Is flake even exposed via the API?
+    // value: props.gql.totalFlaky,
+    value: 0,
+    color: 'icon-dark-gray-400',
+    icon: FlakyIcon,
+  },
+  {
+    value: props.gql.totalSkipped,
+    color: 'icon-dark-gray-400',
+    icon: SkippedIcon,
+  },
+  {
+    value: props.gql.totalPending,
+    color: 'icon-dark-gray-400 icon-light-white',
+    icon: PendingIcon,
+  },
+  {
+    value: props.gql.totalPassed,
+    color: 'icon-dark-jade-400',
+    icon: PassedIcon,
+  },
+  {
+    value: props.gql.totalFailed,
+    color: 'icon-dark-red-400',
+    icon: FailedIcon,
+  },
+]
 </script>

packages/app/src/runs/RunIcon.vue

@@ -9,7 +9,8 @@
     "index.d.ts",
     "../frontend-shared/src/**/*.vue", 
     "../frontend-shared/src/**/*.tsx", 
-    "../frontend-shared/cypress/**/*.ts"
+    "../frontend-shared/cypress/**/*.ts",
+    "*.d.ts"
   ],
   "compilerOptions": {
     "noImplicitThis": true,