fix(app/environment): console errors related to usage of React components [EE-3760] (#7310)

app/portainer/views/endpoints/edit/endpoint.html

@@ -1,4 +1,4 @@
-<page-header title="'Environment details'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, endpoint.Name]" reload="true"> </page-header>
+<page-header ng-if="endpoint" title="'Environment details'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, endpoint.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div ng-if="state.edgeEndpoint">
@@ -224,7 +224,7 @@
           <!-- !open-amt info -->
           <!-- gpus info -->
           <div class="col-sm-12 form-section-title">Hardware acceleration</div>
-          <gpus-list value="endpoint.Gpus || []" on-change="(onGpusChange)"></gpus-list>
+          <gpus-list ng-if="endpoint && endpoint.Gpus" value="endpoint.Gpus" on-change="(onGpusChange)"></gpus-list>
           <!-- gpus info -->
           <div class="form-group">
             <div class="col-sm-12">

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx

@@ -27,6 +27,10 @@ export function Breadcrumbs({ breadcrumbs }: Props) {
 }
 
 function renderCrumb(crumb: Crumb | string) {
+  if (!crumb) {
+    return '';
+  }
+
   if (typeof crumb === 'string') {
     return crumb;
   }