Add utility function for multiple class names

Signed-off-by: Niklas Granander <ngranander@spotify.com>

plugins/xcmetrics/src/components/StatusMatrixComponent/StatusMatrixComponent.tsx

@@ -18,7 +18,7 @@ import { makeStyles, Tooltip } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import { BuildItem, xcmetricsApiRef } from '../../api';
 import { useAsync, useMeasure } from 'react-use';
-import { formatDuration, formatStatus } from '../../utils';
+import { cn, formatDuration, formatStatus } from '../../utils';
 import { useApi } from '@backstage/core-plugin-api';
 import { Alert } from '@material-ui/lab';
 
@@ -101,12 +101,12 @@ export const StatusMatrixComponent = () => {
 
   return (
     <div
-      className={`${classes.root} ${loading ? classes.loading : ''}`}
+      className={cn(classes.root, loading && classes.loading)}
       ref={measureRef}
     >
       {loading &&
         [...new Array(cols * MAX_ROWS)].map((_, index) => {
-          return <div key={index} className={`${classes.cell}`} />;
+          return <div key={index} className={classes.cell} />;
         })}
 
       {builds &&
@@ -117,7 +117,7 @@ export const StatusMatrixComponent = () => {
               <div
                 data-testid={build.id}
                 key={build.id}
-                className={`${classes.cell} ${classes[trimmedBuildStatus]}`}
+                className={cn(classes.cell, classes[trimmedBuildStatus])}
               />
             </Tooltip>
           );

plugins/xcmetrics/src/utils/classnames.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+type ClassName = string | false | undefined | null;
+
+export const classNames = (...args: ClassName[]) =>
+  args.filter(c => !!c).join(' ');
+
+export const cn = classNames;

plugins/xcmetrics/src/utils/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export * from './format';
+export * from './classnames';

plugins/xcmetrics/src/utils/utils.test.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { classNames } from './';
+
+describe('utils', () => {
+  describe('classNames', () => {
+    it('should concatinate strings', () => {
+      expect(classNames('class1', 'class2', 'class3')).toEqual(
+        'class1 class2 class3',
+      );
+    });
+
+    it('should not include values null, undefined or empty strings', () => {
+      expect(classNames('class1', undefined, null, '')).toEqual('class1');
+    });
+
+    it('should handle strings with boolean expressions', () => {
+      expect(classNames(true && 'class1', false && 'class2', false)).toEqual(
+        'class1',
+      );
+    });
+  });
+});