refactor: switch from stringly-typed to generics (#3379)

dashboard/src/components/Selector.tsx

@@ -2,12 +2,12 @@ import React, { Component } from "react";
 import styled from "styled-components";
 import { Context } from "shared/Context";
 
-export type SelectorPropsType = {
-  activeValue: string;
+export type SelectorPropsType<T> = {
+  activeValue: T;
   refreshOptions?: () => void;
-  options: { value: string; label: string; icon?: any }[];
+  options: { value: T; label: string; icon?: any }[];
   addButton?: boolean;
-  setActiveValue: (x: string) => void;
+  setActiveValue: (x: T) => void;
   width: string;
   height?: string;
   disabled?: boolean;
@@ -22,7 +22,7 @@ export type SelectorPropsType = {
 
 type StateType = {};
 
-export default class Selector extends Component<SelectorPropsType, StateType> {
+export default class Selector<T> extends Component<SelectorPropsType<T>, StateType> {
   state = {
     expanded: false,
     showTooltip: false,

dashboard/src/components/TabSelector.tsx

@@ -1,16 +1,16 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 
-export interface selectOption {
-  value: string;
+export interface selectOption<T> {
+  value: T;
   label: string;
   component?: any;
 }
 
-type PropsType = {
+type PropsType<T> = {
   currentTab: string;
-  options: selectOption[];
-  setCurrentTab: (value: string) => void;
+  options: selectOption<T>[];
+  setCurrentTab: (value: T) => void;
   addendum?: any;
   color?: string;
   noBuffer?: boolean;
@@ -18,7 +18,7 @@ type PropsType = {
 
 type StateType = {};
 
-export default class TabSelector extends Component<PropsType, StateType> {
+export default class TabSelector<T> extends Component<PropsType<T>, StateType> {
   getCurrentComponent() {
     const currentOption = this.props.options.find(
       (option) => option.value === this.props.currentTab
@@ -29,13 +29,13 @@ export default class TabSelector extends Component<PropsType, StateType> {
     return null;
   }
 
-  handleTabClick = (value: string) => {
+  handleTabClick = (value: T) => {
     this.props.setCurrentTab(value);
   };
 
   renderTabList = () => {
     let color = this.props.color || "#aaaabb";
-    return this.props.options.map((option: selectOption, i: number) => {
+    return this.props.options.map((option: selectOption<T>, i: number) => {
       return (
         <Tab
           key={i}
@@ -95,13 +95,13 @@ const TabWrapper = styled.div`
 
 const Tab = styled.div`
   height: 30px;
-  margin-right: ${(props: { lastItem: boolean; highlight: string }) =>
+  margin-right: ${(props: { lastItem: boolean; highlight: string | null}) =>
     props.lastItem ? "" : "30px"};
   display: flex;
   font-family: "Work Sans", sans-serif;
   font-size: 13px;
   user-select: none;
-  color: ${(props: { lastItem: boolean; highlight: string }) =>
+  color: ${(props: { lastItem: boolean; highlight: string | null }) =>
     props.highlight ? props.highlight : "#aaaabb55"};
   flex-direction: column;
   padding-top: 7px;
@@ -111,10 +111,10 @@ const Tab = styled.div`
   cursor: pointer;
   white-space: nowrap;
   border-bottom: 1px solid
-    ${(props: { lastItem: boolean; highlight: string }) =>
+    ${(props: { lastItem: boolean; highlight: string | null }) =>
       props.highlight ? props.highlight : "none"};
   :hover {
-    color: ${(props: { lastItem: boolean; highlight: string }) =>
+    color: ${(props: { lastItem: boolean; highlight: string | null }) =>
       props.highlight ? "" : "#aaaabb"};
   }
 `;

dashboard/src/components/form-components/SelectRow.tsx

@@ -3,51 +3,47 @@ import styled from "styled-components";
 
 import Selector, { SelectorPropsType } from "../Selector";
 
-type PropsType = {
+type PropsType<T> = {
   label: string;
-  value: string;
-  setActiveValue: (x: string) => void;
-  options: { value: string; label: string }[];
+  value: T;
+  setActiveValue: (x: T) => void;
+  options: { value: T; label: string }[];
   dropdownLabel?: string;
   width?: string;
   dropdownMaxHeight?: string;
   scrollBuffer?: boolean;
   doc?: string;
   disabled?: boolean;
-  selectorProps?: Partial<SelectorPropsType>;
+  selectorProps?: Partial<SelectorPropsType<T>>;
 };
 
-type StateType = {};
-
-export default class SelectRow extends Component<PropsType, StateType> {
-  render() {
-    return (
-      <StyledSelectRow>
-        <Wrapper>
-          <Label>{this.props.label}</Label>
-          {this.props.doc ? (
-            <a href={this.props.doc} target="_blank">
-              <i className="material-icons">help_outline</i>
-            </a>
-          ) : null}
-        </Wrapper>
-        <SelectWrapper>
-          <Selector
-            disabled={this.props.disabled}
-            scrollBuffer={this.props.scrollBuffer}
-            activeValue={this.props.value}
-            setActiveValue={this.props.setActiveValue}
-            options={this.props.options}
-            dropdownLabel={this.props.dropdownLabel}
-            width={this.props.width || "270px"}
-            dropdownWidth={this.props.width}
-            dropdownMaxHeight={this.props.dropdownMaxHeight}
-            {...(this.props.selectorProps || {})}
-          />
-        </SelectWrapper>
-      </StyledSelectRow>
-    );
-  }
+export default function SelectRow<T>(props: PropsType<T>) {
+  return (
+    <StyledSelectRow>
+      <Wrapper>
+        <Label>{props.label}</Label>
+        {props.doc ? (
+          <a href={props.doc} target="_blank">
+            <i className="material-icons">help_outline</i>
+          </a>
+        ) : null}
+      </Wrapper>
+      <SelectWrapper>
+        <Selector
+          disabled={props.disabled}
+          scrollBuffer={props.scrollBuffer}
+          activeValue={props.value}
+          setActiveValue={props.setActiveValue}
+          options={props.options}
+          dropdownLabel={props.dropdownLabel}
+          width={props.width || "270px"}
+          dropdownWidth={props.width}
+          dropdownMaxHeight={props.dropdownMaxHeight}
+          {...(props.selectorProps || {})}
+        />
+      </SelectWrapper>
+    </StyledSelectRow>
+  );
 }
 
 const SelectWrapper = styled.div``;