feat: Add resource link and label components [WD-15623] (#952)

## Done

- Added `ResourceLink` component for displaying lxd resources that have
valid UI link
- Added `ResourceLabel` component for displaying lxd resources that does
not have valid UI link

src/components/ResourceIcon.tsx

@@ -0,0 +1,47 @@
+import { Icon } from "@canonical/react-components";
+import { FC } from "react";
+
+export type ResourceIconType =
+  | "container"
+  | "virtual-machine"
+  | "snapshot"
+  | "profile"
+  | "project"
+  | "cluster-member"
+  | "network"
+  | "pool"
+  | "volume"
+  | "iso-volume"
+  | "image"
+  | "oidc-identity"
+  | "certificate"
+  | "auth-group"
+  | "device";
+
+const resourceIcons: Record<ResourceIconType, string> = {
+  container: "pods",
+  "virtual-machine": "pods",
+  snapshot: "snapshot",
+  profile: "repository",
+  project: "folder",
+  "cluster-member": "single-host",
+  network: "exposed",
+  pool: "status-queued-small",
+  volume: "status-queued-small",
+  "iso-volume": "iso",
+  image: "image",
+  "oidc-identity": "user",
+  certificate: "certificate",
+  "auth-group": "user-group",
+  device: "units",
+};
+
+interface Props {
+  type: ResourceIconType;
+}
+
+const ResourceIcon: FC<Props> = ({ type }) => {
+  return <Icon name={resourceIcons[type]} />;
+};
+
+export default ResourceIcon;

src/components/ResourceLabel.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import ResourceIcon, { ResourceIconType } from "./ResourceIcon";
+
+interface Props {
+  type: ResourceIconType;
+  value: string;
+  bold?: boolean;
+}
+
+const ResourceLabel: FC<Props> = ({ type, value, bold }) => {
+  const ValueWrapper = bold ? "strong" : "span";
+  return (
+    <span className="resource-label u-truncate">
+      <ResourceIcon type={type} />
+      <ValueWrapper>{value}</ValueWrapper>
+    </span>
+  );
+};
+
+export default ResourceLabel;

src/components/ResourceLink.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import ResourceIcon, { ResourceIconType } from "./ResourceIcon";
+
+interface Props {
+  type: ResourceIconType;
+  value: string;
+  to: string;
+}
+
+const ResourceLink: FC<Props> = ({ type, value, to }) => {
+  return (
+    <Link
+      className="p-chip is-inline is-dense resource-link"
+      to={to}
+      title={value}
+    >
+      <span className="p-chip__value">
+        <ResourceIcon type={type} />
+        {value}
+      </span>
+    </Link>
+  );
+};
+
+export default ResourceLink;

src/sass/_resources.scss

@@ -0,0 +1,25 @@
+.resource-link {
+  i {
+    margin-right: $sph--x-small;
+  }
+
+  &.p-chip {
+    // background-color is set to white by vanilla if p-chip is applied to a link and not button
+    background-color: $colors--theme--background-neutral-default;
+    border: none;
+  }
+
+  .p-chip__value {
+    max-width: 8rem;
+  }
+}
+
+.resource-label {
+  // align font size with chip component
+  font-size: #{map-get($font-sizes, small)}rem;
+  line-height: #{map-get($line-heights, small)}rem;
+
+  i {
+    margin-right: $sph--x-small;
+  }
+}

src/sass/styles.scss

@@ -8,20 +8,27 @@
 @include vf-p-icon-add-canvas;
 @include vf-p-icon-applications;
 @include vf-p-icon-begin-downloading;
+@include vf-p-icon-book;
 @include vf-p-icon-canvas;
+@include vf-p-icon-certificate;
 @include vf-p-icon-change-version;
 @include vf-p-icon-change-version;
 @include vf-p-icon-close;
+@include vf-p-icon-cluster-host;
 @include vf-p-icon-connected;
 @include vf-p-icon-containers;
 @include vf-p-icon-copy-to-clipboard;
 @include vf-p-icon-disconnect;
 @include vf-p-icon-edit;
 @include vf-p-icon-export;
+@include vf-p-icon-exposed;
 @include vf-p-icon-filter;
+@include vf-p-icon-folder;
 @include vf-p-icon-fullscreen;
 @include vf-p-icon-get-link;
+@include vf-p-icon-image;
 @include vf-p-icon-import;
+@include vf-p-icon-iso;
 @include vf-p-icon-lock-locked;
 @include vf-p-icon-machines;
 @include vf-p-icon-mount;
@@ -33,16 +40,22 @@
 @include vf-p-icon-power-off;
 @include vf-p-icon-priority-low;
 @include vf-p-icon-profile;
+@include vf-p-icon-profiles;
+@include vf-p-icon-repository;
 @include vf-p-icon-restart;
 @include vf-p-icon-security;
 @include vf-p-icon-settings;
+@include vf-p-icon-single-host;
+@include vf-p-icon-snapshot;
 @include vf-p-icon-status-failed-small;
 @include vf-p-icon-status-in-progress-small;
 @include vf-p-icon-status-queued-small;
 @include vf-p-icon-status-succeeded-small;
 @include vf-p-icon-status-waiting-small;
 @include vf-p-icon-status;
 @include vf-p-icon-stop;
+@include vf-p-icon-submit-bug;
+@include vf-p-icon-switcher-dashboard;
 @include vf-p-icon-switcher-environments;
 @include vf-p-icon-task-outstanding;
 @include vf-p-icon-units;
@@ -64,6 +77,7 @@ $border-thin: 1px solid $color-mid-light !default;
 @import "empty_state";
 @import "error_page";
 @import "file_row";
+@import "form-link";
 @import "forms";
 @import "images";
 @import "instance_detail_console";
@@ -83,7 +97,6 @@ $border-thin: 1px solid $color-mid-light !default;
 @import "no_match";
 @import "operation_list";
 @import "page_header";
-@import "form-link";
 @import "pattern_navigation";
 @import "pattern_terminal";
 @import "permission_confirm_modal";
@@ -97,6 +110,7 @@ $border-thin: 1px solid $color-mid-light !default;
 @import "project_select";
 @import "rename_device";
 @import "rename_header";
+@import "resources";
 @import "scrollable_container";
 @import "scrollable_table";
 @import "selectable_main_table";