Replace classes with GlIcon variants in constants and kubernetes_tree_item.vue

What does this MR do and why?

Closes #506257 (closed)

---

• Updates constants in app/assets/javascripts/environments/constants.js
• Replaces class with variant prop in kubernetes_tree_item.vue

References

• GlIcon - https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-icon--docs

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

1. Create storybook story kubernetes_tree_item.stories.js

Code

import { TREE_ITEM_STATUS_ICONS } from '~/environments/constants';
import KubernetesTreeItem from './kubernetes_tree_item.vue';

export default {
  title: 'environments/kubernetes_tree_item',
  component: KubernetesTreeItem,
  argTypes: {
    kind: {
      control: { type: 'select' },
      options: ['pod', 'deployment', 'service'],
    },
    status: {
      control: { type: 'select' },
      options: ['', ...Object.keys(TREE_ITEM_STATUS_ICONS)],
    },
  },
};

const Template = (args, { argTypes }) => ({
  components: { KubernetesTreeItem },
  props: Object.keys(argTypes),
  template: '<kubernetes-tree-item v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  kind: 'pod',
  name: 'my-pod',
  status: '',
};

export const WithStatus = Template.bind({});
WithStatus.args = {
  kind: 'deployment',
  name: 'my-deployment',
  status: 'success',
};

export const LongName = Template.bind({});
LongName.args = {
  kind: 'service',
  name: 'my-very-long-service-name-that-should-be-truncated',
  status: 'warning',
};

// New story to showcase all status icons
export const AllStatusIcons = () => ({
  components: { KubernetesTreeItem },
  template: `
    <div class="gl-flex gl-flex-col gl-gap-2">
      <kubernetes-tree-item
        v-for="(icon, status) in statusIcons"
        :key="status"
        kind="pod"
        :name="'Pod with ' + status + ' status'"
        :status="status"
      />
    </div>
  `,
  data() {
    return {
      statusIcons: TREE_ITEM_STATUS_ICONS,
    };
  },
});

Related to #506257 (closed)