From 4a821f52d308f7453cf5851e483def3e251c5082 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 28 Nov 2023 16:56:26 +0200
Subject: [PATCH] Users profile tweaks (#3443)

## Which issue(s) this PR fixes

https://github.com/grafana/oncall/issues/3340
https://github.com/grafana/oncall/issues/3341
---
 CHANGELOG.md                                  |  6 ++++
 .../src/containers/Labels/Labels.module.css   |  2 --
 .../src/containers/Labels/Labels.tsx          |  7 +---
 .../src/containers/Labels/LabelsFilter.tsx    |  7 +---
 .../parts/connectors/PhoneConnector.tsx       | 34 +++++++++++++++----
 .../UserSettings/parts/index.module.css       | 23 +++++++++++++
 .../PhoneVerification/PhoneVerification.tsx   |  2 +-
 7 files changed, 59 insertions(+), 22 deletions(-)
 delete mode 100644 grafana-plugin/src/containers/Labels/Labels.module.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba9bee1c..ede47cad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- User profile UI tweaks ([#3443](https://github.com/grafana/oncall/pull/3443))
+
 ## v1.3.64 (2023-11-28)
 
 ### Fixed
diff --git a/grafana-plugin/src/containers/Labels/Labels.module.css b/grafana-plugin/src/containers/Labels/Labels.module.css
deleted file mode 100644
index c3a2af63..00000000
--- a/grafana-plugin/src/containers/Labels/Labels.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/grafana-plugin/src/containers/Labels/Labels.tsx b/grafana-plugin/src/containers/Labels/Labels.tsx
index 60fc1324..c30d9016 100644
--- a/grafana-plugin/src/containers/Labels/Labels.tsx
+++ b/grafana-plugin/src/containers/Labels/Labels.tsx
@@ -2,7 +2,6 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r
 
 import { ServiceLabels, ServiceLabelsProps } from '@grafana/labels';
 import { Field } from '@grafana/ui';
-import cn from 'classnames/bind';
 import { isEmpty } from 'lodash-es';
 import { observer } from 'mobx-react';
 
@@ -10,10 +9,6 @@ import { LabelKeyValue } from 'models/label/label.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification } from 'utils';
 
-import styles from './Labels.module.css';
-
-const cx = cn.bind(styles);
-
 export interface LabelsProps {
   value: LabelKeyValue[];
   errors: any;
@@ -107,7 +102,7 @@ const Labels = observer(
     }, []);
 
     return (
-      <div className={cx('root')}>
+      <div>
         <Field label="Labels">
           <ServiceLabels
             loadById
diff --git a/grafana-plugin/src/containers/Labels/LabelsFilter.tsx b/grafana-plugin/src/containers/Labels/LabelsFilter.tsx
index 667630c9..2a6dc2f6 100644
--- a/grafana-plugin/src/containers/Labels/LabelsFilter.tsx
+++ b/grafana-plugin/src/containers/Labels/LabelsFilter.tsx
@@ -1,16 +1,11 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import LabelsFilterComponent from 'components/LabelsFilter/LabelsFilter';
 import { useStore } from 'state/useStore';
 
-import styles from './Labels.module.css';
-
-const cx = cn.bind(styles);
-
 interface LabelsFilterProps {
   filterType: 'labels' | 'alert_group_labels';
   autoFocus: boolean;
@@ -77,7 +72,7 @@ const LabelsFilter = observer((props: LabelsFilterProps) => {
   };
 
   return (
-    <div className={cx('root', className)}>
+    <div className={className}>
       <LabelsFilterComponent
         autoFocus={autoFocus}
         labelField="name"
diff --git a/grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx b/grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx
index aa35f74e..e9decfa1 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx
+++ b/grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx
@@ -1,12 +1,20 @@
 import React, { useCallback } from 'react';
 
-import { Alert, Button, HorizontalGroup, InlineField, Input } from '@grafana/ui';
+import { Alert, Button, HorizontalGroup, InlineField, Input, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
 
+import Tag from 'components/Tag/Tag';
+import Text from 'components/Text/Text';
 import WithConfirm from 'components/WithConfirm/WithConfirm';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { User } from 'models/user/user.types';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
+import { getVar } from 'utils/DOM';
+
+import styles from 'containers/UserSettings/parts/index.module.css';
+
+const cx = cn.bind(styles);
 
 interface PhoneConnectorProps {
   id: User['pk'];
@@ -122,10 +130,21 @@ const PhoneConnector = (props: PhoneConnectorProps) => {
               </InlineField>
             </div>
           ) : storeUser.unverified_phone_number ? (
-            <div>
-              <InlineField label="Phone" labelWidth={12}>
-                <HorizontalGroup spacing="xs">
+            <VerticalGroup spacing="xs">
+              <div className={cx('tag-container')}>
+                <Tag
+                  color={getVar('--tag-secondary-transparent')}
+                  border={getVar('--border-weak')}
+                  className={cx('tag', 'tag-left')}
+                >
+                  <Text type="primary" size="small">
+                    Phone
+                  </Text>
+                </Tag>
+
+                <div className={cx('tag-right')}>
                   <Input disabled={true} value={storeUser.unverified_phone_number} />
+
                   {isCurrentUser ? (
                     <Button onClick={handleClickConfirmPhoneButton}>Verify</Button>
                   ) : (
@@ -133,10 +152,11 @@ const PhoneConnector = (props: PhoneConnectorProps) => {
                       <Button onClick={handleClickConfirmPhoneButton}>Verify</Button>
                     </WithConfirm>
                   )}
-                </HorizontalGroup>
-              </InlineField>
+                </div>
+              </div>
+
               <Alert title="Phone number is not verified. Verify or change" severity="warning" />
-            </div>
+            </VerticalGroup>
           ) : (
             <div>
               <InlineField label="Phone" labelWidth={12}>
diff --git a/grafana-plugin/src/containers/UserSettings/parts/index.module.css b/grafana-plugin/src/containers/UserSettings/parts/index.module.css
index f6bf4215..23402b9c 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/index.module.css
+++ b/grafana-plugin/src/containers/UserSettings/parts/index.module.css
@@ -28,3 +28,26 @@
   text-align: center;
   justify-content: center;
 }
+
+.tag-container {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+
+.tag {
+  font-weight: 500;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px;
+  width: 120px;
+}
+
+.tag-left {
+  flex-basis: 120px;
+}
+
+.tag-right {
+  flex-basis: calc(100% - 120px);
+}
diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
index a354c0f0..de056d1e 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
+++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
@@ -53,7 +53,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
     }),
     {
       code: '',
-      phone: user.verified_phone_number || '+',
+      phone: user.verified_phone_number || user.unverified_phone_number || '+',
       isLoading: false,
       isCodeSent: false,
       isPhoneCallInitiated: false,