feat(core/managed): add real icons to Environments view (#8091)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Mar 25, 2020 · 1051f8c · 1051f8c
1 parent fea9274
commit 1051f8c
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 40 deletions.
diff --git a/app/scripts/modules/core/src/managed/ArtifactDetail.tsx b/app/scripts/modules/core/src/managed/ArtifactDetail.tsx
@@ -62,7 +62,7 @@ export const ArtifactDetail = ({
               {state === 'deploying' && (
                 <NoticeCard
                   className="sp-margin-l-right"
-                  icon="md-actuation-launched"
+                  icon="cloudProgress"
                   text={undefined}
                   title="Deploying"
                   isActive={true}
@@ -72,7 +72,7 @@ export const ArtifactDetail = ({
               {state === 'current' && deployedAt && (
                 <NoticeCard
                   className="sp-margin-l-right"
-                  icon="cloud-check"
+                  icon="cloudDeployed"
                   text={undefined}
                   title={
                     <span>
@@ -89,7 +89,7 @@ export const ArtifactDetail = ({
               {state === 'previous' && (
                 <NoticeCard
                   className="sp-margin-l-right"
-                  icon="checkbox-indeterminate"
+                  icon="cloudDecommissioned"
                   text={undefined}
                   title={
                     <span className="sp-group-margin-xs-xaxis">
@@ -112,7 +112,7 @@ export const ArtifactDetail = ({
               {state === 'vetoed' && (
                 <NoticeCard
                   className="sp-margin-l-right"
-                  icon="skull"
+                  icon="cloudError"
                   text={undefined}
                   title={
                     <span className="sp-group-margin-xs-xaxis">
@@ -134,7 +134,7 @@ export const ArtifactDetail = ({
               {resourcesByEnvironment[environmentName]
                 .filter(resource => shouldDisplayResource(name, type, resource))
                 .map(resource => (
-                  <div className="flex-container-h middle">
+                  <div key={resource.id} className="flex-container-h middle">
                     <div
                       className={classNames('resource-badge flex-container-h center middle sp-margin-s-right', state)}
                     ></div>

diff --git a/app/scripts/modules/core/src/managed/ArtifactDetailHeader.less b/app/scripts/modules/core/src/managed/ArtifactDetailHeader.less
@@ -4,6 +4,7 @@
   color: var(--color-white);
   font-size: 14px;
   padding: 0 8px 0 16px;
+  border-radius: 2px 2px 0 0;
 
   .header-section-left {
     flex: 0 0 112px;
@@ -33,6 +34,7 @@
     width: 48px;
     height: 48px;
     margin-left: 72px;
+    border-radius: 2px;
   }
 
   .header-close:hover {

diff --git a/app/scripts/modules/core/src/managed/ColumnHeader.module.css b/app/scripts/modules/core/src/managed/ColumnHeader.module.css
@@ -6,8 +6,8 @@
   align-items: center;
   color: #fff;
   font-size: 14px;
-  font-weight: 600;
   margin-bottom: 16px;
+  border-radius: 2px;
 }
 
 .icon {

diff --git a/app/scripts/modules/core/src/managed/ColumnHeader.tsx b/app/scripts/modules/core/src/managed/ColumnHeader.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
+import classNames from 'classnames';
+
+import { Icon, IconNames } from '../presentation';
+
 import styles from './ColumnHeader.module.css';
 
 export interface IColumnHeaderProps {
   text: string;
-  icon: string;
+  icon: IconNames;
 }
 
 export function ColumnHeader({ text, icon }: IColumnHeaderProps) {
   return (
     <div className={styles.ColumnHeader}>
-      {icon && <i className={`ico icon-${icon} ${styles.icon}`} />}
+      {icon && <Icon name={icon} appearance="light" size="medium" className={styles.icon} />}
       {text && (
-        <span className={styles.text} style={icon && { marginRight: '56px' }}>
+        <span className={classNames('text-bold', styles.text)} style={icon && { marginRight: '56px' }}>
           {text}
         </span>
       )}

diff --git a/app/scripts/modules/core/src/managed/EnvironmentRow.less b/app/scripts/modules/core/src/managed/EnvironmentRow.less
@@ -1,10 +1,6 @@
 .EnvironmentRow {
   max-width: 100%;
 
-  i.ico {
-    font-size: 24px;
-  }
-
   .srow {
     position: relative;
     display: flex;
@@ -18,12 +14,10 @@
   .srow:hover .select {
     visibility: visible;
   }
+
   .rowProd {
     box-shadow: inset 0 -1px 0 0 #be0000;
   }
-  .rowProd .expand {
-    color: #be0000;
-  }
 
   .clickableArea {
     flex: 1 1 auto;
@@ -54,9 +48,6 @@
     margin-right: -40px;
     visibility: hidden;
   }
-  .expand {
-    color: #666666;
-  }
 
   .select,
   .expand {

diff --git a/app/scripts/modules/core/src/managed/EnvironmentRow.tsx b/app/scripts/modules/core/src/managed/EnvironmentRow.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 
+import { Icon } from '../presentation';
+
 import './EnvironmentRow.less';
 
 interface IEnvironmentRowProps {
@@ -30,8 +32,8 @@ export function EnvironmentRow({ name, isProd = false, children }: IEnvironmentR
           <span className={envLabelClasses}>{name}</span>
         </span>
         <div className="expand" onClick={() => setIsCollapsed(!isCollapsed)}>
-          {isCollapsed && <i className="ico icon-expand" />}
-          {!isCollapsed && <i className="ico icon-collapse" />}
+          {isCollapsed && <Icon name="accordionExpand" size="medium" />}
+          {!isCollapsed && <Icon name="accordionCollapse" size="medium" />}
         </div>
         {/* <div className="select">
             <i className={`ico icon-checkbox-unchecked`}/>

diff --git a/app/scripts/modules/core/src/managed/Environments.tsx b/app/scripts/modules/core/src/managed/Environments.tsx
@@ -61,7 +61,7 @@ export function Environments({ app }: IEnvironmentsProps) {
         {/* No filters for now but this is where they will go */}
         <div className={styles.mainContent} style={{ flex: `0 1 ${totalContentWidth}` }}>
           <div className={styles.artifactsColumn}>
-            <ColumnHeader text="Artifacts" icon="search" />
+            <ColumnHeader text="Artifacts" icon="artifact" />
             <ArtifactsList
               artifacts={artifacts}
               selectedArtifact={selectedArtifact}
@@ -77,7 +77,7 @@ export function Environments({ app }: IEnvironmentsProps) {
                 but for now let's do it in component local state.  */}
             {!selectedArtifact && (
               <>
-                <ColumnHeader text="Environments" icon="search" />
+                <ColumnHeader text="Environments" icon="environment" />
                 <EnvironmentsList {...{ environments, artifacts, resourcesById }} />
               </>
             )}

diff --git a/app/scripts/modules/core/src/managed/EnvironmentsList.tsx b/app/scripts/modules/core/src/managed/EnvironmentsList.tsx
@@ -21,7 +21,7 @@ export function EnvironmentsList({ environments, resourcesById, artifacts: allAr
   return (
     <div>
       <NoticeCard
-        icon="search"
+        icon="checkBadge"
         text={undefined}
         title={`${allArtifacts.length} ${
           allArtifacts.length === 1 ? 'artifact is' : 'artifacts are'

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx b/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { IconNames } from '../presentation';
 import { IManagedResourceSummary, IManagedEnviromentSummary } from '../domain/IManagedEntity';
 
 import { getKindName } from './ManagedReader';
@@ -12,12 +13,15 @@ export interface IManagedResourceObjectProps {
   artifact?: IManagedEnviromentSummary['artifacts'][0];
 }
 
-const kindIconMap: { [key: string]: string } = {
+const kindIconMap: { [kind: string]: IconNames } = {
   cluster: 'cluster',
+  'security-group': 'cluster',
+  'classic-load-balancer': 'loadBalancer',
+  'application-load-balancer': 'loadBalancer',
 };
 
-function getIconTypeFromKind(kind: string): string {
-  return kindIconMap[getKindName(kind)] ?? 'cluster';
+function getIconTypeFromKind(kind: string) {
+  return kindIconMap[getKindName(kind)] ?? 'placeholder';
 }
 
 export const ManagedResourceObject = ({

diff --git a/app/scripts/modules/core/src/managed/NoticeCard.module.css b/app/scripts/modules/core/src/managed/NoticeCard.module.css
@@ -22,11 +22,6 @@
   align-items: center;
   justify-content: center;
   border-radius: 48px;
-  color: #ffffff;
-
-  .icon {
-    font-size: 24px;
-  }
 }
 
 .iconContainer.success {

diff --git a/app/scripts/modules/core/src/managed/NoticeCard.tsx b/app/scripts/modules/core/src/managed/NoticeCard.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
+
+import { Icon, IconNames } from '../presentation';
+
 import styles from './NoticeCard.module.css';
 
 interface INoticeCardProps {
   title: JSX.Element | string;
   text: JSX.Element | string;
-  icon: string;
+  icon: IconNames;
   noticeType: 'success' | 'neutral' | 'info' | 'error';
   isActive: boolean;
   className?: string;
@@ -26,7 +29,7 @@ export function NoticeCard({ title, text, icon, noticeType, isActive, className
     <div className={classNames(NoticeCardClasses, className)}>
       {icon && (
         <div className={IconContainerClasses}>
-          <i className={classNames(styles.icon, 'ico', `icon-${icon}`)} />
+          <Icon name={icon} appearance="light" size="medium" />
         </div>
       )}
       {title && <div className={styles.title}>{title}</div>}

diff --git a/app/scripts/modules/core/src/managed/ObjectRow.module.css b/app/scripts/modules/core/src/managed/ObjectRow.module.css
@@ -45,10 +45,6 @@
   /* background-color: rgba(255, 0, 0, 0.1); */
 }
 
-.leftCol i {
-  margin-right: 8px;
-}
-
 .rowTitle {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/app/scripts/modules/core/src/managed/ObjectRow.tsx b/app/scripts/modules/core/src/managed/ObjectRow.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
+import { Icon, IconNames } from '../presentation';
+
 import styles from './ObjectRow.module.css';
 
 interface IObjectRowProps {
-  icon: string;
+  icon: IconNames;
   title: string;
   metadata?: JSX.Element;
   depth?: number;
@@ -14,7 +16,7 @@ export const ObjectRow = ({ icon, title, metadata, depth = 1 }: IObjectRowProps)
     <div className={styles.ObjectRow} style={getStylesFromDepth(depth)}>
       <span className="clickableArea">
         <div className={styles.leftCol}>
-          <i className={`ico icon-${icon}`} />
+          <Icon name={icon} size="medium" appearance="dark" className="sp-margin-s-right" />
           <span className={styles.rowTitle}>{title}</span>
         </div>
         <div className={styles.centerCol} style={{ flex: `0 0 ${200 + depth * 16}px` }}>