feat(ec2): adopt icons from CodeCatalyst and reinforce state via text. (#3687)

## Problem
Potential UX Improvements. 
## Solution

![image](https://github.com/aws/aws-toolkit-vscode/assets/42325418/505b3ada-7d9c-4221-94bb-186837a9242d)

![image](https://github.com/aws/aws-toolkit-vscode/assets/42325418/76f7fac8-38eb-496a-a8db-f584b025e6b0)

<!---
    REMINDER:
    - Read CONTRIBUTING.md first.
    - Add test coverage for your changes.
    - Update the changelog using `npm run newChange`.
    - Link to related issues/commits.
    - Testing: how did you test your changes?
    - Screenshots
-->

## License

By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.

---------

Co-authored-by: JadenSimon <[email protected]>
Co-authored-by: Justin M. Keyes <[email protected]>
Co-authored-by: Weinstock <[email protected]>

Author: 4 people

packages/core/src/awsService/ec2/explorer/ec2InstanceNode.ts

@@ -35,7 +35,7 @@ export class Ec2InstanceNode extends AWSTreeNodeBase implements AWSResourceNode
 
     public updateInstance(newInstance: SafeEc2Instance) {
         this.setInstanceStatus(newInstance.LastSeenStatus)
-        this.label = `${this.name} (${this.InstanceId})`
+        this.label = `${this.name} (${this.InstanceId}) ${this.instance.LastSeenStatus.toUpperCase()}`
         this.contextValue = this.getContext()
         this.iconPath = new vscode.ThemeIcon(getIconCode(this.instance))
         this.tooltip = `${this.name}\n${this.InstanceId}\n${this.instance.LastSeenStatus}\n${this.arn}`

packages/core/src/awsService/ec2/prompter.ts

@@ -20,10 +20,14 @@ export interface Ec2Selection {
 export class Ec2Prompter {
     public constructor(protected filter?: instanceFilter) {}
 
-    protected static asQuickPickItem(instance: SafeEc2Instance): DataQuickPickItem<string> {
+    public static getLabel(instance: SafeEc2Instance) {
         const icon = `$(${getIconCode(instance)})`
+        return `${instance.Name ?? '(no name)'} \t ${icon} ${instance.LastSeenStatus.toUpperCase()}`
+    }
+
+    protected static asQuickPickItem(instance: SafeEc2Instance): DataQuickPickItem<string> {
         return {
-            label: `${icon} \t ${instance.Name ?? '(no name)'}`,
+            label: Ec2Prompter.getLabel(instance),
             detail: instance.InstanceId,
             data: instance.InstanceId,
         }

packages/core/src/awsService/ec2/utils.ts

@@ -7,11 +7,11 @@ import { SafeEc2Instance } from '../../shared/clients/ec2Client'
 
 export function getIconCode(instance: SafeEc2Instance) {
     if (instance.LastSeenStatus === 'running') {
-        return 'check'
+        return 'pass'
     }
 
     if (instance.LastSeenStatus === 'stopped') {
-        return 'stop'
+        return 'circle-slash'
     }
 
     return 'loading~spin'

packages/core/src/test/awsService/ec2/explorer/ec2InstanceNode.test.ts

@@ -48,7 +48,10 @@ describe('ec2InstanceNode', function () {
     })
 
     it('initializes the label', async function () {
-        assert.strictEqual(testNode.label, `${getNameOfInstance(testInstance)} (${testInstance.InstanceId})`)
+        assert.strictEqual(
+            testNode.label,
+            `${getNameOfInstance(testInstance)} (${testInstance.InstanceId}) ${testInstance.LastSeenStatus.toUpperCase()}`
+        )
     })
 
     it('initializes the functionName', async function () {

packages/core/src/test/awsService/ec2/prompter.test.ts

@@ -6,7 +6,6 @@ import assert from 'assert'
 import { Ec2Prompter, instanceFilter } from '../../../awsService/ec2/prompter'
 import { SafeEc2Instance } from '../../../shared/clients/ec2Client'
 import { RegionSubmenuResponse } from '../../../shared/ui/common/regionSubmenu'
-import { getIconCode } from '../../../awsService/ec2/utils'
 import { Ec2Selection } from '../../../awsService/ec2/prompter'
 import { AsyncCollection } from '../../../shared/utilities/asyncCollection'
 import { intoCollection } from '../../../shared/utilities/collectionUtils'
@@ -60,7 +59,7 @@ describe('Ec2Prompter', async function () {
 
             const result = prompter.testAsQuickPickItem(testInstance)
             const expected = {
-                label: `$(${getIconCode(testInstance)}) \t ${testInstance.Name}`,
+                label: Ec2Prompter.getLabel(testInstance),
                 detail: testInstance.InstanceId,
                 data: testInstance.InstanceId,
             }
@@ -75,7 +74,7 @@ describe('Ec2Prompter', async function () {
 
             const result = prompter.testAsQuickPickItem(testInstance)
             const expected = {
-                label: `$(${getIconCode(testInstance)}) \t (no name)`,
+                label: Ec2Prompter.getLabel(testInstance),
                 detail: testInstance.InstanceId,
                 data: testInstance.InstanceId,
             }
@@ -144,17 +143,17 @@ describe('Ec2Prompter', async function () {
         it('returns items mapped to QuickPick items without filter', async function () {
             const expected = [
                 {
-                    label: `$(${getIconCode(prompter.instances[0])}) \t ${prompter.instances[0].Name!}`,
+                    label: Ec2Prompter.getLabel(prompter.instances[0]),
                     detail: prompter.instances[0].InstanceId!,
                     data: prompter.instances[0].InstanceId!,
                 },
                 {
-                    label: `$(${getIconCode(prompter.instances[1])}) \t ${prompter.instances[1].Name!}`,
+                    label: Ec2Prompter.getLabel(prompter.instances[1]),
                     detail: prompter.instances[1].InstanceId!,
                     data: prompter.instances[1].InstanceId!,
                 },
                 {
-                    label: `$(${getIconCode(prompter.instances[2])}) \t ${prompter.instances[2].Name!}`,
+                    label: Ec2Prompter.getLabel(prompter.instances[2]),
                     detail: prompter.instances[2].InstanceId!,
                     data: prompter.instances[2].InstanceId!,
                 },
@@ -169,12 +168,12 @@ describe('Ec2Prompter', async function () {
 
             const expected = [
                 {
-                    label: `$(${getIconCode(prompter.instances[0])}) \t ${prompter.instances[0].Name!}`,
+                    label: Ec2Prompter.getLabel(prompter.instances[0]),
                     detail: prompter.instances[0].InstanceId!,
                     data: prompter.instances[0].InstanceId!,
                 },
                 {
-                    label: `$(${getIconCode(prompter.instances[2])}) \t ${prompter.instances[2].Name!}`,
+                    label: Ec2Prompter.getLabel(prompter.instances[2]),
                     detail: prompter.instances[2].InstanceId!,
                     data: prompter.instances[2].InstanceId!,
                 },

packages/toolkit/.changes/next-release/Feature-6b64667a-5191-4e34-931a-abce5642cc14.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "ec2 instance status is reinforced with icons and text"
+}