Fix Template Credentials in the UI / Turn on typechecking of UI code (#3704)

* Turn on typechecking of UI code
* Fixes up types after turning on Typechecking in CI
* Tidy up types a bit

Author: foot

.github/workflows/test.yaml

@@ -132,8 +132,9 @@ jobs:
             ${{ runner.os }}-${{ env.YARN_CACHE_NAME }}-
       - name: Install modules
         run: yarn --pure-lockfile
+      - name: Typecheck Frontend Code
+        run: yarn tsc
       - name: Lint Frontend Code
         run: yarn lint
       - name: Run Front-end Unit Tests
         run: yarn test
-  

tools/dev-resources/user-guide/vcluster-capi-template.yaml

@@ -6,6 +6,7 @@ metadata:
   annotations:
     templates.weave.works/profiles-enabled: "true"
     templates.weave.works/add-common-bases: "true"
+    templates.weave.works/credentials-enabled: "true"
   labels:
     weave.works/template-type: cluster
 spec:

ui/src/components/Explorer/__tests__/Explorer.test.tsx

@@ -8,6 +8,7 @@ import { EnterpriseClientContext } from '../../../contexts/API';
 import {
   defaultContexts,
   MockQueryService,
+  newMockQueryService,
   withContext,
 } from '../../../utils/test-utils';
 import Explorer from '../Explorer';
@@ -49,7 +50,7 @@ describe('Explorer', () => {
   let api: MockQueryService;
 
   beforeEach(() => {
-    api = new MockQueryService();
+    api = newMockQueryService();
     wrap = withContext([
       ...defaultContexts(),
       [EnterpriseClientContext.Provider, { value: { query: api } }],

ui/src/components/GitAuth/GithubDeviceAuthModal.tsx

@@ -8,7 +8,6 @@ import { storeProviderToken } from './utils';
 
 type Props = {
   className?: string;
-  bodyClassName?: string;
   open: boolean;
   onSuccess: (token: string) => void;
   onClose: () => void;
@@ -17,7 +16,6 @@ type Props = {
 
 export function GithubDeviceAuthModal({
   className,
-  bodyClassName,
   open,
   onClose,
   repoName,
@@ -27,7 +25,6 @@ export function GithubDeviceAuthModal({
   return (
     <Modal
       className={className}
-      bodyClassName={bodyClassName}
       title="Authenticate with Github"
       open={open}
       onClose={onClose}

ui/src/components/GitAuth/index.tsx

@@ -77,7 +77,6 @@ const GitAuth: FC<{
       />
       {showAuthDialog && (
         <GithubDeviceAuthModal
-          bodyClassName="GithubDeviceAuthModal"
           onClose={() => setShowAuthDialog(false)}
           onSuccess={() => setShowAuthDialog(false)}
           open={showAuthDialog}

ui/src/contexts/API/index.tsx

@@ -10,7 +10,7 @@ import { Pipelines } from '../../api/pipelines/pipelines.pb';
 import { Query } from '../../api/query/query.pb';
 import { GitAuth } from '../../api/gitauth/gitauth.pb';
 
-interface APIs {
+export interface APIs {
   terraform: typeof Terraform;
   clustersService: typeof ClustersService;
   progressiveDeliveryService: typeof ProgressiveDeliveryService;

ui/src/hooks/__tests__/query.test.tsx

@@ -1,19 +1,22 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { EnterpriseClientContext } from '../../contexts/API';
-import { MockQueryService } from '../../utils/test-utils';
+import { APIs, EnterpriseClientContext } from '../../contexts/API';
+import { MockQueryService, newMockQueryService } from '../../utils/test-utils';
 import { formatFilters, useQueryService } from '../query';
 
 describe('useQueryService', () => {
   let mock: MockQueryService;
   let wrapper: ({ children }: any) => JSX.Element;
 
   beforeEach(() => {
-    mock = new MockQueryService();
+    mock = newMockQueryService();
 
     wrapper = ({ children }: any) => (
       <QueryClientProvider client={new QueryClient()}>
-        <EnterpriseClientContext.Provider value={{ query: mock }}>
+        <EnterpriseClientContext.Provider
+          // We are supplied an incomplete API set here
+          value={{ query: mock } as unknown as APIs}
+        >
           {children}
         </EnterpriseClientContext.Provider>
       </QueryClientProvider>

ui/src/hooks/credentials.ts

@@ -6,6 +6,6 @@ import { useEnterpriseClient } from '../contexts/API';
 export function useListCredentials() {
   const { clustersService } = useEnterpriseClient();
   return useQuery<ListCredentialsResponse, Error>('credentials', () =>
-    clustersService.vice.ListCredentials({}),
+    clustersService.ListCredentials({}),
   );
 }

ui/src/utils/test-utils.tsx

@@ -21,12 +21,7 @@ import {
 } from '@weaveworks/weave-gitops/ui/lib/api/core/core.pb';
 import _ from 'lodash';
 import React from 'react';
-import {
-  Query,
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
-} from 'react-query';
+import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import {
@@ -77,17 +72,20 @@ import {
 import {
   DebugGetAccessRulesRequest,
   DebugGetAccessRulesResponse,
-  ListFacetsRequest,
-  ListFacetsResponse,
   DoQueryRequest,
   DoQueryResponse,
+  ListEnabledComponentsRequest,
+  ListEnabledComponentsResponse,
+  ListFacetsRequest,
+  ListFacetsResponse,
+  Query,
 } from '../api/query/query.pb';
 
 import Compose from '../components/ProvidersCompose';
+import { EnterpriseClientProvider } from '../contexts/API';
 import NotificationProvider from '../contexts/Notifications/Provider';
 import RequestContextProvider from '../contexts/Request';
 import { muiTheme } from '../muiTheme';
-import { EnterpriseClientProvider } from '../contexts/API';
 
 export type RequestError = Error & {
   code?: number;
@@ -444,28 +442,51 @@ export class SecretsClientMock {
   }
 }
 
-export class MockQueryService {
-  DoQueryReturns: DoQueryResponse = {};
-  DebugGetAccessRulesReturns: DebugGetAccessRulesResponse = {};
-  ListFacetsReturns: ListFacetsResponse = {};
+export type MockQueryService = typeof Query & {
+  DoQueryReturns: DoQueryResponse;
+  DebugGetAccessRulesReturns: DebugGetAccessRulesResponse;
+  ListFacetsReturns: ListFacetsResponse;
+  ListEnabledComponentsReturns: ListEnabledComponentsResponse;
+};
 
-  DoQuery(req: DoQueryRequest, initReq?: any): Promise<DoQueryResponse> {
-    return promisify(this.DoQueryReturns);
-  }
+// Our Query service is a class with static methods.
+// The mock will be mutated between tests, so to keep the tests
+// consistent we need to create a new class instance for each test.
+export function newMockQueryService(): MockQueryService {
+  return class {
+    static DoQueryReturns: DoQueryResponse = {};
+    static DebugGetAccessRulesReturns: DebugGetAccessRulesResponse = {};
+    static ListFacetsReturns: ListFacetsResponse = {};
+    static ListEnabledComponentsReturns: ListEnabledComponentsResponse = {};
+
+    static ListEnabledComponents(
+      req: ListEnabledComponentsRequest,
+      initReq?: any,
+    ): Promise<ListEnabledComponentsResponse> {
+      return promisify(this.ListEnabledComponentsReturns);
+    }
 
-  DebugGetAccessRules(
-    req: DebugGetAccessRulesRequest,
-    initReq?: any,
-  ): Promise<DebugGetAccessRulesResponse> {
-    return promisify(this.DebugGetAccessRulesReturns);
-  }
+    static DoQuery(
+      req: DoQueryRequest,
+      initReq?: any,
+    ): Promise<DoQueryResponse> {
+      return promisify(this.DoQueryReturns);
+    }
 
-  ListFacets(
-    req: ListFacetsRequest,
-    initReq?: any,
-  ): Promise<ListFacetsResponse> {
-    return promisify(this.ListFacetsReturns);
-  }
+    static DebugGetAccessRules(
+      req: DebugGetAccessRulesRequest,
+      initReq?: any,
+    ): Promise<DebugGetAccessRulesResponse> {
+      return promisify(this.DebugGetAccessRulesReturns);
+    }
+
+    static ListFacets(
+      req: ListFacetsRequest,
+      initReq?: any,
+    ): Promise<ListFacetsResponse> {
+      return promisify(this.ListFacetsReturns);
+    }
+  };
 }
 
 export function findCellInCol(cell: string, tableSelector: string) {