Refactor job template detail into functional component

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { Fragment, useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import {
   Button,
@@ -13,10 +13,10 @@ import { t } from '@lingui/macro';
 
 import { CardBody, CardActionsRow } from '@components/Card';
 import ContentError from '@components/ContentError';
-import LaunchButton from '@components/LaunchButton';
 import ContentLoading from '@components/ContentLoading';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import LaunchButton from '@components/LaunchButton';
 import { JobTemplatesAPI } from '@api';
 
 const MissingDetail = styled(Detail)`
@@ -25,38 +25,8 @@ const MissingDetail = styled(Detail)`
   }
 `;
 
-class JobTemplateDetail extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      contentError: null,
-      hasContentLoading: true,
-      instanceGroups: [],
-    };
-    this.readInstanceGroups = this.readInstanceGroups.bind(this);
-  }
-
-  componentDidMount() {
-    this.readInstanceGroups();
-  }
-
-  async readInstanceGroups() {
-    const { match } = this.props;
-    try {
-      const { data } = await JobTemplatesAPI.readInstanceGroups(
-        match.params.id
-      );
-      this.setState({ instanceGroups: [...data.results] });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
+function JobTemplateDetail({ i18n, template }) {
   const {
-      template: {
     ask_inventory_on_launch,
     allow_simultaneous,
     become_enabled,
@@ -78,14 +48,31 @@ class JobTemplateDetail extends Component {
     use_fact_cache,
     url,
     verbosity,
-      },
-      hasTemplateLoading,
-      template,
-      i18n,
-      match,
-    } = this.props;
-    const canLaunch = summary_fields.user_capabilities.start;
-    const { instanceGroups, hasContentLoading, contentError } = this.state;
+  } = template;
+  const [contentError, setContentError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(false);
+  const [instanceGroups, setInstanceGroups] = useState([]);
+  const { id: templateId } = useParams();
+
+  useEffect(() => {
+    (async () => {
+      setContentError(null);
+      setHasContentLoading(true);
+      try {
+        const {
+          data: { results = [] },
+        } = await JobTemplatesAPI.readInstanceGroups(templateId);
+        setInstanceGroups(results);
+      } catch (error) {
+        setContentError(error);
+      } finally {
+        setHasContentLoading(false);
+      }
+    })();
+  }, [templateId]);
+
+  const canLaunch =
+    summary_fields.user_capabilities && summary_fields.user_capabilities.start;
   const verbosityOptions = [
     { verbosity: 0, details: i18n._(t`0 (Normal)`) },
     { verbosity: 1, details: i18n._(t`1 (Verbose)`) },
@@ -98,8 +85,6 @@ class JobTemplateDetail extends Component {
     option => option.verbosity === verbosity
   );
   const generateCallBackUrl = `${window.location.origin + url}callback/`;
-    const isInitialized = !hasTemplateLoading && !hasContentLoading;
-
   const renderOptionsField =
     become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
 
@@ -133,8 +118,7 @@ class JobTemplateDetail extends Component {
   );
 
   const inventoryValue = (kind, id) => {
-      const inventorykind =
-        kind === 'smart' ? (kind = 'smart_inventory') : (kind = 'inventory');
+    const inventorykind = kind === 'smart' ? 'smart_inventory' : 'inventory';
 
     return ask_inventory_on_launch ? (
       <Fragment>
@@ -159,17 +143,11 @@ class JobTemplateDetail extends Component {
   }
 
   return (
-      isInitialized && (
     <CardBody>
       <DetailList gutter="sm">
-            <Detail
-              label={i18n._(t`Name`)}
-              value={name}
-              dataCy="jt-detail-name"
-            />
+        <Detail label={i18n._(t`Name`)} value={name} dataCy="jt-detail-name" />
         <Detail label={i18n._(t`Description`)} value={description} />
         <Detail label={i18n._(t`Job Type`)} value={job_type} />
-
         {summary_fields.inventory ? (
           <Detail
             label={i18n._(t`Inventory`)}
@@ -187,9 +165,7 @@ class JobTemplateDetail extends Component {
             label={i18n._(t`Project`)}
             value={
               <Link to={`/projects/${summary_fields.project.id}/details`}>
-                    {summary_fields.project
-                      ? summary_fields.project.name
-                      : i18n._(t`Deleted`)}
+                {summary_fields.project.name}
               </Link>
             }
           />
@@ -235,8 +211,7 @@ class JobTemplateDetail extends Component {
         {renderOptionsField && (
           <Detail label={i18n._(t`Options`)} value={renderOptions} />
         )}
-            {summary_fields.credentials &&
-              summary_fields.credentials.length > 0 && (
+        {summary_fields.credentials && summary_fields.credentials.length > 0 && (
           <Detail
             fullWidth
             label={i18n._(t`Credentials`)}
@@ -311,10 +286,11 @@ class JobTemplateDetail extends Component {
         )}
       </DetailList>
       <CardActionsRow>
-            {summary_fields.user_capabilities.edit && (
+        {summary_fields.user_capabilities &&
+          summary_fields.user_capabilities.edit && (
             <Button
               component={Link}
-                to={`/templates/job_template/${match.params.id}/edit`}
+              to={`/templates/job_template/${templateId}/edit`}
               aria-label={i18n._(t`Edit`)}
             >
               {i18n._(t`Edit`)}
@@ -323,11 +299,7 @@ class JobTemplateDetail extends Component {
         {canLaunch && (
           <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
             {({ handleLaunch }) => (
-                  <Button
-                    variant="secondary"
-                    type="submit"
-                    onClick={handleLaunch}
-                  >
+              <Button variant="secondary" type="submit" onClick={handleLaunch}>
                 {i18n._(t`Launch`)}
               </Button>
             )}
@@ -335,9 +307,8 @@ class JobTemplateDetail extends Component {
         )}
       </CardActionsRow>
     </CardBody>
-      )
   );
 }
-}
+
 export { JobTemplateDetail as _JobTemplateDetail };
-export default withI18n()(withRouter(JobTemplateDetail));
+export default withI18n()(JobTemplateDetail);