webpack/src/Extends/Host/PuppetTab/SubTabs/Reports/components/DescriptionCard.js in foreman_puppet-4.1.1 vs webpack/src/Extends/Host/PuppetTab/SubTabs/Reports/components/DescriptionCard.js in foreman_puppet-5.0.0

@@ -1,13 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
 import {
-  Card,
-  CardBody,
-  CardHeader,
-  CardTitle,
-  CardExpandableContent,
   DescriptionList,
   DescriptionListTerm,
   DescriptionListGroup,
   DescriptionListDescription,
 } from '@patternfly/react-core';
@@ -21,76 +17,56 @@
   caProxy,
   proxyId,
   caProxyId,
   env,
   status,
-}) => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  return (
-    <Card isExpanded={isExpanded} ouiaId="card-template">
-      <CardHeader onExpand={() => setIsExpanded(v => !v)}>
-        <CardTitle id="expandable-card-title">{__('Puppet details')}</CardTitle>
-      </CardHeader>
-      <CardExpandableContent>
-        <CardBody>
-          <DescriptionList isCompact>
-            <DescriptionListGroup>
-              <DescriptionListTerm>
-                {__('Puppet environment')}
-              </DescriptionListTerm>
-              <DescriptionListDescription>
-                <SkeletonLoader
-                  emptyState={<DefaultLoaderEmptyState />}
-                  status={status}
-                >
-                  {env && (
-                    <a
-                      href={`/foreman_puppet/environments/?search=name+%3D+${env}`}
-                    >
-                      {env}
-                    </a>
-                  )}
-                </SkeletonLoader>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>
-                {__('Puppet Smart Proxy')}
-              </DescriptionListTerm>
-              <DescriptionListDescription>
-                <SkeletonLoader
-                  emptyState={<DefaultLoaderEmptyState />}
-                  status={status}
-                >
-                  {proxyName && (
-                    <a href={`/smart_proxies/${proxyId}#puppet`}>{proxyName}</a>
-                  )}
-                </SkeletonLoader>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>
-                {__('Puppet CA Smart Proxy')}
-              </DescriptionListTerm>
-              <DescriptionListDescription>
-                <SkeletonLoader
-                  emptyState={<DefaultLoaderEmptyState />}
-                  status={status}
-                >
-                  {caProxy && (
-                    <a href={`/smart_proxies/${caProxyId}#puppet-ca`}>
-                      {caProxy}
-                    </a>
-                  )}
-                </SkeletonLoader>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-          </DescriptionList>
-        </CardBody>
-      </CardExpandableContent>
-    </Card>
-  );
-};
+}) => (
+  <CardTemplate header={__('Puppet details')} expandable>
+    <DescriptionList isCompact>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Puppet environment')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          <SkeletonLoader
+            emptyState={<DefaultLoaderEmptyState />}
+            status={status}
+          >
+            {env && (
+              <a href={`/foreman_puppet/environments/?search=name+%3D+${env}`}>
+                {env}
+              </a>
+            )}
+          </SkeletonLoader>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Puppet Smart Proxy')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          <SkeletonLoader
+            emptyState={<DefaultLoaderEmptyState />}
+            status={status}
+          >
+            {proxyName && (
+              <a href={`/smart_proxies/${proxyId}#puppet`}>{proxyName}</a>
+            )}
+          </SkeletonLoader>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Puppet CA Smart Proxy')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          <SkeletonLoader
+            emptyState={<DefaultLoaderEmptyState />}
+            status={status}
+          >
+            {caProxy && (
+              <a href={`/smart_proxies/${caProxyId}#puppet-ca`}>{caProxy}</a>
+            )}
+          </SkeletonLoader>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  </CardTemplate>
+);
 
 DescriptionCard.propTypes = {
   caProxy: PropTypes.string,
   caProxyId: PropTypes.number,
   env: PropTypes.string,