TypeScript 3.8.3

frontend/package.json

@@ -195,7 +195,7 @@
     "ts-jest": "21.x",
     "ts-loader": "5.3.3",
     "ts-node": "5.x",
-    "typescript": "3.7.2",
+    "typescript": "3.8.3",
     "webpack": "4.40.2",
     "webpack-bundle-analyzer": "^3.5.0",
     "webpack-cli": "^3.3.9",

frontend/packages/ceph-storage-plugin/src/components/modals/volume-snapshot-modal/volume-snapshot-modal.tsx

@@ -42,8 +42,8 @@ export const VolumeSnapshotModal = withHandlePromise((props: VolumeSnapshotModal
   const [snapshotWeek, setSnapshotWeek] = React.useState(0); // For Weekly schedule
   const [snapshotTime, setSnapshotTime] = React.useState('00:01'); // For weekly and monthly
   const [snapshotMonth, setSnapshotMonth] = React.useState(1); // For monthly schedule
-  const [snapshotName, setSnapshotName] = React.useState();
-  const [scheduleLabel, setScheduleLabel] = React.useState();
+  const [snapshotName, setSnapshotName] = React.useState<string>();
+  const [scheduleLabel, setScheduleLabel] = React.useState<string>();
   const [scheduleType, setScheduleType] = React.useState(snapshotTypes.Single);
 
   const makeLabel = (): string => {

frontend/packages/console-shared/src/types/resource.ts

@@ -3,6 +3,17 @@ import { DEPLOYMENT_STRATEGY } from '../constants';
 import { OverviewItemAlerts, PodControllerOverviewItem } from './pod';
 import { ClusterServiceVersionKind } from '@console/operator-lifecycle-manager';
 
+export type APIError = {
+  status?: string;
+  message?: string;
+  reason?: string;
+  details?: {
+    name?: string;
+    kind?: string;
+  };
+  code?: number;
+};
+
 export type BuildConfigOverviewItem = K8sResourceKind & {
   builds: K8sResourceKind[];
 };

frontend/packages/dev-console/src/components/topology/TopologyDataController.tsx

@@ -89,7 +89,7 @@ export const TopologyDataController: React.FC<TopologyDataControllerProps> = ({
   serviceBinding,
   filters,
 }) => {
-  const [helmResourcesMap, setHelmResourcesMap] = React.useState();
+  const [helmResourcesMap, setHelmResourcesMap] = React.useState<HelmReleaseResourcesMap>();
   const { resources, utils } = getResourceList(namespace, resourceList);
   if (serviceBinding) {
     resources.push({

frontend/packages/dev-console/src/components/topology/filters/FilterDropdown.tsx

@@ -8,7 +8,7 @@ type FilterDropdownProps = {
 };
 
 const FilterDropdown: React.FC<FilterDropdownProps> = ({ filters, onChange }) => {
-  const [isOpen, setIsOpen] = React.useState();
+  const [isOpen, setIsOpen] = React.useState(false);
   const selected = Object.keys(filters).filter((key) => filters[key]);
 
   const onToggle = (open: boolean): void => setIsOpen(open);

frontend/packages/knative-plugin/src/components/revisions/__tests__/RevisionRow.spec.tsx

@@ -58,7 +58,7 @@ describe('RevisionRow', () => {
   });
 
   it('should show "-" in case of no status', () => {
-    revData = _.omit(revData, 'obj.status');
+    revData = _.omit(revData, 'obj.status') as RevisionRowProps;
     const wrapper = shallow(<RevisionRow {...revData} />);
     const conditionColData = wrapper.find(TableData).at(4);
     expect(conditionColData.props().children).toEqual('-');

frontend/packages/knative-plugin/src/components/routes/__tests__/RouteRow.spec.tsx

@@ -34,7 +34,7 @@ describe('RouteRow', () => {
   });
 
   it('should not show ExternalLink for associated route if not found in status', () => {
-    routeData = _.omit(routeData, 'obj.status');
+    routeData = _.omit(routeData, 'obj.status') as RouteRowProps;
     const wrapper = shallow(<RouteRow {...routeData} />);
     const serviceDataTable = wrapper.find(TableData).at(2);
     expect(serviceDataTable.find(ExternalLink)).toHaveLength(0);
@@ -47,7 +47,7 @@ describe('RouteRow', () => {
   });
 
   it('should show "-" in case of no status', () => {
-    routeData = _.omit(routeData, 'obj.status');
+    routeData = _.omit(routeData, 'obj.status') as RouteRowProps;
     const wrapper = shallow(<RouteRow {...routeData} />);
     const conditionColData = wrapper.find(TableData).at(4);
     expect(conditionColData.props().children).toEqual('-');
@@ -63,7 +63,7 @@ describe('RouteRow', () => {
   });
 
   it('should show "-" in case of no traffic', () => {
-    routeData = _.omit(routeData, 'obj.status.traffic');
+    routeData = _.omit(routeData, 'obj.status.traffic') as RouteRowProps;
     const wrapper = shallow(<RouteRow {...routeData} />);
     const trafficColData = wrapper.find(TableData).at(5);
     expect(trafficColData.props().children).toEqual('-');

frontend/packages/knative-plugin/src/components/services/__tests__/serviceRow.spec.tsx

@@ -35,7 +35,7 @@ describe('ServiceRow', () => {
   });
 
   it('should show "-" in case of no url', () => {
-    svcData = _.omit(svcData, 'obj.status.url');
+    svcData = _.omit(svcData, 'obj.status.url') as ServiceRowProps;
     wrapper = shallow(<ServiceRow {...svcData} />);
     const urlColData = wrapper.find(TableData).at(2);
     expect(urlColData.props().children).toEqual('-');
@@ -47,7 +47,7 @@ describe('ServiceRow', () => {
   });
 
   it('should show "-" in generations for no  associated generation', () => {
-    svcData = _.omit(svcData, 'obj.metadata.generation');
+    svcData = _.omit(svcData, 'obj.metadata.generation') as ServiceRowProps;
     wrapper = shallow(<ServiceRow {...svcData} />);
     const generationColData = wrapper.find(TableData).at(3);
     expect(generationColData.props().children).toEqual('-');
@@ -59,7 +59,7 @@ describe('ServiceRow', () => {
   });
 
   it('should show "-" in conditions for no  associated generation', () => {
-    svcData = _.omit(svcData, 'obj.status');
+    svcData = _.omit(svcData, 'obj.status') as ServiceRowProps;
     wrapper = shallow(<ServiceRow {...svcData} />);
     const conditionsColData = wrapper.find(TableData).at(5);
     expect(conditionsColData.props().children).toEqual('-');

frontend/packages/kubevirt-plugin/src/components/vms/serial-console-connector.tsx

@@ -19,12 +19,17 @@ const onResize = (rows, cols) => {
   );
 };
 
+interface WebSocket {
+  destroy(): void;
+  send(data: any): void;
+}
+
 // KubeVirt serial console is accessed via WebSocket proxy in k8s API.
 // Protocol used is "plain.kubevirt.io", means binary and single channel - forwarding of unix socket only (vmhandler sources).
 export const SerialConsoleConnector: React.FC<SerialConsoleConnectorProps> = (props) => {
   const [status, setStatus] = React.useState(LOADING);
   const [passKeys, setPassKeys] = React.useState(false);
-  const [ws, setWS] = React.useState();
+  const [ws, setWS] = React.useState<WebSocket>();
   const childSerialconsole = React.useRef(null);
 
   const onBackendDisconnected = React.useCallback(

frontend/packages/topology/src/behavior/withCreateConnector.tsx

@@ -206,11 +206,6 @@ type ElementProps = {
   element: Node;
 };
 
-type CreateConnectorOptions = {
-  handleAngle?: number;
-  handleLength?: number;
-};
-
 export type WithCreateConnectorProps = {
   onShowCreateConnector: () => void;
   onHideCreateConnector: () => void;

frontend/public/components/api-explorer.tsx

@@ -9,7 +9,7 @@ import * as fuzzy from 'fuzzysearch';
 import { Tooltip } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
 
-import { ALL_NAMESPACES_KEY, FLAGS } from '@console/shared';
+import { ALL_NAMESPACES_KEY, FLAGS, APIError } from '@console/shared';
 import { connectToModel } from '../kinds';
 import { LocalResourceAccessReviewsModel, ResourceAccessReviewsModel } from '../models';
 import {
@@ -21,6 +21,7 @@ import {
   getResourceDescription,
   referenceForModel,
   ResourceAccessReviewRequest,
+  ResourceAccessReviewResponse,
 } from '../module/k8s';
 import { connectToFlags, FlagsObject } from '../reducers/features';
 import { RootState } from '../redux';
@@ -472,8 +473,8 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
   const [showUsers, setShowUsers] = React.useState(true);
   const [showGroups, setShowGroups] = React.useState(true);
   const [showServiceAccounts, setShowServiceAccounts] = React.useState(false);
-  const [accessResponse, setAccessResponse] = React.useState();
-  const [error, setError] = React.useState(null);
+  const [accessResponse, setAccessResponse] = React.useState<ResourceAccessReviewResponse>();
+  const [error, setError] = React.useState<APIError>();
 
   // perform the access review
   React.useEffect(() => {

frontend/public/components/catalog/catalog-page.tsx

@@ -3,12 +3,13 @@ import * as _ from 'lodash-es';
 import { Helmet } from 'react-helmet';
 import { safeLoad } from 'js-yaml';
 
-import { ANNOTATIONS, FLAGS } from '@console/shared';
+import { ANNOTATIONS, FLAGS, APIError } from '@console/shared';
 import { CatalogTileViewPage } from './catalog-items';
 import {
   k8sListPartialMetadata,
   referenceForModel,
   serviceClassDisplayName,
+  K8sResourceCommon,
   K8sResourceKind,
   PartialObjectMetadata,
 } from '../../module/k8s';
@@ -292,11 +293,13 @@ export const Catalog = connectToFlags<CatalogProps>(
   const { flags, mock, namespace } = props;
   const openshiftFlag = flags[FLAGS.OPENSHIFT];
   const serviceCatalogFlag = flags[FLAGS.SERVICE_CATALOG];
-  const [templateMetadata, setTemplateMetadata] = React.useState();
-  const [templateError, setTemplateError] = React.useState();
-  const [projectTemplateMetadata, setProjectTemplateMetadata] = React.useState();
-  const [projectTemplateError, setProjectTemplateError] = React.useState();
-  const [helmCharts, setHelmCharts] = React.useState();
+  const [templateMetadata, setTemplateMetadata] = React.useState<K8sResourceCommon>();
+  const [templateError, setTemplateError] = React.useState<APIError>();
+  const [projectTemplateMetadata, setProjectTemplateMetadata] = React.useState<K8sResourceCommon[]>(
+    null,
+  );
+  const [projectTemplateError, setProjectTemplateError] = React.useState<APIError>();
+  const [helmCharts, setHelmCharts] = React.useState<HelmChartEntries>();
 
   const loadTemplates = openshiftFlag && !mock;
 

frontend/public/components/graphs/index.tsx

@@ -28,17 +28,24 @@ export type DataPoint<X = Date | number | string> = {
   description?: string;
 };
 
+export type PrometheusLabels = { [key: string]: string };
+export type PrometheusValue = [number, string];
+
 // Only covers range and instant vector responses for now.
+export type PrometheusResult = {
+  metric: PrometheusLabels;
+  values?: PrometheusValue[];
+  value?: PrometheusValue;
+};
+
+export type PrometheusData = {
+  resultType: 'matrix' | 'vector' | 'scalar' | 'string';
+  result: PrometheusResult[];
+};
+
 export type PrometheusResponse = {
   status: string;
-  data: {
-    resultType: 'matrix' | 'vector' | 'scalar' | 'string';
-    result: {
-      metric: { [key: string]: any };
-      values?: [number, string | number][];
-      value?: [number, string | number];
-    }[];
-  };
+  data: PrometheusData;
   errorType?: string;
   error?: string;
   warnings?: string[];

frontend/public/components/monitoring.tsx

@@ -27,7 +27,8 @@ import { Table, TableData, TableRow, TextFilter } from './factory';
 import { confirmModal } from './modals';
 import MonitoringDashboardsPage from './monitoring/dashboards';
 import { graphStateToProps, QueryBrowserPage, ToggleGraph } from './monitoring/metrics';
-import { Labels, QueryBrowser, QueryObj } from './monitoring/query-browser';
+import { PrometheusLabels } from './graphs';
+import { QueryBrowser, QueryObj } from './monitoring/query-browser';
 import { CheckBoxes } from './row-filter';
 import { formatPrometheusDuration } from './utils/datetime';
 import { AlertmanagerYAMLEditorWrapper } from './monitoring/alert-manager-yaml-editor';
@@ -1550,8 +1551,8 @@ type Silences = {
 
 type PrometheusAlert = {
   activeAt?: string;
-  annotations: Labels;
-  labels: Labels & {
+  annotations: PrometheusLabels;
+  labels: PrometheusLabels & {
     alertname: string;
   };
   state: AlertStates;
@@ -1565,9 +1566,9 @@ export type Alert = PrometheusAlert & {
 
 type PrometheusRule = {
   alerts: PrometheusAlert[];
-  annotations: Labels;
+  annotations: PrometheusLabels;
   duration: number;
-  labels: Labels;
+  labels: PrometheusLabels;
   name: string;
   query: string;
 };
@@ -1650,7 +1651,7 @@ type AlertingPageProps = {
 };
 
 type GraphProps = {
-  filterLabels?: Labels;
+  filterLabels?: PrometheusLabels;
   hideGraphs: boolean;
   patchQuery: (index: number, patch: QueryObj) => any;
   rule: Rule;

frontend/public/components/monitoring/dashboards/index.tsx

@@ -413,9 +413,9 @@ const MonitoringDashboardsPage_: React.FC<MonitoringDashboardsPageProps> = ({
   match,
   patchAllVariables,
 }) => {
-  const [board, setBoard] = React.useState();
+  const [board, setBoard] = React.useState<string>();
   const [boards, setBoards] = React.useState<Board[]>([]);
-  const [error, setError] = React.useState();
+  const [error, setError] = React.useState<string>();
   const [isLoading, , , setLoaded] = useBoolean(true);
 
   const safeFetch = React.useCallback(useSafeFetch(), []);

frontend/public/components/monitoring/metrics.tsx

@@ -45,7 +45,7 @@ import {
 import * as UIActions from '../../actions/ui';
 import { RootState } from '../../redux';
 import { fuzzyCaseInsensitive } from '../factory/table-filters';
-import { PROMETHEUS_BASE_PATH } from '../graphs';
+import { PrometheusData, PrometheusLabels, PROMETHEUS_BASE_PATH } from '../graphs';
 import { getPrometheusURL, PrometheusEndpoint } from '../graphs/helpers';
 import { getPrometheusExpressionBrowserURL } from '../graphs/prometheus-graph';
 import {
@@ -59,7 +59,7 @@ import {
   useSafeFetch,
 } from '../utils';
 import { setAllQueryArguments } from '../utils/router';
-import { colors, Error, Labels, QueryObj, QueryBrowser } from './query-browser';
+import { colors, Error, QueryObj, QueryBrowser } from './query-browser';
 
 const aggregationOperators = [
   'avg()',
@@ -219,7 +219,7 @@ const MetricsDropdown_: React.FC<MetricsDropdownProps> = ({
   namespace,
   setMetrics,
 }) => {
-  const [items, setItems] = React.useState();
+  const [items, setItems] = React.useState<MetricsDropdownItems>();
   const [isError, setIsError] = React.useState(false);
 
   const safeFetch = React.useCallback(useSafeFetch(), []);
@@ -602,7 +602,7 @@ const QueryTable_: React.FC<QueryTableProps> = ({
   query,
   series,
 }) => {
-  const [data, setData] = React.useState();
+  const [data, setData] = React.useState<PrometheusData>();
   const [error, setError] = React.useState();
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(50);
@@ -1024,6 +1024,10 @@ type MetricsActionsMenuProps = {
   setAllExpanded: (isExpanded: boolean) => never;
 };
 
+type MetricsDropdownItems = {
+  [key: string]: string;
+};
+
 type MetricsDropdownProps = {
   insertText: (index: number, newText: string, replaceFrom: number, replaceTo: number) => never;
   namespace?: string;
@@ -1054,7 +1058,7 @@ type QueryKebabProps = {
   isDisabledSeriesEmpty: boolean;
   isEnabled: boolean;
   patchQuery: (patch: QueryObj) => void;
-  series: Labels[];
+  series: PrometheusLabels[];
   toggleIsEnabled: () => never;
 };
 
@@ -1074,7 +1078,7 @@ type QueryTableProps = {
   isExpanded: boolean;
   namespace?: string;
   query: string;
-  series: Labels[];
+  series: PrometheusLabels[];
 };
 
 type SeriesButtonProps = {