convert cluster-picker module to TypeScript

frontend/public/components/cluster-picker.jsx → frontend/public/components/cluster-picker.tsx

@@ -1,19 +1,21 @@
+/* eslint-disable no-unused-vars, no-undef */
+
 import * as _ from 'lodash-es';
 import * as React from 'react';
 
 import { Firehose, Dropdown } from './utils';
-import { referenceForModel } from '../module/k8s';
+import { referenceForModel, K8sResourceKind } from '../module/k8s';
 import { connectToFlags, FLAGS } from '../features';
 import { ClusterModel } from '../models';
 
 // Trim trailing slash from URLs to make matching more likely
 const normalizeURL = url => url.replace(/\/$/g, '');
 
-const FirehoseToDropdown = ({clusters={}}) => {
+const FirehoseToDropdown: React.SFC<FirehoseToDropdownProps> = ({clusters}) => {
  let selected;
  let masterURL;
- const ourURL = normalizeURL(window.location.origin + window.SERVER_FLAGS.basePath);
- const items = _.reduce(clusters.data, (obj, cluster) => {
+ const ourURL = normalizeURL(window.location.origin + (window as any).SERVER_FLAGS.basePath);
+ const items = _.reduce(_.get(clusters, 'data', []), (obj, cluster) => {
  const consoleURL = normalizeURL(_.get(cluster, ['metadata', 'annotations', 'multicluster.coreos.com/console-url'], ''));
  if (!consoleURL) {
  return obj;
@@ -30,15 +32,15 @@ const FirehoseToDropdown = ({clusters={}}) => {
  }, {});
 
  if (!selected) {
- items[ourURL] = window.SERVER_FLAGS.clusterName;
+ items[ourURL] = (window as any).SERVER_FLAGS.clusterName;
  selected = ourURL;
  }
 
  masterURL = `${masterURL || ourURL}/k8s/cluster/clusters`;
  const spacerBefore = new Set([masterURL]);
  items[masterURL] = <div>Manage Cluster Directory…</div>;
 
- return <Dropdown title="Clusters" items={items} selectedKey={selected} noButton={true} className="cluster-picker" menuClassName="dropdown--dark" onChange={url => window.location = url} spacerBefore={spacerBefore} />;
+ return <Dropdown title="Clusters" items={items} selectedKey={selected} noButton={true} className="cluster-picker" menuClassName="dropdown--dark" onChange={url => window.location.href = url} spacerBefore={spacerBefore} />;
 };
 
 const resources = [{
@@ -47,11 +49,23 @@ const resources = [{
  isList: true,
 }];
 
-export const ClusterPicker = connectToFlags(FLAGS.MULTI_CLUSTER)((props) => props.flags[FLAGS.MULTI_CLUSTER]
+export const ClusterPicker = connectToFlags(FLAGS.MULTI_CLUSTER)((props: ClusterPickerProps) => props.flags[FLAGS.MULTI_CLUSTER]
  ? <Firehose resources={resources}>
- <FirehoseToDropdown />
+ <FirehoseToDropdown {...props as any} />
  </Firehose>
- : <FirehoseToDropdown />);
+ : <FirehoseToDropdown {...props as any} />);
 
 FirehoseToDropdown.displayName = 'FirehoseToDropdown';
 ClusterPicker.displayName = 'ClusterPicker';
+
+export type FirehoseToDropdownProps = {
+ clusters: {
+ loaded: boolean;
+ loadError: string;
+ data?: K8sResourceKind[];
+ };
+};
+
+export type ClusterPickerProps = {
+ flags: {[name: string]: boolean};
+};