Expanding CSS Module typings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/utils/makeCss.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/**
+ * Function expands generic CSS Modules literal types and adds dictionary with arbitrary
+ * indexes.
+ * @param styles Styles imported from CSS Module having only literal types
+ * @returns Passed style list with expanded typescript types
+ */
+export function makeCss<T>(styles: T) {
+  return styles as typeof styles & { [key: string]: string };
+}

src/renderer/components/+catalog/catalog.tsx

@@ -42,6 +42,7 @@ import { Avatar } from "../avatar/avatar";
 import { MainLayout } from "../layout/main-layout";
 import { cssNames } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
+import { makeCss } from "../../../common/utils/makeCss";
 
 enum sortBy {
   name = "name",
@@ -50,6 +51,8 @@ enum sortBy {
   status = "status"
 }
 
+const css = makeCss(styles);
+
 interface Props extends RouteComponentProps<ICatalogViewRouteParam> {}
 
 @observer
@@ -140,14 +143,14 @@ export class Catalog extends React.Component<Props> {
 
   renderNavigation() {
     return (
-      <Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+      <Tabs className={cssNames(css.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
         <div>
           <Tab
             value={undefined}
             key="*"
             label="Browse"
             data-testid="*-tab"
-            className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == null })}
+            className={cssNames(css.tab, { [css.activeTab]: this.activeTab == null })}
           />
           {
             this.categories.map(category => (
@@ -156,7 +159,7 @@ export class Catalog extends React.Component<Props> {
                 key={category.getId()}
                 label={category.metadata.name}
                 data-testid={`${category.getId()}-tab`}
-                className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == category.getId() })}
+                className={cssNames(css.tab, { [css.activeTab]: this.activeTab == category.getId() })}
               />
             ))
           }
@@ -191,7 +194,7 @@ export class Catalog extends React.Component<Props> {
         colorHash={`${item.name}-${item.source}`}
         width={24}
         height={24}
-        className={styles.catalogIcon}
+        className={css.catalogIcon}
       />
     );
   }
@@ -214,18 +217,18 @@ export class Catalog extends React.Component<Props> {
           (entity: CatalogEntityItem) => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: styles.iconCell },
+          { title: "", className: css.iconCell },
-          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Name", className: css.nameCell, sortBy: sortBy.name },
-          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Source", className: css.sourceCell, sortBy: sortBy.source },
-          { title: "Labels", className: styles.labelsCell },
+          { title: "Labels", className: css.labelsCell },
-          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
+          { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
         renderTableContents={(item: CatalogEntityItem) => [
           this.renderIcon(item),
           item.name,
           item.source,
           item.labels.map((label) => <Badge key={label} label={label} title={label} />),
-          { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) }
+          { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
         renderItemMenu={this.renderItemMenu}
@@ -252,11 +255,11 @@ export class Catalog extends React.Component<Props> {
           (entity: CatalogEntityItem) => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: styles.iconCell },
+          { title: "", className: css.iconCell },
-          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Name", className: css.nameCell, sortBy: sortBy.name },
-          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Source", className: css.sourceCell, sortBy: sortBy.source },
-          { title: "Labels", className: styles.labelsCell },
+          { title: "Labels", className: css.labelsCell },
-          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
+          { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
         renderTableContents={(item: CatalogEntityItem) => [
           this.renderIcon(item),
@@ -264,7 +267,7 @@ export class Catalog extends React.Component<Props> {
           item.kind,
           item.source,
           item.labels.map((label) => <Badge key={label} label={label} title={label} />),
-          { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) }
+          { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         detailsItem={this.selectedItem}
         onDetails={(item: CatalogEntityItem) => this.onDetails(item) }