From eaffffe0d0313eaadbf25980ea42afeb1e753ffd Mon Sep 17 00:00:00 2001
From: Artem Zaiko <102226752+azaiko-akveo@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:13:57 +0300
Subject: [PATCH] feat: update change request layout (#2848)

---
 frontend/web/components/Tooltip.tsx           |  17 +-
 .../web/components/pages/ChangeRequestPage.js | 357 +++++++++++-------
 frontend/web/styles/components/_panel.scss    |  21 ++
 3 files changed, 252 insertions(+), 143 deletions(-)

diff --git a/frontend/web/components/Tooltip.tsx b/frontend/web/components/Tooltip.tsx
index f4a848cb5d0c..6897a600204c 100644
--- a/frontend/web/components/Tooltip.tsx
+++ b/frontend/web/components/Tooltip.tsx
@@ -15,6 +15,7 @@ type TooltipProps = {
   plainText: boolean
   place?: string | undefined
   title: JSX.Element // This is actually the Tooltip parent component
+  noIcon?: boolean
 }
 
 const StyledTooltip = ({ children }: StyledTooltipProps) => (
@@ -24,10 +25,17 @@ const StyledTooltip = ({ children }: StyledTooltipProps) => (
   </div>
 )
 
-const tooltipStyler = (plainText: boolean, children: string): string => {
-  const html = renderToStaticMarkup(
-    <StyledTooltip>{plainText ? children : '{{html}}'}</StyledTooltip>,
+const tooltipStyler = (
+  plainText: boolean,
+  children: string,
+  noIcon?: boolean,
+): string => {
+  const tooltip = noIcon ? (
+    <span>{plainText ? children : '{{html}}'}</span>
+  ) : (
+    <StyledTooltip>{plainText ? children : '{{html}}'}</StyledTooltip>
   )
+  const html = renderToStaticMarkup(tooltip)
   if (plainText) {
     return html
   }
@@ -36,6 +44,7 @@ const tooltipStyler = (plainText: boolean, children: string): string => {
 
 const Tooltip = ({
   children,
+  noIcon,
   place,
   plainText,
   title,
@@ -58,7 +67,7 @@ const Tooltip = ({
         type='dark'
         effect='solid'
       >
-        {tooltipStyler(plainText, children)}
+        {tooltipStyler(plainText, children, noIcon)}
       </ReactTooltip>
     </span>
   )
diff --git a/frontend/web/components/pages/ChangeRequestPage.js b/frontend/web/components/pages/ChangeRequestPage.js
index 2b89a6d8107a..893a539ca2f6 100644
--- a/frontend/web/components/pages/ChangeRequestPage.js
+++ b/frontend/web/components/pages/ChangeRequestPage.js
@@ -18,8 +18,9 @@ import { getMyGroups } from 'common/services/useMyGroup'
 import { getStore } from 'common/store'
 import PageTitle from 'components/PageTitle'
 import Icon from 'components/Icon'
+import classnames from 'classnames'
 
-const labelWidth = 100
+const labelWidth = 120
 
 const ChangeRequestsPage = class extends Component {
   static displayName = 'ChangeRequestsPage'
@@ -513,159 +514,237 @@ const ChangeRequestsPage = class extends Component {
                         </>
                       }
                     />
-                    <Panel
-                      title={
-                        isScheduled ? 'Scheduled Change' : 'Change Request'
-                      }
-                      className='no-pad'
-                    >
-                      <div className='search-list'>
-                        <Row className='list-item change-request-item px-4'>
-                          <div
-                            className='font-weight-medium mr-3'
-                            style={{ width: labelWidth }}
-                          >
-                            Feature:
-                          </div>
 
-                          <a
-                            target='_blank'
-                            className='btn-link font-weight-medium'
-                            href={`/project/${
-                              this.props.match.params.projectId
-                            }/environment/${
-                              this.props.match.params.environmentId
-                            }/features?feature=${
-                              projectFlag && projectFlag.id
-                            }`}
-                            rel='noreferrer'
-                          >
-                            {projectFlag && projectFlag.name}
-                          </a>
-                        </Row>
-                        <Row
-                          className='list-item change-request-item px-4'
-                          style={{
-                            opacity:
-                              newEnabled === oldEnabled &&
-                              !changeRequest.committed_at
-                                ? 0.25
-                                : 1,
-                          }}
-                        >
-                          <div
-                            className='font-weight-medium mr-3'
-                            style={{ width: labelWidth }}
-                          >
-                            Enabled:
-                          </div>
-                          {!changeRequest.committed_at && (
-                            <Flex className='flex-row'>
-                              <Switch checked={oldEnabled} />
-                              <div className='ml-3'>Live Version</div>
-                            </Flex>
-                          )}
-                          <Flex className='flex-row'>
-                            <Switch checked={newEnabled} />
-                            <div className='ml-3'>
-                              {isScheduled
-                                ? 'Scheduled Change'
-                                : 'Change Request'}
-                            </div>
-                          </Flex>
-                        </Row>
-                        <Row
-                          className='list-item change-request-item px-4'
-                          style={{
-                            opacity:
-                              oldValue === newValue &&
-                              !changeRequest.committed_at
-                                ? 0.25
-                                : 1,
-                          }}
-                        >
-                          <div
-                            className='font-weight-medium mr-3'
-                            style={{ width: labelWidth }}
-                          >
-                            Value:
-                          </div>
-                          {!changeRequest.committed_at && (
-                            <Flex className='mr-4'>
-                              <label>Scheduled Change</label>
-                              <ValueEditor
-                                value={Utils.getTypedValue(oldValue)}
-                                className='code-medium'
-                              />
-                            </Flex>
-                          )}
-                          <Flex
-                            style={{
-                              maxWidth: changeRequest.committed_at
-                                ? '445px'
-                                : '',
-                            }}
-                          >
-                            <label>Scheduled Change</label>
-                            <ValueEditor
-                              value={newValue}
-                              className='code-medium'
-                            />
-                          </Flex>
-                        </Row>
-                        {isMv && (
-                          <Row
-                            className='list-item px-4 align-start change-request-item'
-                            style={{
-                              opacity:
-                                !mvChanged && !changeRequest.committed_at
-                                  ? 0.25
-                                  : 1,
-                            }}
-                          >
+                    <div
+                      style={{
+                        maxWidth: changeRequest.committed_at ? '530px' : '',
+                      }}
+                    >
+                      <Panel
+                        title={
+                          isScheduled ? 'Scheduled Change' : 'Change Request'
+                        }
+                        className='no-pad mb-2'
+                      >
+                        <div className='search-list'>
+                          <Row className='list-item change-request-item px-4'>
                             <div
                               className='font-weight-medium mr-3'
                               style={{ width: labelWidth }}
                             >
-                              Variations:
+                              Feature:
                             </div>
 
-                            <Flex className='mr-2'>
-                              {mvData.map((v, i) => (
+                            <a
+                              target='_blank'
+                              className='btn-link font-weight-medium'
+                              href={`/project/${
+                                this.props.match.params.projectId
+                              }/environment/${
+                                this.props.match.params.environmentId
+                              }/features?feature=${
+                                projectFlag && projectFlag.id
+                              }`}
+                              rel='noreferrer'
+                            >
+                              {projectFlag && projectFlag.name}
+                            </a>
+                          </Row>
+                        </div>
+                      </Panel>
+
+                      <Flex className='gap-3 flex-row'>
+                        <Flex>
+                          <Panel className='no-pad'>
+                            <div className='search-list'>
+                              <Row className='table-header px-4'>
+                                Live Version
+                              </Row>
+                              <Row className='list-item change-request-item px-4'>
+                                <div
+                                  className='font-weight-medium mr-3'
+                                  style={{ width: labelWidth }}
+                                >
+                                  Enabled:
+                                </div>
+                                <Switch
+                                  checked={oldEnabled}
+                                  disabled
+                                  style={{
+                                    opacity:
+                                      newEnabled === oldEnabled &&
+                                      !changeRequest.committed_at
+                                        ? 0.25
+                                        : 1,
+                                  }}
+                                />
+                              </Row>
+                              <Row className='list-item change-request-item px-4 align-items-start'>
                                 <div
-                                  key={i}
-                                  className='mb-3'
+                                  className='font-weight-medium mr-3'
+                                  style={{ width: labelWidth }}
+                                >
+                                  Value:
+                                </div>
+                                <Flex
                                   style={{
-                                    opacity: mvChanged && !v.changed ? 0.25 : 1,
+                                    opacity:
+                                      oldValue === newValue &&
+                                      !changeRequest.committed_at
+                                        ? 0.25
+                                        : 1,
                                   }}
                                 >
-                                  <Flex>
-                                    <label>Variation {i + 1}</label>
+                                  <label>Value</label>
+                                  <ValueEditor
+                                    value={Utils.getTypedValue(oldValue)}
+                                    className='code-medium'
+                                  />
+                                </Flex>
+                              </Row>
+
+                              {isMv &&
+                                mvData.map((v, i) => (
+                                  <Row
+                                    key={i}
+                                    className='list-item px-4 align-start change-request-item'
+                                  >
+                                    <div
+                                      style={{ width: labelWidth }}
+                                      className='font-weight-medium flex flex-row align-items-start mr-3'
+                                    >
+                                      <div className='flex flex-row align-items-center align-self-start'>
+                                        <span className='mr-1'>
+                                          Variation {i + 1}
+                                        </span>
+                                        <Tooltip
+                                          place='bottom'
+                                          title={<Icon name='info-outlined' />}
+                                          className='ml-1'
+                                          noIcon
+                                        >
+                                          {Utils.getTypedValue(v.value)}
+                                        </Tooltip>
+                                      </div>
+                                    </div>
+                                    <Flex
+                                      style={{
+                                        opacity:
+                                          !changeRequest.committed_at &&
+                                          !v.changed
+                                            ? 0.25
+                                            : 1,
+                                      }}
+                                    >
+                                      <label>Environment Weight %</label>
+                                      <Input
+                                        value={v.oldValue}
+                                        style={{ pointerEvents: 'none' }}
+                                      />
+                                    </Flex>
+                                  </Row>
+                                ))}
+                            </div>
+                          </Panel>
+                        </Flex>
+
+                        {!changeRequest.committed_at && (
+                          <Flex>
+                            <Panel className='no-pad panel-change-request'>
+                              <div className='search-list'>
+                                <Row className='table-header px-4'>
+                                  {isScheduled
+                                    ? 'Scheduled Change'
+                                    : 'Change Request'}
+                                </Row>
+                                <Row className='list-item change-request-item px-4'>
+                                  <div
+                                    className='font-weight-medium mr-3'
+                                    style={{ width: labelWidth }}
+                                  >
+                                    Enabled:
+                                  </div>
+                                  <Switch
+                                    checked={newEnabled}
+                                    disabled
+                                    style={{
+                                      opacity:
+                                        newEnabled === oldEnabled ? 0.25 : 1,
+                                    }}
+                                  />
+                                </Row>
+                                <Row className='list-item change-request-item px-4 align-items-start'>
+                                  <div
+                                    className='font-weight-medium mr-3'
+                                    style={{ width: labelWidth }}
+                                  >
+                                    Value:
+                                  </div>
+                                  <Flex
+                                    style={{
+                                      opacity: oldValue === newValue ? 0.25 : 1,
+                                    }}
+                                  >
+                                    <label>Value</label>
                                     <ValueEditor
-                                      value={Utils.getTypedValue(v.value)}
-                                      className='code-medium'
+                                      value={newValue}
+                                      className={classnames('code-medium', {
+                                        'change-request-updated-value':
+                                          oldValue !== newValue,
+                                      })}
                                     />
                                   </Flex>
-                                  <Row>
-                                    <Flex className='mr-4 mt-1'>
-                                      <span className='fs-small lh-sm text-muted'>
-                                        Environment weight: {v.oldValue}%
-                                      </span>
-                                    </Flex>
+                                </Row>
 
-                                    <Flex className='mt-1'>
-                                      <span className='fs-small lh-sm text-muted'>
-                                        Environment weight: {v.newValue}%
-                                      </span>
-                                    </Flex>
-                                  </Row>
-                                </div>
-                              ))}
-                            </Flex>
-                          </Row>
+                                {isMv &&
+                                  mvData.map((v, i) => (
+                                    <Row
+                                      key={i}
+                                      className='list-item px-4 align-start change-request-item'
+                                    >
+                                      <div
+                                        style={{ width: labelWidth }}
+                                        className='font-weight-medium flex flex-row align-items-center mr-3'
+                                      >
+                                        <div className='flex flex-row align-items-center align-self-start'>
+                                          <span className='mr-1'>
+                                            Variation {i + 1}
+                                          </span>
+                                          <Tooltip
+                                            place='bottom'
+                                            title={
+                                              <Icon name='info-outlined' />
+                                            }
+                                            className='ml-1'
+                                            noIcon
+                                          >
+                                            {Utils.getTypedValue(v.value)}
+                                          </Tooltip>
+                                        </div>
+                                      </div>
+                                      <Flex
+                                        style={{
+                                          opacity: !v.changed ? 0.25 : 1,
+                                        }}
+                                      >
+                                        <label>Environment Weight %</label>
+                                        <Input
+                                          value={v.newValue}
+                                          className={classnames('code-medium', {
+                                            'change-request-updated-value':
+                                              v.changed,
+                                          })}
+                                          style={{ pointerEvents: 'none' }}
+                                        />
+                                      </Flex>
+                                    </Row>
+                                  ))}
+                              </div>
+                            </Panel>
+                          </Flex>
                         )}
-                      </div>
-                    </Panel>
+                      </Flex>
+                    </div>
                   </div>
                 </div>
                 <JSONReference
@@ -690,7 +769,7 @@ const ChangeRequestsPage = class extends Component {
                     )}
 
                     {changeRequest.committed_at ? (
-                      <div className='text-right mr-2 font-weight-medium'>
+                      <div className='mr-2 font-weight-medium'>
                         Committed at{' '}
                         {moment(changeRequest.committed_at).format(
                           'Do MMM YYYY HH:mma',
diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss
index b1631dddb51a..2f069e9d7b69 100644
--- a/frontend/web/styles/components/_panel.scss
+++ b/frontend/web/styles/components/_panel.scss
@@ -197,6 +197,27 @@ a.text-white {
       }
     }
   }
+  &.panel-change-request {
+    .search-list {
+      border-color: rgba(149, 108, 255, 0.48);
+
+      .table-header {
+        color: #6837fc;
+        background-color: rgba(102, 51, 255, 0.08);
+      }
+
+      .change-request-item {
+        border-color: rgba(149, 108, 255, 0.48);
+      }
+    }
+
+    .change-request-updated-value {
+      input,
+      code.txt {
+        color: #6837fc;
+      }
+    }
+  }
 }
 
 @include media-breakpoint-down(xxl) {