chore(core): Allow cloud provider logos in registry (#8782)

* chore(core): Allow cloud provider logos in registry * chore(core): Refactor to functional component
spinnaker · Dec 11, 2020 · 728939d · 728939d
1 parent d9a2a81
commit 728939d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 33 deletions.
diff --git a/app/scripts/modules/core/src/cloudProvider/CloudProviderLogo.tsx b/app/scripts/modules/core/src/cloudProvider/CloudProviderLogo.tsx
@@ -14,43 +14,28 @@ export interface ICloudProviderLogoProps {
 
 export interface ICloudProviderLogoState {
   tooltip?: string;
+  logo: React.ComponentType<React.SVGProps<HTMLOrSVGElement>>;
 }
 
-export class CloudProviderLogo extends React.Component<ICloudProviderLogoProps, ICloudProviderLogoState> {
-  constructor(props: ICloudProviderLogoProps) {
-    super(props);
-    this.state = this.getState(props);
-  }
+export const CloudProviderLogo = ({ height, provider, showTooltip, width }: ICloudProviderLogoProps) => {
+  const [tooltip, setTooltip] = React.useState<string>(undefined);
+  const RegistryLogo = CloudProviderRegistry.getValue(provider, 'cloudProviderLogo');
 
-  private getState(props: ICloudProviderLogoProps): ICloudProviderLogoState {
-    if (props.showTooltip) {
-      return {
-        tooltip: CloudProviderRegistry.getValue(this.props.provider, 'name') || this.props.provider,
-      };
+  React.useEffect(() => {
+    if (showTooltip) {
+      setTooltip(CloudProviderRegistry.getValue(provider, 'name') || provider);
     }
-    return {};
-  }
+  }, [showTooltip]);
 
-  public componentWillReceiveProps(nextProps: ICloudProviderLogoProps): void {
-    if (nextProps.showTooltip !== this.props.showTooltip) {
-      this.setState(this.getState(nextProps));
-    }
-  }
+  const ProviderLogo = RegistryLogo ? (
+    <RegistryLogo height={height} width={width} />
+  ) : (
+    <span className={`icon icon-${provider}`} style={{ height, width }} />
+  );
 
-  public render(): React.ReactElement<CloudProviderLogo> {
-    const logo = (
-      <span className="cloud-provider-logo">
-        <span
-          className={`icon icon-${this.props.provider}`}
-          style={{ height: this.props.height, width: this.props.width }}
-        />
-      </span>
-    );
-
-    if (this.state.tooltip) {
-      return <Tooltip value={this.state.tooltip}>{logo}</Tooltip>;
-    } else {
-      return logo;
-    }
+  if (tooltip) {
+    return <Tooltip value={tooltip}>{ProviderLogo}</Tooltip>;
   }
-}
+
+  return <span className="cloud-provider-logo">{ProviderLogo}</span>;
+};
diff --git a/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less b/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less
@@ -9,13 +9,20 @@
     mask-size: cover;
     background-color: var(--color-success);
   }
+  svg {
+    fill: var(--color-success);
+  }
 }
 
 .disabled {
   .cloud-provider-logo {
     .icon {
       background-color: var(--color-dovegray);
     }
+
+    svg {
+      fill: var(--color-success);
+    }
   }
 }