Added interface id prefix without package id to choices popup (digita…

…l-asset#14941) * added interface id prefix without package id to choices popup CHANGELOG_BEGIN CHANGELOG_END * strong prefix * format
kgeonw · Sep 6, 2022 · dbebbea · dbebbea
1 parent fbe3d94
commit dbebbea
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/navigator/frontend/src/applets/contract/ContractComponent.tsx b/navigator/frontend/src/applets/contract/ContractComponent.tsx
@@ -13,6 +13,7 @@ import { DamlLfValue } from "@da/ui-core/lib/api/DamlLfValue";
 import {
   shortenContractId,
   shortenPartyId,
+  removePkgIdFromContractTypeId,
 } from "@da/ui-core/lib/api/IdentifierShortening";
 import * as React from "react";
 import Link, { OwnProps } from "../../components/Link";
@@ -123,11 +124,6 @@ interface Props {
 }
 
 export default (props: Props): JSX.Element => {
-  const toInterfaceModuleAndEntity = (interfaceId: string): string => {
-    const matches = interfaceId.match(/^([^:@]+):([^:@]+)@([^:@]+)$/);
-    return matches ? `${matches[1]}:${matches[2]}` : interfaceId;
-  };
-
   const { contract, choice, ifc, exercise, choiceLoading, error } = props;
   const choices = contract.template.choices;
   const isArchived = contract.archiveEvent !== null;
@@ -155,7 +151,7 @@ export default (props: Props): JSX.Element => {
 
   const choicesEl = choices.map(({ name, inheritedInterface }) => {
     const interfacePrefix = inheritedInterface
-      ? toInterfaceModuleAndEntity(inheritedInterface) + ":"
+      ? removePkgIdFromContractTypeId(inheritedInterface) + ":"
       : "";
     const fullChoiceName = `${interfacePrefix}${name}`;
     const isAnyActive = choice !== undefined;

diff --git a/navigator/frontend/src/applets/contracts/columns.tsx b/navigator/frontend/src/applets/contracts/columns.tsx
@@ -7,6 +7,8 @@ import Link from "../../components/Link";
 import * as Routes from "../../routes";
 import { Contract } from "./data";
 
+import { removePkgIdFromContractTypeId } from "@da/ui-core/lib/api/IdentifierShortening";
+
 export const columns: ContractColumn<Contract>[] = [
   {
     key: "id",
@@ -54,7 +56,18 @@ export const columns: ContractColumn<Contract>[] = [
               choice: name,
               ifc: inheritedInterface && encodeURIComponent(inheritedInterface),
             }}>
-            <div>{name}</div>
+            <div>
+              {inheritedInterface ? (
+                <>
+                  <strong>
+                    {removePkgIdFromContractTypeId(inheritedInterface) + ":"}
+                  </strong>{" "}
+                  {name}{" "}
+                </>
+              ) : (
+                name
+              )}
+            </div>
           </Link>
         )}
       />

diff --git a/navigator/frontend/src/ui-core/src/ChoicesButton/index.tsx b/navigator/frontend/src/ui-core/src/ChoicesButton/index.tsx
@@ -22,7 +22,7 @@ export interface Contract {
 }
 
 const List = styled.ul`
-  width: 160px;
+  min-width: 160px;
   list-style: none;
   padding: 15px;
   margin: 0;
@@ -59,7 +59,7 @@ const Content = ({ contract, choices, renderLink }: ContentProps) => {
     return (
       <List>
         {contract.template.choices.map(choice => (
-          <ListItem key={choice.name}>
+          <ListItem key={choice.inheritedInterface + choice.name}>
             <Truncate>
               {renderLink(contract.id, choice.name, choice.inheritedInterface)}
             </Truncate>

diff --git a/navigator/frontend/src/ui-core/src/ParameterForm/ContractIdInput.tsx b/navigator/frontend/src/ui-core/src/ParameterForm/ContractIdInput.tsx
@@ -7,7 +7,7 @@ import { DamlLfValue } from "../api/DamlLfValue";
 import * as DamlLfValueF from "../api/DamlLfValue";
 import {
   shortenContractId,
-  shortenTemplateId,
+  shortenContractTypeId,
 } from "../api/IdentifierShortening";
 import Autosuggest from "../Autosuggest";
 import styled from "../theme";
@@ -28,7 +28,7 @@ function renderSuggestion(c: ParameterFormContract): JSX.Element {
   return (
     <Container>
       <BigColumn>{shortenContractId(c.id)}</BigColumn>
-      <BigColumn>{shortenTemplateId(c.template.id)}</BigColumn>
+      <BigColumn>{shortenContractTypeId(c.template.id)}</BigColumn>
       <BigColumn>{c.createEvent.transaction.effectiveAt}</BigColumn>
     </Container>
   );

diff --git a/navigator/frontend/src/ui-core/src/api/IdentifierShortening.ts b/navigator/frontend/src/ui-core/src/api/IdentifierShortening.ts
@@ -41,4 +41,10 @@ export const shortenContractId = shortenHash;
 //     - just shorten the entire identifier to 12 characters
 export const shortenPartyId = shortenPrefixedId("::");
 
-export const shortenTemplateId = shortenPrefixedId("@");
+export const shortenContractTypeId = shortenPrefixedId("@");
+
+export function removePkgIdFromContractTypeId(id: string): string {
+  const separator = "@";
+  const parts = id.split(separator);
+  return parts.length === 2 ? parts[0] : id;
+}