From 752a20f32ce8cb552f67ec7e76d1eca0421a503b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 15 Nov 2024 10:11:43 +0100
Subject: [PATCH] 1-3124: remove conditionally render, use modal instead

---
 .../feedbackNew/FeedbackComponent.tsx         | 374 ++++++++----------
 1 file changed, 174 insertions(+), 200 deletions(-)

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index 7ac572776167..9c49f2c0bd96 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -279,210 +279,184 @@ export const FeedbackComponent = ({
     };
 
     return (
-        <ConditionallyRender
-            condition={showFeedback}
-            show={
-                <BaseModal open={true}>
-                    <ParentContainer>
-                        <ClickAwayListener onClickAway={() => closeFeedback()}>
-                            <StyledContainer>
-                                <Tooltip title='Close' arrow>
-                                    <StyledCloseButton
-                                        onClick={closeFeedback}
-                                        size='large'
+        <BaseModal open={showFeedback} onClose={closeFeedback} label='Feedback'>
+            <ParentContainer>
+                <ClickAwayListener onClickAway={() => closeFeedback()}>
+                    <StyledContainer>
+                        <Tooltip title='Close' arrow>
+                            <StyledCloseButton
+                                onClick={closeFeedback}
+                                size='large'
+                            >
+                                <CloseIcon />
+                            </StyledCloseButton>
+                        </Tooltip>
+                        <StyledContent>
+                            <StyledTitle>Help us improve Unleash</StyledTitle>
+                            <StyledForm onSubmit={onSubmission}>
+                                <input
+                                    type='hidden'
+                                    name='category'
+                                    value={feedbackData.category}
+                                />
+                                <input
+                                    type='hidden'
+                                    name='userType'
+                                    value={userType}
+                                />
+                                <FormTitle>{feedbackData.title}</FormTitle>
+                                <StyledScoreContainer>
+                                    <StyledScoreInput>
+                                        {[1, 2, 3, 4, 5, 6, 7].map((score) => (
+                                            <StyledScoreValue key={score}>
+                                                <input
+                                                    type='radio'
+                                                    name='difficultyScore'
+                                                    value={score}
+                                                    onChange={onScoreChange}
+                                                />
+                                                <span>{score}</span>
+                                            </StyledScoreValue>
+                                        ))}
+                                    </StyledScoreInput>
+                                    <ScoreHelpContainer>
+                                        <StyledScoreHelp>
+                                            Very difficult
+                                        </StyledScoreHelp>
+                                        <StyledScoreHelp>
+                                            Very easy
+                                        </StyledScoreHelp>
+                                    </ScoreHelpContainer>
+                                </StyledScoreContainer>
+
+                                {feedbackComments !== false &&
+                                feedbackComments.enabled &&
+                                feedbackComments.name === 'withoutComments' ? (
+                                    <>
+                                        <Box>
+                                            <TextField
+                                                placeholder='Your answer here'
+                                                style={{
+                                                    width: '100%',
+                                                }}
+                                                name='positive'
+                                                hidden
+                                                value={feedbackComments.name}
+                                                multiline
+                                                rows={3}
+                                                variant='outlined'
+                                                size='small'
+                                                InputLabelProps={{
+                                                    style: {
+                                                        fontSize:
+                                                            theme.fontSizes
+                                                                .smallBody,
+                                                    },
+                                                }}
+                                            />
+                                        </Box>
+                                        <Box>
+                                            <TextField
+                                                placeholder='Your answer here'
+                                                style={{
+                                                    width: '100%',
+                                                }}
+                                                multiline
+                                                name='areasForImprovement'
+                                                rows={3}
+                                                InputLabelProps={{
+                                                    style: {
+                                                        fontSize:
+                                                            theme.fontSizes
+                                                                .smallBody,
+                                                    },
+                                                }}
+                                                variant='outlined'
+                                                size='small'
+                                                hidden
+                                            />
+                                        </Box>
+                                    </>
+                                ) : (
+                                    <>
+                                        <Box>
+                                            <FormSubTitle>
+                                                {feedbackData.positiveLabel}
+                                            </FormSubTitle>
+                                            <TextField
+                                                placeholder='Your answer here'
+                                                style={{
+                                                    width: '100%',
+                                                }}
+                                                name='positive'
+                                                multiline
+                                                rows={3}
+                                                variant='outlined'
+                                                size='small'
+                                                InputLabelProps={{
+                                                    style: {
+                                                        fontSize:
+                                                            theme.fontSizes
+                                                                .smallBody,
+                                                    },
+                                                }}
+                                            />
+                                        </Box>
+                                        <Box>
+                                            <FormSubTitle>
+                                                {
+                                                    feedbackData.areasForImprovementsLabel
+                                                }
+                                            </FormSubTitle>
+                                            <TextField
+                                                placeholder='Your answer here'
+                                                style={{
+                                                    width: '100%',
+                                                }}
+                                                multiline
+                                                name='areasForImprovement'
+                                                rows={3}
+                                                InputLabelProps={{
+                                                    style: {
+                                                        fontSize:
+                                                            theme.fontSizes
+                                                                .smallBody,
+                                                    },
+                                                }}
+                                                variant='outlined'
+                                                size='small'
+                                            />
+                                        </Box>
+                                    </>
+                                )}
+
+                                <StyledButtonContainer>
+                                    <StyledButton
+                                        disabled={!selectedScore}
+                                        variant='contained'
+                                        color='primary'
+                                        type='submit'
                                     >
-                                        <CloseIcon />
-                                    </StyledCloseButton>
-                                </Tooltip>
-                                <StyledContent>
-                                    <StyledTitle>
-                                        Help us improve Unleash
-                                    </StyledTitle>
-                                    <StyledForm onSubmit={onSubmission}>
-                                        <input
-                                            type='hidden'
-                                            name='category'
-                                            value={feedbackData.category}
-                                        />
-                                        <input
-                                            type='hidden'
-                                            name='userType'
-                                            value={userType}
-                                        />
-                                        <FormTitle>
-                                            {feedbackData.title}
-                                        </FormTitle>
-                                        <StyledScoreContainer>
-                                            <StyledScoreInput>
-                                                {[1, 2, 3, 4, 5, 6, 7].map(
-                                                    (score) => (
-                                                        <StyledScoreValue
-                                                            key={score}
-                                                        >
-                                                            <input
-                                                                type='radio'
-                                                                name='difficultyScore'
-                                                                value={score}
-                                                                onChange={
-                                                                    onScoreChange
-                                                                }
-                                                            />
-                                                            <span>{score}</span>
-                                                        </StyledScoreValue>
-                                                    ),
-                                                )}
-                                            </StyledScoreInput>
-                                            <ScoreHelpContainer>
-                                                <StyledScoreHelp>
-                                                    Very difficult
-                                                </StyledScoreHelp>
-                                                <StyledScoreHelp>
-                                                    Very easy
-                                                </StyledScoreHelp>
-                                            </ScoreHelpContainer>
-                                        </StyledScoreContainer>
-
-                                        {feedbackComments !== false &&
-                                        feedbackComments.enabled &&
-                                        feedbackComments.name ===
-                                            'withoutComments' ? (
-                                            <>
-                                                <Box>
-                                                    <TextField
-                                                        placeholder='Your answer here'
-                                                        style={{
-                                                            width: '100%',
-                                                        }}
-                                                        name='positive'
-                                                        hidden
-                                                        value={
-                                                            feedbackComments.name
-                                                        }
-                                                        multiline
-                                                        rows={3}
-                                                        variant='outlined'
-                                                        size='small'
-                                                        InputLabelProps={{
-                                                            style: {
-                                                                fontSize:
-                                                                    theme
-                                                                        .fontSizes
-                                                                        .smallBody,
-                                                            },
-                                                        }}
-                                                    />
-                                                </Box>
-                                                <Box>
-                                                    <TextField
-                                                        placeholder='Your answer here'
-                                                        style={{
-                                                            width: '100%',
-                                                        }}
-                                                        multiline
-                                                        name='areasForImprovement'
-                                                        rows={3}
-                                                        InputLabelProps={{
-                                                            style: {
-                                                                fontSize:
-                                                                    theme
-                                                                        .fontSizes
-                                                                        .smallBody,
-                                                            },
-                                                        }}
-                                                        variant='outlined'
-                                                        size='small'
-                                                        hidden
-                                                    />
-                                                </Box>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <Box>
-                                                    <FormSubTitle>
-                                                        {
-                                                            feedbackData.positiveLabel
-                                                        }
-                                                    </FormSubTitle>
-                                                    <TextField
-                                                        placeholder='Your answer here'
-                                                        style={{
-                                                            width: '100%',
-                                                        }}
-                                                        name='positive'
-                                                        multiline
-                                                        rows={3}
-                                                        variant='outlined'
-                                                        size='small'
-                                                        InputLabelProps={{
-                                                            style: {
-                                                                fontSize:
-                                                                    theme
-                                                                        .fontSizes
-                                                                        .smallBody,
-                                                            },
-                                                        }}
-                                                    />
-                                                </Box>
-                                                <Box>
-                                                    <FormSubTitle>
-                                                        {
-                                                            feedbackData.areasForImprovementsLabel
-                                                        }
-                                                    </FormSubTitle>
-                                                    <TextField
-                                                        placeholder='Your answer here'
-                                                        style={{
-                                                            width: '100%',
-                                                        }}
-                                                        multiline
-                                                        name='areasForImprovement'
-                                                        rows={3}
-                                                        InputLabelProps={{
-                                                            style: {
-                                                                fontSize:
-                                                                    theme
-                                                                        .fontSizes
-                                                                        .smallBody,
-                                                            },
-                                                        }}
-                                                        variant='outlined'
-                                                        size='small'
-                                                    />
-                                                </Box>
-                                            </>
-                                        )}
-
-                                        <StyledButtonContainer>
+                                        Send Feedback
+                                    </StyledButton>
+                                    <ConditionallyRender
+                                        condition={feedbackMode === 'manual'}
+                                        show={
                                             <StyledButton
-                                                disabled={!selectedScore}
-                                                variant='contained'
+                                                variant='outlined'
                                                 color='primary'
-                                                type='submit'
+                                                onClick={dontAskAgain}
                                             >
-                                                Send Feedback
+                                                Don't ask me again
                                             </StyledButton>
-                                            <ConditionallyRender
-                                                condition={
-                                                    feedbackMode === 'manual'
-                                                }
-                                                show={
-                                                    <StyledButton
-                                                        variant='outlined'
-                                                        color='primary'
-                                                        onClick={dontAskAgain}
-                                                    >
-                                                        Don't ask me again
-                                                    </StyledButton>
-                                                }
-                                            />
-                                        </StyledButtonContainer>
-                                    </StyledForm>
-                                </StyledContent>
-                            </StyledContainer>
-                        </ClickAwayListener>
-                    </ParentContainer>
-                </BaseModal>
-            }
-        />
+                                        }
+                                    />
+                                </StyledButtonContainer>
+                            </StyledForm>
+                        </StyledContent>
+                    </StyledContainer>
+                </ClickAwayListener>
+            </ParentContainer>
+        </BaseModal>
     );
 };