Merge pull request #10640 from nixocio/ui_issue_10095

Add edit icon to SurveyListItem

Add edit icon to SurveyListItem

closes: #10095

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Sarah Akus <sakus@redhat.com>

awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx

@@ -1,7 +1,6 @@
 import 'styled-components/macro';
 import React from 'react';
 import { t } from '@lingui/macro';
-
 import { Link } from 'react-router-dom';
 import {
   Button as _Button,
@@ -14,8 +13,13 @@ import {
   DataListItem,
   Stack,
   StackItem,
+  Tooltip,
 } from '@patternfly/react-core';
-import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  PencilAltIcon,
+} from '@patternfly/react-icons';
 import styled from 'styled-components';
 import ChipGroup from '../../../components/ChipGroup';
 
@@ -27,11 +31,13 @@ const DataListAction = styled(_DataListAction)`
     padding-bottom: 0;
   }
 `;
+
 const Button = styled(_Button)`
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 0;
 `;
+
 const Required = styled.span`
   color: var(--pf-global--danger-color--100);
   margin-left: var(--pf-global--spacer--xs);
@@ -41,10 +47,13 @@ const Label = styled.b`
   margin-right: 20px;
 `;
 
+const EditSection = styled(_DataListAction)``;
+
+const EditButton = styled(_Button)``;
+
 function SurveyListItem({
   canEdit,
   question,
-
   isLast,
   isFirst,
   isChecked,
@@ -116,7 +125,6 @@ function SurveyListItem({
                 )}
               </>
             </DataListCell>,
-
             <DataListCell key="type">
               <Label>{t`Type`}</Label>
               {question.type}
@@ -146,9 +154,27 @@ function SurveyListItem({
             </DataListCell>,
           ]}
         />
+        <EditSection aria-label={t`actions`}>
+          {canEdit && (
+            <EditButton variant="plain">
+              <Tooltip content={t`Edit Survey`} position="top">
+                <EditButton
+                  ouiaId={`edit-survey-${question.variable}`}
+                  aria-label={t`edit survey`}
+                  variant="plain"
+                  component={Link}
+                  to={`survey/edit?question_variable=${encodeURIComponent(
+                    question.variable
+                  )}`}
+                >
+                  <PencilAltIcon />
+                </EditButton>
+              </Tooltip>
+            </EditButton>
+          )}
+        </EditSection>
       </DataListItemRow>
     </DataListItem>
   );
 }
-
 export default SurveyListItem;

awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx

@@ -4,7 +4,13 @@ import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import SurveyListItem from './SurveyListItem';
 
 describe('<SurveyListItem />', () => {
-  const item = { question_name: 'Foo', default: 'Bar', type: 'text', id: 1 };
+  const item = {
+    question_name: 'Foo',
+    variable: 'buzz',
+    default: 'Bar',
+    type: 'text',
+    id: 1,
+  };
   test('renders successfully', () => {
     let wrapper;
     act(() => {
@@ -122,13 +128,7 @@ describe('<SurveyListItem />', () => {
     let wrapper;
     act(() => {
       wrapper = mountWithContexts(
-        <SurveyListItem
+        <SurveyListItem canEdit={false} question={item} isChecked={false} />
-          question={item}
-          canAddAndDelete={false}
-          isChecked={false}
-          isFirst
-          isLast
-        />
       );
     });
     expect(wrapper.find('button[aria-label="move up"]').prop('disabled')).toBe(
@@ -137,5 +137,19 @@ describe('<SurveyListItem />', () => {
     expect(
       wrapper.find('button[aria-label="move down"]').prop('disabled')
     ).toBe(true);
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+
+  test('edit button shown to users with edit capabilities', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem canEdit question={item} isChecked={false} />
+      );
+    });
+    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
+    expect(wrapper.find('Button[ouiaId="edit-survey-buzz"]').prop('to')).toBe(
+      'survey/edit?question_variable=buzz'
+    );
   });
 });