Extract icons to reusable components

Author: koesie10

extensions/ql-vscode/src/view/common/icon/Codicon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+
+type Props = {
+  name: string;
+  label: string;
+  className?: string;
+};
+
+export const CodiconIcon = styled.span`
+  vertical-align: text-bottom;
+`;
+
+export const Codicon = ({
+  name,
+  label,
+  className
+}: Props) => <CodiconIcon role="img" aria-label={label} className={classNames('codicon', `codicon-${name}`, className)} />;

extensions/ql-vscode/src/view/common/icon/ErrorIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Codicon } from './Codicon';
+
+const Icon = styled(Codicon)`
+  color: var(--vscode-problemsErrorIcon-foreground);
+`;
+
+type Props = {
+  label?: string;
+  className?: string;
+}
+
+export const ErrorIcon = ({
+  label = 'Error',
+  className,
+}: Props) => <Icon name="error" label={label} className={className} />;

extensions/ql-vscode/src/view/common/icon/SuccessIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Codicon } from './Codicon';
+
+const Icon = styled(Codicon)`
+  color: var(--vscode-testing-iconPassed);
+`;
+
+type Props = {
+  label?: string;
+  className?: string;
+}
+
+export const SuccessIcon = ({
+  label = 'Success',
+  className,
+}: Props) => <Icon name="pass" label={label} className={className} />;

extensions/ql-vscode/src/view/common/icon/WarningIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Codicon } from './Codicon';
+
+const Icon = styled(Codicon)`
+  color: var(--vscode-problemsWarningIcon-foreground);
+`;
+
+type Props = {
+  label?: string;
+  className?: string;
+}
+
+export const WarningIcon = ({
+  label = 'Warning',
+  className,
+}: Props) => <Icon name="warning" label={label} className={className} />;

extensions/ql-vscode/src/view/common/icon/index.ts

@@ -0,0 +1,4 @@
+export * from './Codicon';
+export * from './ErrorIcon';
+export * from './SuccessIcon';
+export * from './WarningIcon';

extensions/ql-vscode/src/view/common/index.ts

@@ -0,0 +1 @@
+export * from './icon';

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisRepositoriesStats.tsx

@@ -2,6 +2,13 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
 import { formatDecimal } from '../../pure/number';
+import { CodiconIcon, ErrorIcon, SuccessIcon, WarningIcon } from '../common';
+
+const Container = styled.div`
+  ${CodiconIcon} {
+    margin-left: 0.3em;
+  }
+`;
 
 type Props = {
   variantAnalysisStatus: VariantAnalysisStatus;
@@ -12,23 +19,6 @@ type Props = {
   queryResult?: 'warning' | 'stopped';
 };
 
-const Icon = styled.span`
-  vertical-align: text-bottom;
-  margin-left: 0.3em;
-`;
-
-const WarningIcon = styled(Icon)`
-  color: var(--vscode-problemsWarningIcon-foreground);
-`;
-
-const ErrorIcon = styled(Icon)`
-  color: var(--vscode-problemsErrorIcon-foreground);
-`;
-
-const SuccessIcon = styled(Icon)`
-  color: var(--vscode-testing-iconPassed);
-`;
-
 export const VariantAnalysisRepositoriesStats = ({
   variantAnalysisStatus,
   totalRepositoryCount,
@@ -38,17 +28,17 @@ export const VariantAnalysisRepositoriesStats = ({
   if (variantAnalysisStatus === VariantAnalysisStatus.Failed) {
     return (
       <>
-        0<ErrorIcon role="img" aria-label="Error" className="codicon codicon-error" />
+        0<ErrorIcon />
       </>
     );
   }
 
   return (
-    <>
+    <Container>
       {formatDecimal(completedRepositoryCount)}/{formatDecimal(totalRepositoryCount)}
-      {queryResult && <WarningIcon role="img" aria-label="Warning" className="codicon codicon-warning" />}
+      {queryResult && <WarningIcon />}
       {!queryResult && variantAnalysisStatus === VariantAnalysisStatus.Succeeded &&
-        <SuccessIcon role="img" aria-label="Completed" className="codicon codicon-pass" />}
-    </>
+        <SuccessIcon label="Completed" />}
+    </Container>
   );
 };