remove dialog box changes

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

.changeset/perfect-shoes-arrive.md

@@ -5,21 +5,7 @@
 
 <!-- @backstage/plugin-entity-feedback -->
 
-Add in logic to link the feedback comment box to specific feedback responses
-const requireComments = (
-<Grid container spacing={3} alignItems="stretch">
-...
-<LikeDislikeButtons
-
-- feedbackDialogResponses = {[
-- { id: 'incorrect', label: 'Incorrect info' },
-- { id: 'missing', label: 'Missing info', `mustComment`: true },
-- { id: 'other', label: 'Other (please specify below)', `mustComment`: true },
-- ]}
-- />
-  ...
-  </Grid>
-  );
+Remove empty Chip in `FeedbackResponseTable.tsx` when there is no response
 
 <!-- @backstage/plugin-entity-feedback-backend -->
 

plugins/entity-feedback/README.md

@@ -90,24 +90,6 @@ const overviewContent = (
   </Grid>
 );
 
-// Link the feedback comment box to specific feedback responses
-const overviewContent = (
-  <Grid container spacing={3} alignItems="stretch">
-    ...
-+   <Grid item md={2}>
-+     <InfoCard title="Rate this entity">
-+       <LikeDislikeButtons
-+         feedbackDialogResponses = {[
-+          { id: 'incorrect', label: 'Incorrect info' },
-+          { id: 'missing', label: 'Missing info', mustComment: true },
-+          { id: 'other', label: 'Other (please specify below)', mustComment: true },
-+         ]}
-+       />
-+     </InfoCard>
-+   </Grid>
-    ...
-  </Grid>
-);
 ...
 
 // Add to each applicable kind/type of entity as desired

plugins/entity-feedback/api-report.md

@@ -79,8 +79,6 @@ export interface EntityFeedbackResponse {
   id: string;
   // (undocumented)
   label: string;
-  // (undocumented)
-  mustComment?: boolean;
 }
 
 // @public (undocumented)

plugins/entity-feedback/src/components/FeedbackResponseDialog/FeedbackResponseDialog.test.tsx

@@ -115,22 +115,4 @@ describe('FeedbackResponseDialog', () => {
       );
     });
   });
-
-  it('will not submit "other" without comments', async () => {
-    const rendered = await render();
-
-    await userEvent.click(
-      rendered.getByRole('checkbox', { name: 'Incorrect info' }),
-    );
-    await userEvent.click(
-      rendered.getByRole('checkbox', { name: 'Other (please specify below)' }),
-    );
-    await userEvent.click(
-      rendered.getByTestId('feedback-response-dialog-submit-button'),
-    );
-
-    await waitFor(() => {
-      expect(feedbackApi.recordResponse).toHaveBeenCalledTimes(0);
-    });
-  });
 });

plugins/entity-feedback/src/components/FeedbackResponseDialog/FeedbackResponseDialog.tsx

@@ -16,12 +16,7 @@
 
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { Progress } from '@backstage/core-components';
-import {
-  ErrorApiError,
-  errorApiRef,
-  useApi,
-  alertApiRef,
-} from '@backstage/core-plugin-api';
+import { ErrorApiError, errorApiRef, useApi } from '@backstage/core-plugin-api';
 import {
   Button,
   Checkbox,
@@ -50,13 +45,12 @@ import { entityFeedbackApiRef } from '../../api';
 export interface EntityFeedbackResponse {
   id: string;
   label: string;
-  mustComment?: boolean;
 }
 
 const defaultFeedbackResponses: EntityFeedbackResponse[] = [
   { id: 'incorrect', label: 'Incorrect info' },
   { id: 'missing', label: 'Missing info' },
-  { id: 'other', label: 'Other (please specify below)', mustComment: true },
+  { id: 'other', label: 'Other (please specify below)' },
 ];
 
 /**
@@ -87,41 +81,13 @@ export const FeedbackResponseDialog = (props: FeedbackResponseDialogProps) => {
   const classes = useStyles();
   const errorApi = useApi(errorApiRef);
   const feedbackApi = useApi(entityFeedbackApiRef);
-  const alertApi = useApi(alertApiRef);
   const [responseSelections, setResponseSelections] = useState(
     Object.fromEntries(feedbackDialogResponses.map(r => [r.id, false])),
   );
   const [comments, setComments] = useState('');
   const [consent, setConsent] = useState(true);
-  const requireComments = feedbackDialogResponses
-    .filter(r => r.mustComment)
-    .map(r => r.id);
-
-  const isLinkedBoxChecked = () => {
-    const checkedBoxes = Object.keys(responseSelections).filter(
-      id => responseSelections[id],
-    );
-    return checkedBoxes.some(id => requireComments.includes(id));
-  };
 
   const [{ loading: saving }, saveResponse] = useAsyncFn(async () => {
-    if (requireComments.length > 0) {
-      if (comments.length === 0 && isLinkedBoxChecked()) {
-        alertApi.post({
-          message:
-            'The selected option(s) require a comment. Please provide a comment.',
-          severity: 'info',
-        });
-        return;
-      }
-      if (comments.length > 0 && !isLinkedBoxChecked()) {
-        alertApi.post({
-          message: 'Please select the option(s) that require a comment.',
-          severity: 'info',
-        });
-        return;
-      }
-    }
     try {
       await feedbackApi.recordResponse(stringifyEntityRef(entity), {
         comments,
@@ -136,22 +102,6 @@ export const FeedbackResponseDialog = (props: FeedbackResponseDialogProps) => {
     }
   }, [comments, consent, entity, feedbackApi, onClose, responseSelections]);
 
-  const selectLinkedBox = (res: boolean) => {
-    const newResponseSelections = { ...responseSelections };
-    requireComments.forEach(id => newResponseSelections[id] === res);
-    setResponseSelections(newResponseSelections);
-  };
-
-  const verifyComments = (e: any) => {
-    setComments(e.target.value);
-    if (requireComments.length > 0) {
-      selectLinkedBox(true);
-      if (e.target.value.length === 0) {
-        selectLinkedBox(false);
-      }
-    }
-  };
-
   return (
     <Dialog open={open} onClose={() => !saving && onClose()}>
       {saving && <Progress />}
@@ -188,7 +138,7 @@ export const FeedbackResponseDialog = (props: FeedbackResponseDialogProps) => {
             label="Additional comments"
             multiline
             minRows={2}
-            onChange={e => verifyComments(e)}
+            onChange={e => setComments(e.target.value)}
             variant="outlined"
             value={comments}
           />

plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx

@@ -80,12 +80,10 @@ export const FeedbackResponseTable = (props: FeedbackResponseTableProps) => {
       width: '35%',
       render: (response: ResponseRow) => (
         <>
-          {response.response?.length !== undefined &&
-          response.response?.length > 0
-            ? response.response
-                ?.split(',')
-                .map(res => <Chip key={res} size="small" label={res} />)
-            : ''}
+          {response.response?.length &&
+            response.response
+              ?.split(',')
+              .map(res => <Chip key={res} size="small" label={res} />)}
         </>
       ),
     },