From 3a776ccbff37bd33d0166abba7f17b20bfcb5db0 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 23 Sep 2021 08:46:18 -0400
Subject: [PATCH] Update empty survey list

Update empty survey list to be as the remaining lists.

See: https://github.com/ansible/awx/issues/10942
---
 .../src/screens/Template/Survey/SurveyList.js | 43 +++++++------------
 .../screens/Template/Survey/SurveyToolbar.js  | 25 ++++++-----
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/awx/ui/src/screens/Template/Survey/SurveyList.js b/awx/ui/src/screens/Template/Survey/SurveyList.js
index 924ea2e8ec..7be6ae6277 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyList.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyList.js
@@ -1,19 +1,11 @@
 import React, { useState } from 'react';
 
 import { t } from '@lingui/macro';
-import { useRouteMatch } from 'react-router-dom';
-import {
-  Button,
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-} from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody } from '@patternfly/react-table';
-import { CubesIcon } from '@patternfly/react-icons';
-import ContentLoading from 'components/ContentLoading';
 import AlertModal from 'components/AlertModal';
-import { ToolbarAddButton } from 'components/PaginatedTable';
+import ContentEmpty from 'components/ContentEmpty';
+import ContentLoading from 'components/ContentLoading';
 
 import useSelected from 'hooks/useSelected';
 import SurveyListItem from './SurveyListItem';
@@ -29,8 +21,6 @@ function SurveyList({
   deleteSurvey,
   canEdit,
 }) {
-  const match = useRouteMatch();
-
   const questions = survey?.spec || [];
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isOrderModalOpen, setIsOrderModalOpen] = useState(false);
@@ -109,10 +99,10 @@ function SurveyList({
           <Thead>
             <Tr>
               <Th />
-              <Th datalabel={t`Name`}>{t`Name`}</Th>
-              <Th datalabel={t`Type`}>{t`Type`}</Th>
-              <Th datalabel={t`Default`}>{t`Default`}</Th>
-              <Th datalabel={t`Actions`}>{t`Actions`}</Th>
+              <Th dataLabel={t`Name`}>{t`Name`}</Th>
+              <Th dataLabel={t`Type`}>{t`Type`}</Th>
+              <Th dataLabel={t`Default`}>{t`Default`}</Th>
+              <Th dataLabel={t`Actions`}>{t`Actions`}</Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -148,16 +138,14 @@ function SurveyList({
     );
   }
 
-  if ((!questions || questions?.length <= 0) && !isLoading) {
-    return (
-      <EmptyState variant="full">
-        <EmptyStateIcon icon={CubesIcon} />
-        <Title size="lg" headingLevel="h3">
-          {t`No survey questions found.`}
-        </Title>
-        <EmptyStateBody>{t`Please add survey questions.`}</EmptyStateBody>
-        <ToolbarAddButton isDisabled={!canEdit} linkTo={`${match.url}/add`} />
-      </EmptyState>
+  const emptyList = !questions || questions?.length <= 0;
+
+  if (emptyList && !isLoading) {
+    content = (
+      <ContentEmpty
+        message={t`Please add survey questions.`}
+        title={t`No survey questions found.`}
+      />
     );
   }
   return (
@@ -175,6 +163,7 @@ function SurveyList({
         onToggleSurvey={toggleSurvey}
         isDeleteDisabled={selected?.length === 0}
         canEdit={canEdit}
+        emptyList={emptyList}
         onToggleDeleteModal={() => setIsDeleteModalOpen(true)}
       />
       {content}
diff --git a/awx/ui/src/screens/Template/Survey/SurveyToolbar.js b/awx/ui/src/screens/Template/Survey/SurveyToolbar.js
index 5d4860e768..d2ba2a91d1 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyToolbar.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyToolbar.js
@@ -32,6 +32,7 @@ function SurveyToolbar({
   isDeleteDisabled,
   onToggleDeleteModal,
   onOpenOrderModal,
+  emptyList,
 }) {
   isDeleteDisabled = !canEdit || isDeleteDisabled;
   const match = useRouteMatch();
@@ -94,17 +95,19 @@ function SurveyToolbar({
             </Tooltip>
           </ToolbarItem>
         </ToolbarGroup>
-        <SwitchWrapper>
-          <Switch
-            aria-label={t`Survey Toggle`}
-            id="survey-toggle"
-            label={t`Survey Enabled`}
-            labelOff={t`Survey Disabled`}
-            isChecked={surveyEnabled}
-            isDisabled={!canEdit}
-            onChange={() => onToggleSurvey(!surveyEnabled)}
-          />
-        </SwitchWrapper>
+        {!emptyList && (
+          <SwitchWrapper>
+            <Switch
+              aria-label={t`Survey Toggle`}
+              id="survey-toggle"
+              label={t`Survey Enabled`}
+              labelOff={t`Survey Disabled`}
+              isChecked={surveyEnabled}
+              isDisabled={!canEdit}
+              onChange={() => onToggleSurvey(!surveyEnabled)}
+            />
+          </SwitchWrapper>
+        )}
       </ToolbarContent>
     </Toolbar>
   );