Add party identifier autocompletion to Navigator (#12923)

Fixes #12789

Adds a new query endpoint to Navigator's GraphQL backend that
lists all the parties registered by Navigator. The parties are
filtered on the server based on a query from the frontend and
served back. The frontend uses this to provide suggestion and
autocompletion features whenever a party identifier input is
required.

changelog_begin
[Navigator] Whenever you have to input a party identifier you
are now offered suggestions and the possibility to
autocomplete. See #12789.
changelog_end

.prettierignore

@@ -20,3 +20,7 @@ bazel-bin
 bazel-daml
 bazel-out
 bazel-testlogs
+
+# ignore generated code
+navigator/frontend/src/api/Queries.ts
+navigator/frontend/src/ui-core/src/api/Queries.ts

navigator/backend/src/main/scala/com/digitalasset/navigator/graphql/GraphQLSchema.scala

@@ -575,6 +575,15 @@ final class GraphQLSchema(customEndpoints: Set[CustomEndpoint[_]]) {
   val QueryType = ObjectType(
     "Query",
     fields[GraphQLContext, Unit](
+      Field(
+        "parties",
+        ListType(PartyType),
+        arguments = SearchArg :: Nil,
+        resolve = context =>
+          (context.ctx.store ? GetParties(context.arg(SearchArg).getOrElse("")))
+            .mapTo[PartyList]
+            .map(response => Tag.unsubst(response.parties)),
+      ),
       Field(
         "ledgerTime",
         LedgerTimeType,

navigator/backend/src/main/scala/com/digitalasset/navigator/store/Store.scala

@@ -66,6 +66,12 @@ object Store {
   /** Request diagnostic information about the state of the application and respond with a [[ApplicationStateInfo]]. */
   case object GetApplicationStateInfo
 
+  /** Request a list of all parties that have an active actor on the system matching the provided search string */
+  final case class GetParties(search: String)
+
+  /** Response to a request for parties */
+  final case class PartyList(parties: List[ApiTypes.Party])
+
   /** Diagnostic information about the state of the application */
   sealed trait ApplicationStateInfo {
     def platformHost: String

navigator/backend/src/main/scala/com/digitalasset/navigator/store/platform/PlatformStore.scala

@@ -258,6 +258,13 @@ class PlatformStore(
     case ExerciseChoice(party, contractId, choiceId, value) =>
       exerciseChoice(state.time.time.getCurrentTime, party, contractId, choiceId, value, sender())
 
+    case GetParties(search) =>
+      val lowerCaseSearch = search.toLowerCase
+      val result = state.parties.values.view.collect {
+        case party if party.name.unwrap.toLowerCase.contains(lowerCaseSearch) => party.name
+      }
+      sender() ! PartyList(result.toList)
+
     case ReportCurrentTime =>
       sender() ! Success(state.time)
 

navigator/backend/src/test/resources/schema.graphql

@@ -170,6 +170,7 @@ interface Node {
 scalar Party
 
 type Query {
+  parties(search: String): [Party!]!
   ledgerTime: LedgerTime!
   latestTransaction: Transaction
   node(typename: String!, id: ID!): Node

navigator/frontend/Makefile

@@ -30,11 +30,11 @@ report-licenses: setup
 
 update-graphql-types: setup
 	yarn run apollo client:codegen -c ./apollo.config.js --passthroughCustomScalars --customScalarsPrefix=OpaqueTypes. --outputFlat --target typescript --includes="./src/ui-core/**/*.ts*" ./src/ui-core/src/api/QueriesBody.txt
-	echo "import * as OpaqueTypes from './OpaqueTypes'" > ./src/ui-core/src/api/Queries.ts
+	echo 'import * as OpaqueTypes from "./OpaqueTypes";' > ./src/ui-core/src/api/Queries.ts
 	cat ./src/ui-core/src/api/QueriesBody.txt >> ./src/ui-core/src/api/Queries.ts
 	rm ./src/ui-core/src/api/QueriesBody.txt
 
 	yarn run apollo client:codegen -c ./apollo.config.js --passthroughCustomScalars --customScalarsPrefix=OpaqueTypes. --outputFlat --target typescript --includes="./src/**/*.ts*" --excludes="./src/ui-core/**/*.ts*" ./src/api/QueriesBody.txt
-	echo "import * as OpaqueTypes from '@da/ui-core/lib/api/OpaqueTypes'" > ./src/api/Queries.ts
+	echo 'import * as OpaqueTypes from "@da/ui-core/lib/api/OpaqueTypes";' > ./src/api/Queries.ts
 	cat ./src/api/QueriesBody.txt >> ./src/api/Queries.ts
 	rm ./src/api/QueriesBody.txt

navigator/frontend/package.json

@@ -37,6 +37,7 @@
     "@types/styled-components": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
+    "apollo": "^2.5.1",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
     "classnames": "^2.2.5",
     "css-loader": "^5.2.7",
@@ -67,7 +68,6 @@
     "deep-equal": "^2.0.5",
     "enzyme": "^3.11.0",
     "es6-promise": "^4.1.1",
-    "graphql": "^15.4.0",
     "jpeg-js": "^0.4.1",
     "lodash": "^4.17.19",
     "modernizr": "^3.11.8",
@@ -98,7 +98,7 @@
     "**/css-what": "^5.0.1",
     "**/glob-parent": "^6.0.0",
     "**/set-value": "^4.0.1",
-    "html-webpack-plugin/**/strip-ansi": "^6.0.0",
+    "**/strip-ansi": "^6.0.0",
     "modernizr/**/markdown-it": "^12.3.2"
   }
 }

navigator/frontend/src/api/Queries.ts

@@ -9,14 +9,7 @@ import * as OpaqueTypes from "@da/ui-core/lib/api/OpaqueTypes";
 // ====================================================
 
 export interface ContractDetailsById_node_CreateCommand {
-  __typename:
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Template"
-    | "Transaction";
+  __typename: "CreateCommand" | "CreatedEvent" | "DamlLfDefDataType" | "ExerciseCommand" | "ExercisedEvent" | "Template" | "Transaction";
 }
 
 export interface ContractDetailsById_node_Contract_archiveEvent {
@@ -49,9 +42,7 @@ export interface ContractDetailsById_node_Contract {
   template: ContractDetailsById_node_Contract_template;
 }
 
-export type ContractDetailsById_node =
-  | ContractDetailsById_node_CreateCommand
-  | ContractDetailsById_node_Contract;
+export type ContractDetailsById_node = ContractDetailsById_node_CreateCommand | ContractDetailsById_node_Contract;
 
 export interface ContractDetailsById {
   node: ContractDetailsById_node | null;
@@ -158,14 +149,7 @@ export interface ContractsQueryVariables {
 // ====================================================
 
 export interface TemplateInstance_node_Contract {
-  __typename:
-    | "Contract"
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Transaction";
+  __typename: "Contract" | "CreateCommand" | "CreatedEvent" | "DamlLfDefDataType" | "ExerciseCommand" | "ExercisedEvent" | "Transaction";
 }
 
 export interface TemplateInstance_node_Template {
@@ -175,9 +159,7 @@ export interface TemplateInstance_node_Template {
   topLevelDecl: string;
 }
 
-export type TemplateInstance_node =
-  | TemplateInstance_node_Contract
-  | TemplateInstance_node_Template;
+export type TemplateInstance_node = TemplateInstance_node_Contract | TemplateInstance_node_Template;
 
 export interface TemplateInstance {
   node: TemplateInstance_node | null;
@@ -215,14 +197,7 @@ export interface CreateContractVariables {
 // ====================================================
 
 export interface ContractsByTemplateParamQuery_node_Contract {
-  __typename:
-    | "Contract"
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Transaction";
+  __typename: "Contract" | "CreateCommand" | "CreatedEvent" | "DamlLfDefDataType" | "ExerciseCommand" | "ExercisedEvent" | "Transaction";
 }
 
 export interface ContractsByTemplateParamQuery_node_Template_parameterDef {
@@ -236,9 +211,7 @@ export interface ContractsByTemplateParamQuery_node_Template {
   parameterDef: ContractsByTemplateParamQuery_node_Template_parameterDef;
 }
 
-export type ContractsByTemplateParamQuery_node =
-  | ContractsByTemplateParamQuery_node_Contract
-  | ContractsByTemplateParamQuery_node_Template;
+export type ContractsByTemplateParamQuery_node = ContractsByTemplateParamQuery_node_Contract | ContractsByTemplateParamQuery_node_Template;
 
 export interface ContractsByTemplateParamQuery {
   node: ContractsByTemplateParamQuery_node | null;
@@ -258,14 +231,7 @@ export interface ContractsByTemplateParamQueryVariables {
 // ====================================================
 
 export interface ContractsByTemplateQuery_node_Contract {
-  __typename:
-    | "Contract"
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Transaction";
+  __typename: "Contract" | "CreateCommand" | "CreatedEvent" | "DamlLfDefDataType" | "ExerciseCommand" | "ExercisedEvent" | "Transaction";
 }
 
 export interface ContractsByTemplateQuery_node_Template_choices {
@@ -327,9 +293,7 @@ export interface ContractsByTemplateQuery_node_Template {
   contracts: ContractsByTemplateQuery_node_Template_contracts;
 }
 
-export type ContractsByTemplateQuery_node =
-  | ContractsByTemplateQuery_node_Contract
-  | ContractsByTemplateQuery_node_Template;
+export type ContractsByTemplateQuery_node = ContractsByTemplateQuery_node_Contract | ContractsByTemplateQuery_node_Template;
 
 export interface ContractsByTemplateQuery {
   node: ContractsByTemplateQuery_node | null;

navigator/frontend/src/applets/contract/Exercise.tsx

@@ -62,8 +62,9 @@ class Component extends React.Component<Props, Local> {
           onChange={argument => this.setState({ argument })}
           onSubmit={this.props.onSubmit}
           error={this.props.error}
-          typeProvider={this.paramDataProvider}
+          partyIdProvider={this.paramDataProvider}
           contractIdProvider={this.paramDataProvider}
+          typeProvider={this.paramDataProvider}
         />
       </div>
     );

navigator/frontend/src/applets/template/TemplateComponent.tsx

@@ -77,8 +77,9 @@ class Component extends React.Component<Props & ApolloProps, Local> {
             onChange={argument => this.setState({ argument })}
             onSubmit={onSubmit}
             error={error}
-            typeProvider={this.paramDataProvider}
+            partyIdProvider={this.paramDataProvider}
             contractIdProvider={this.paramDataProvider}
+            typeProvider={this.paramDataProvider}
           />
         </Content>
       </Wrapper>

navigator/frontend/src/ui-core/src/ParameterForm/ApolloDataProvider.ts

@@ -7,13 +7,26 @@ import { DamlLfDefDataType, DamlLfIdentifier } from "../api/DamlLfType";
 import {
   ParameterFormContractIdQuery,
   ParameterFormContractIdQueryVariables,
+  ParameterFormPartyQuery,
   ParameterFormTypeQuery,
   ParameterFormTypeQueryVariables,
 } from "../api/Queries";
-import { ContractIdProvider, ParameterFormContract, TypeProvider } from "./";
+import {
+  ContractIdProvider,
+  ParameterFormContract,
+  ParameterFormParty,
+  PartyIdProvider,
+  TypeProvider,
+} from "./";
 
 const MAX_CONTRACTS = 30;
 
+const partyIdQuery = gql`
+  query ParameterFormPartyQuery($filter: String!) {
+    parties(search: $filter)
+  }
+`;
+
 const contractIdQuery = gql`
   query ParameterFormContractIdQuery(
     $filter: String!
@@ -66,7 +79,7 @@ const typeQuery = gql`
 `;
 
 export default class ApolloDataProvider
-  implements ContractIdProvider, TypeProvider
+  implements PartyIdProvider, ContractIdProvider, TypeProvider
 {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   readonly client: ApolloClient<any>;
@@ -76,6 +89,30 @@ export default class ApolloDataProvider
     this.client = client;
   }
 
+  fetchParties(
+    filter: string,
+    onResult: (result: ParameterFormParty[]) => void,
+  ): void {
+    this.client
+      .query<ParameterFormPartyQuery>({
+        query: partyIdQuery,
+        variables: {
+          filter,
+        },
+        fetchPolicy: "network-only",
+      })
+      .then(({ data }) => {
+        onResult(
+          data.parties.map(id => {
+            return { id };
+          }),
+        );
+      })
+      .catch(reason => {
+        console.error(reason);
+      });
+  }
+
   fetchContracts(
     filter: string,
     onResult: (result: ParameterFormContract[]) => void,

navigator/frontend/src/ui-core/src/ParameterForm/PartyInput.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) 2022 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import { DamlLfTypePrim } from "../api/DamlLfType";
+import { DamlLfValue } from "../api/DamlLfValue";
+import * as DamlLfValueF from "../api/DamlLfValue";
+import { shortenPartyId } from "../api/IdentifierShortening";
+import Autosuggest from "../Autosuggest";
+import styled from "../theme";
+import { TypeErrorElement } from "../util";
+import { matchPrimitiveType, ParameterFormParty } from "./index";
+
+const Container = styled.div`
+  display: flex;
+  width: 560px;
+`;
+
+const BigColumn = styled.div`
+  flex: 0.4;
+  width: 100%;
+`;
+
+function renderSuggestion(p: ParameterFormParty): JSX.Element {
+  return (
+    <Container>
+      <BigColumn>{shortenPartyId(p.id)}</BigColumn>
+    </Container>
+  );
+}
+
+export interface Props {
+  className?: string;
+  parameter: DamlLfTypePrim;
+  disabled: boolean;
+  onChange(val: DamlLfValue): void;
+  argument: DamlLfValue;
+  onFetchParties?(
+    filter: string,
+    onResult: (result: ParameterFormParty[]) => void,
+  ): void;
+}
+
+type AutosuggestType = Autosuggest<ParameterFormParty>;
+type AutosuggestCtor = new () => AutosuggestType;
+const TypedAutosuggest: AutosuggestCtor = Autosuggest as AutosuggestCtor;
+
+const PartyInput: React.StatelessComponent<Props> = props => {
+  const {
+    argument,
+    parameter,
+    className,
+    disabled,
+    onChange,
+    onFetchParties = () => [],
+  } = props;
+  if (matchPrimitiveType(argument, parameter, "party")) {
+    const displayValue = argument.type === "party" ? argument.value : undefined;
+    return (
+      <TypedAutosuggest
+        className={className}
+        initialValue={displayValue}
+        disabled={disabled}
+        placeholder="Party"
+        onFetchSuggestions={onFetchParties}
+        renderSuggestion={renderSuggestion}
+        getSuggestionValue={p => p.id}
+        onChange={str => onChange(DamlLfValueF.party(str))}
+      />
+    );
+  } else {
+    return <TypeErrorElement parameter={parameter} argument={argument} />;
+  }
+};
+
+export default PartyInput;

navigator/frontend/src/ui-core/src/ParameterForm/index.tsx

@@ -25,7 +25,6 @@ import {
   DamlLfValueList,
   DamlLfValueNumeric,
   DamlLfValueOptional,
-  DamlLfValueParty,
   DamlLfValueRecord,
   DamlLfValueText,
   DamlLfValueTextMap,
@@ -44,6 +43,7 @@ import styled from "../theme";
 import TimeInput from "../TimeInput";
 import { NonExhaustiveMatch, TypeErrorElement } from "../util";
 import ContractIdInput from "./ContractIdInput";
+import PartyInput from "./PartyInput";
 
 import * as DamlLfValueF from "@da/ui-core/lib/api/DamlLfValue";
 
@@ -136,30 +136,6 @@ const TextInput = (props: InputProps<DamlLfValueText>): JSX.Element => {
   }
 };
 
-//-------------------------------------------------------------------------------------------------
-// Party - primitive value
-//-------------------------------------------------------------------------------------------------
-
-const PartyInput = (props: InputProps<DamlLfValueParty>): JSX.Element => {
-  const { parameter, argument, disabled, onChange } = props;
-  if (matchPrimitiveType(argument, parameter, "party")) {
-    const displayValue = argument.type === "party" ? argument.value : undefined;
-    return (
-      <StyledTextInput
-        type="text"
-        disabled={disabled}
-        placeholder="Party"
-        value={displayValue}
-        onChange={e => {
-          onChange(DamlLfValueF.party((e.target as HTMLInputElement).value));
-        }}
-      />
-    );
-  } else {
-    return <TypeErrorElement parameter={parameter} argument={argument} />;
-  }
-};
-
 /*
 // Note: the ledger may use decimals with unlimited precision,
 // do not validate by parsing into JS numbers.
@@ -305,6 +281,7 @@ interface VariantInputProps {
   onChange(val: DamlLfValueVariant): void;
   argument: DamlLfValue;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -317,6 +294,7 @@ const VariantInput = (props: VariantInputProps): JSX.Element => {
     level,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -370,6 +348,7 @@ const VariantInput = (props: VariantInputProps): JSX.Element => {
         {constructor !== undefined ? (
           <LabeledElement label={"Value"} key={"value"}>
             <ParameterInput
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
               typeProvider={typeProvider}
               parameter={constructor.value}
@@ -401,6 +380,7 @@ interface RecordInputProps {
   onChange(val: DamlLfValueRecord): void;
   argument: DamlLfValue;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -413,6 +393,7 @@ const RecordInput = (props: RecordInputProps): JSX.Element => {
     level,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -423,6 +404,7 @@ const RecordInput = (props: RecordInputProps): JSX.Element => {
         {parameter.fields.map((f, i) => (
           <LabeledElement label={f.name} key={f.name}>
             <ParameterInput
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
               typeProvider={typeProvider}
               parameter={f.value}
@@ -498,6 +480,7 @@ interface OptionalInputProps {
   onChange(val: DamlLfValueOptional): void;
   argument: DamlLfValue;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -509,6 +492,7 @@ const OptionalInput = (props: OptionalInputProps): JSX.Element => {
     level,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -548,6 +532,7 @@ const OptionalInput = (props: OptionalInputProps): JSX.Element => {
         {value !== null ? (
           <LabeledElement label={"Value"} key={"value"}>
             <ParameterInput
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
               typeProvider={typeProvider}
               parameter={valueType}
@@ -694,6 +679,7 @@ interface ListInputProps extends InputProps<DamlLfValueList> {
   parameter: DamlLfTypePrim;
   name: string;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -706,6 +692,7 @@ const ListInput = (props: ListInputProps): JSX.Element => {
     name,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -717,6 +704,7 @@ const ListInput = (props: ListInputProps): JSX.Element => {
         {elements.map((k, i) => (
           <LabeledElement label={`[${i}]`} key={i}>
             <ParameterInput
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
               typeProvider={typeProvider}
               parameter={elementType}
@@ -762,6 +750,7 @@ interface MapInputProps extends InputProps<DamlLfValueTextMap> {
   parameter: DamlLfTypePrim;
   name: string;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -773,6 +762,7 @@ const MapInput = (props: MapInputProps): JSX.Element => {
     level,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -804,6 +794,7 @@ const MapInput = (props: MapInputProps): JSX.Element => {
               </LabeledElement>
               <LabeledElement label={`value`} key={`value[${i}]`}>
                 <ParameterInput
+                  partyIdProvider={partyIdProvider}
                   contractIdProvider={contractIdProvider}
                   typeProvider={typeProvider}
                   parameter={elementType}
@@ -856,6 +847,7 @@ interface GenMapInputProps extends InputProps<DamlLfValueGenMap> {
   parameter: DamlLfTypePrim;
   name: string;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -867,6 +859,7 @@ const GenMapInput = (props: GenMapInputProps): JSX.Element => {
     level,
     onChange,
     disabled,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -882,6 +875,7 @@ const GenMapInput = (props: GenMapInputProps): JSX.Element => {
             <NestedForm level={level + 1}>
               <LabeledElement label={`key`} key={`entries[${i}].key`}>
                 <ParameterInput
+                  partyIdProvider={partyIdProvider}
                   contractIdProvider={contractIdProvider}
                   typeProvider={typeProvider}
                   parameter={keyType}
@@ -898,6 +892,7 @@ const GenMapInput = (props: GenMapInputProps): JSX.Element => {
               </LabeledElement>
               <LabeledElement label={`value`} key={`entries[${i}].value`}>
                 <ParameterInput
+                  partyIdProvider={partyIdProvider}
                   contractIdProvider={contractIdProvider}
                   typeProvider={typeProvider}
                   parameter={valueType}
@@ -957,6 +952,7 @@ interface TypeConInputProps {
   disabled: boolean;
   name: string;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -1027,8 +1023,9 @@ class TypeConInput extends React.Component<
       disabled,
       onChange,
       level,
-      typeProvider,
+      partyIdProvider,
       contractIdProvider,
+      typeProvider,
     } = this.props;
     const { dataType } = this.state;
 
@@ -1045,8 +1042,9 @@ class TypeConInput extends React.Component<
               disabled={disabled}
               onChange={onChange}
               level={level}
-              typeProvider={typeProvider}
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
+              typeProvider={typeProvider}
             />
           );
         case "variant":
@@ -1058,8 +1056,9 @@ class TypeConInput extends React.Component<
               disabled={disabled}
               onChange={onChange}
               level={level}
-              typeProvider={typeProvider}
+              partyIdProvider={partyIdProvider}
               contractIdProvider={contractIdProvider}
+              typeProvider={typeProvider}
             />
           );
         case "enum":
@@ -1107,6 +1106,16 @@ export interface TypeProvider {
   ): void;
 }
 
+export interface ParameterFormParty {
+  id: string;
+}
+export interface PartyIdProvider {
+  fetchParties(
+    filter: string,
+    onResult: (result: ParameterFormParty[]) => void,
+  ): void;
+}
+
 //-------------------------------------------------------------------------------------------------
 // Parameter Input
 //-------------------------------------------------------------------------------------------------
@@ -1119,6 +1128,7 @@ export interface ParameterInputProps {
   validate?(val: DamlLfValue): boolean;
   name: string;
   level: number;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -1130,6 +1140,7 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
     name,
     disabled,
     onChange,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
     validate,
@@ -1153,12 +1164,14 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
       case "party":
         return (
           <PartyInput
+            onFetchParties={
+              partyIdProvider &&
+              partyIdProvider.fetchParties.bind(partyIdProvider)
+            }
             parameter={parameter}
             disabled={disabled}
             onChange={onChange}
             argument={argument}
-            validate={validate}
-            name={name}
           />
         );
       case "contractid":
@@ -1235,6 +1248,7 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
             validate={validate}
             level={level}
             name={name}
+            partyIdProvider={partyIdProvider}
             contractIdProvider={contractIdProvider}
             typeProvider={typeProvider}
           />
@@ -1248,6 +1262,7 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
             onChange={onChange}
             argument={argument}
             level={level}
+            partyIdProvider={partyIdProvider}
             typeProvider={typeProvider}
           />
         );
@@ -1258,6 +1273,7 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
             parameter={parameter}
             name={name}
             level={level}
+            partyIdProvider={partyIdProvider}
             typeProvider={typeProvider}
             disabled={disabled}
             onChange={onChange}
@@ -1300,6 +1316,7 @@ export const ParameterInput = (props: ParameterInputProps): JSX.Element => {
         level={level}
         name={name}
         onChange={onChange}
+        partyIdProvider={partyIdProvider}
         contractIdProvider={contractIdProvider}
         typeProvider={typeProvider}
       />
@@ -1328,6 +1345,7 @@ export interface Props {
   argument: DamlLfValue;
   className?: string;
   error?: string;
+  partyIdProvider?: PartyIdProvider;
   contractIdProvider?: ContractIdProvider;
   typeProvider: TypeProvider;
 }
@@ -1395,6 +1413,7 @@ const ParameterForm = (props: Props): JSX.Element => {
     onChange,
     onSubmit,
     error,
+    partyIdProvider,
     contractIdProvider,
     typeProvider,
   } = props;
@@ -1406,6 +1425,7 @@ const ParameterForm = (props: Props): JSX.Element => {
   return (
     <StyledForm className={className}>
       <ParameterInput
+        partyIdProvider={partyIdProvider}
         contractIdProvider={contractIdProvider}
         typeProvider={typeProvider}
         parameter={parameter}

navigator/frontend/src/ui-core/src/api/OpaqueTypes.ts

@@ -8,6 +8,8 @@ export type TimeType = "static" | "wallclock" | "simulated";
 
 export type CommandId = string;
 
+export type Party = string;
+
 export { DamlLfValue, DamlLfValueRecord } from "./DamlLfValue";
 
 export { DamlLfType, DamlLfDataType } from "./DamlLfType";

navigator/frontend/src/ui-core/src/api/Queries.ts

@@ -33,14 +33,7 @@ export interface advanceTimeVariables {
 // ====================================================
 
 export interface ContractsByIdQuery_nodes_CreateCommand {
-  __typename:
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Template"
-    | "Transaction";
+  __typename: "CreateCommand" | "CreatedEvent" | "DamlLfDefDataType" | "ExerciseCommand" | "ExercisedEvent" | "Template" | "Transaction";
   id: string;
 }
 
@@ -55,9 +48,7 @@ export interface ContractsByIdQuery_nodes_Contract {
   archiveEvent: ContractsByIdQuery_nodes_Contract_archiveEvent | null;
 }
 
-export type ContractsByIdQuery_nodes =
-  | ContractsByIdQuery_nodes_CreateCommand
-  | ContractsByIdQuery_nodes_Contract;
+export type ContractsByIdQuery_nodes = ContractsByIdQuery_nodes_CreateCommand | ContractsByIdQuery_nodes_Contract;
 
 export interface ContractsByIdQuery {
   nodes: ContractsByIdQuery_nodes[];
@@ -77,21 +68,12 @@ export interface ContractsByIdQueryVariables {
 // ====================================================
 
 export interface CommandResultsQuery_nodes_Contract {
-  __typename:
-    | "Contract"
-    | "CreatedEvent"
-    | "DamlLfDefDataType"
-    | "ExercisedEvent"
-    | "Template"
-    | "Transaction";
+  __typename: "Contract" | "CreatedEvent" | "DamlLfDefDataType" | "ExercisedEvent" | "Template" | "Transaction";
   id: string;
 }
 
 export interface CommandResultsQuery_nodes_CreateCommand_status_CommandStatusWaiting {
-  __typename:
-    | "CommandStatusWaiting"
-    | "CommandStatusSuccess"
-    | "CommandStatusUnknown";
+  __typename: "CommandStatusWaiting" | "CommandStatusSuccess" | "CommandStatusUnknown";
 }
 
 export interface CommandResultsQuery_nodes_CreateCommand_status_CommandStatusError {
@@ -100,9 +82,7 @@ export interface CommandResultsQuery_nodes_CreateCommand_status_CommandStatusErr
   details: string;
 }
 
-export type CommandResultsQuery_nodes_CreateCommand_status =
-  | CommandResultsQuery_nodes_CreateCommand_status_CommandStatusWaiting
-  | CommandResultsQuery_nodes_CreateCommand_status_CommandStatusError;
+export type CommandResultsQuery_nodes_CreateCommand_status = CommandResultsQuery_nodes_CreateCommand_status_CommandStatusWaiting | CommandResultsQuery_nodes_CreateCommand_status_CommandStatusError;
 
 export interface CommandResultsQuery_nodes_CreateCommand {
   __typename: "CreateCommand" | "ExerciseCommand";
@@ -110,9 +90,7 @@ export interface CommandResultsQuery_nodes_CreateCommand {
   status: CommandResultsQuery_nodes_CreateCommand_status;
 }
 
-export type CommandResultsQuery_nodes =
-  | CommandResultsQuery_nodes_Contract
-  | CommandResultsQuery_nodes_CreateCommand;
+export type CommandResultsQuery_nodes = CommandResultsQuery_nodes_Contract | CommandResultsQuery_nodes_CreateCommand;
 
 export interface CommandResultsQuery {
   nodes: CommandResultsQuery_nodes[];
@@ -127,6 +105,23 @@ export interface CommandResultsQueryVariables {
 // @generated
 // This file was automatically generated and should not be edited.
 
+// ====================================================
+// GraphQL query operation: ParameterFormPartyQuery
+// ====================================================
+
+export interface ParameterFormPartyQuery {
+  parties: OpaqueTypes.Party[];
+}
+
+export interface ParameterFormPartyQueryVariables {
+  filter: string;
+}
+
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
 // ====================================================
 // GraphQL query operation: ParameterFormContractIdQuery
 // ====================================================
@@ -197,14 +192,7 @@ export interface ParameterFormContractIdQueryVariables {
 // ====================================================
 
 export interface ParameterFormTypeQuery_node_Contract {
-  __typename:
-    | "Contract"
-    | "CreateCommand"
-    | "CreatedEvent"
-    | "ExerciseCommand"
-    | "ExercisedEvent"
-    | "Template"
-    | "Transaction";
+  __typename: "Contract" | "CreateCommand" | "CreatedEvent" | "ExerciseCommand" | "ExercisedEvent" | "Template" | "Transaction";
 }
 
 export interface ParameterFormTypeQuery_node_DamlLfDefDataType {
@@ -213,9 +201,7 @@ export interface ParameterFormTypeQuery_node_DamlLfDefDataType {
   typeVars: string[];
 }
 
-export type ParameterFormTypeQuery_node =
-  | ParameterFormTypeQuery_node_Contract
-  | ParameterFormTypeQuery_node_DamlLfDefDataType;
+export type ParameterFormTypeQuery_node = ParameterFormTypeQuery_node_Contract | ParameterFormTypeQuery_node_DamlLfDefDataType;
 
 export interface ParameterFormTypeQuery {
   node: ParameterFormTypeQuery_node | null;

navigator/frontend/src/ui-core/src/api/README.md

@@ -8,7 +8,7 @@ This file contains autogenerated type definitions for all queries found in this
 The type definitions describe precisely the type of values returned by each GraphQL query,
 i.e., they only contain properties that are actually queried.
 
-To update this file, run `make update-graphq-types` and manually edit the header.
+To update this file, run `make update-graphql-types` and manually edit the header.
 
 ## DamlLfType, DamlLfValue, OpaqueTypes
 
@@ -16,7 +16,7 @@ All other files contain hand-written definitions of opaque types used in the Gra
 
 ## fragmentTypes.json
 
-Contains informations about GraphQL interfaces, required for matching on interfaces or unions.
+Contains information about GraphQL interfaces, required for matching on interfaces or unions.
 See https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher.
 
 Update using the following code (should eventually be updated as part of the build process)