check for label and sublabel

apps/remix-ide-e2e/src/tests/pinned_contracts.test.ts

@@ -10,6 +10,8 @@ module.exports = {
   'Should show text in pinned contracts section #group1': function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('udapp')
+      .assert.elementPresent('*[data-id="pinnedContracts"]')
+      .assert.textContains('*[data-id="pinnedContractsSublabel"]', '(VM: vm-cancun)')
       .assert.elementPresent('*[data-id="NoPinnedInstanceText"]')
       .assert.textContains('*[data-id="NoPinnedInstanceText"]', 'No pinned contracts found for selected workspace & network')
   },

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -70,7 +70,7 @@
   "udapp.deployAndRunNoInstanceText": "Currently you have no unpinned contracts to interact with.",
   "udapp.tooltipText6": "Autogenerated generic user interfaces for interaction with deployed/unpinned contracts",
 
-  "udapp.savedContracts": "Pinned Contracts",
+  "udapp.pinnedContracts": "Pinned Contracts",
   "udapp.tooltipTextPinnedContracts": "List of pinned contracts for selected workspace & network",
   "udapp.NoPinnedInstanceText": "No pinned contracts found for selected workspace & network",
   "udapp.tooltipTextDelete": "Delete immediately",

libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

@@ -63,9 +63,9 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
       <div className="d-flex justify-content-between align-items-center pl-2">
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunPinnedContractsTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextPinnedContracts" />}>
-          <label className="udapp_deployedContracts">
-            <FormattedMessage id="udapp.savedContracts" /> 
-            <span style={{fontSize: '0.75rem'}}> { props.plugin.REACT_API.networkName === 'VM' ? `(VM: ${props.plugin.REACT_API.selectExEnv})` : `(chain id: ${chainId.current})` }</span>
+          <label className="udapp_deployedContracts" data-id="pinnedContracts">
+            <FormattedMessage id="udapp.pinnedContracts" /> 
+            <span style={{fontSize: '0.75rem'}} data-id="pinnedContractsSublabel"> { props.plugin.REACT_API.networkName === 'VM' ? `(VM: ${props.plugin.REACT_API.selectExEnv})` : `(chain id: ${chainId.current})` }</span>
           </label>
         </CustomTooltip>
       </div>
@@ -103,7 +103,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
 
       <div className="d-flex justify-content-between align-items-center pl-2 mb-2 mt-2">
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunClearInstancesTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText6" />}>
-          <label className="udapp_deployedContracts">
+          <label className="udapp_deployedContracts" data-id="unpinnedContracts">
             <FormattedMessage id="udapp.deployedContracts" />
           </label>
         </CustomTooltip>