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

@@ -1,9 +1,13 @@
 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';
@@ -17,56 +21,76 @@
   caProxy,
   proxyId,
   caProxyId,
   env,
   status,
-}) => (
-  <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>
-);
+}) => {
+  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>
+  );
+};
 
 DescriptionCard.propTypes = {
   caProxy: PropTypes.string,
   caProxyId: PropTypes.number,
   env: PropTypes.string,