ServiceAccount: New service account modal to follow design system (#52373)

* ServiceAccount: New service account modal to follow design system

* Fixing spacing and removing double Field label

* Fixing imports

* Update comment

public/app/features/serviceaccounts/components/CreateTokenModal.tsx

@@ -8,11 +8,7 @@ import {
   ClipboardButton,
   DatePickerWithInput,
   Field,
-  FieldSet,
-  HorizontalGroup,
-  Icon,
   Input,
-  Label,
   Modal,
   RadioButtonGroup,
   useStyles2,
@@ -76,12 +72,7 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
     onClose();
   };
 
-  const modalTitle = (
+  const modalTitle = !token ? 'Add service account token' : 'Service account token created';
-    <div className={styles.modalHeaderTitle}>
-      <Icon className={styles.modalHeaderIcon} name="key-skeleton-alt" size="lg" />
-      <span>{!token ? 'Add service account token' : 'Service account token created'}</span>
-    </div>
-  );
 
   return (
     <Modal
@@ -93,77 +84,73 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
     >
       {!token ? (
         <div>
-          <FieldSet>
+          <Field
-            <Field
+            label="Display name"
-              label="Display name"
+            description="Name to easily identify the token"
-              description="Name to easily identify the token"
+            // for now this is required
-              className={styles.modalRow}
+            // need to make this optional in backend as well
-              // for now this is required
+            required={true}
-              // need to make this optional in backend as well
+          >
-              required={true}
+            <Input
-            >
+              name="tokenName"
-              <Input
+              value={newTokenName}
-                name="tokenName"
+              placeholder={defaultTokenName}
-                value={newTokenName}
+              onChange={(e) => {
-                placeholder={defaultTokenName}
+                setNewTokenName(e.currentTarget.value);
-                onChange={(e) => {
+              }}
-                  setNewTokenName(e.currentTarget.value);
+            />
-                }}
+          </Field>
-              />
+          <Field label="Expiration">
-            </Field>
             <RadioButtonGroup
-              className={styles.modalRow}
               options={EXPIRATION_OPTIONS}
               value={isWithExpirationDate}
               onChange={setIsWithExpirationDate}
               size="md"
             />
-            {isWithExpirationDate && (
+          </Field>
-              <Field label="Expiration date" className={styles.modalRow}>
+          {isWithExpirationDate && (
-                <DatePickerWithInput
+            <Field label="Expiration date">
-                  onChange={onExpirationDateChange}
+              <DatePickerWithInput
-                  value={newTokenExpirationDate}
+                onChange={onExpirationDateChange}
-                  placeholder=""
+                value={newTokenExpirationDate}
-                  minDate={tomorrow}
+                placeholder=""
-                />
+                minDate={tomorrow}
-              </Field>
+              />
-            )}
+            </Field>
-          </FieldSet>
+          )}
-          <Button onClick={onGenerateToken} disabled={isWithExpirationDate && !isExpirationDateValid}>
+          <Modal.ButtonRow>
-            Generate token
+            <Button onClick={onGenerateToken} disabled={isWithExpirationDate && !isExpirationDateValid}>
-          </Button>
+              Generate token
+            </Button>
+          </Modal.ButtonRow>
         </div>
       ) : (
         <>
-          <FieldSet>
+          <Field
-            <Label
+            label="Token"
-              description="You will not be able to see or generate it again. Loosing a token requires creating new one."
+            description="Copy the token now as you will not be able to see it again. Loosing a token requires creating a new one."
-              className={styles.modalRow}
+          >
-            >
+            <div className={styles.modalTokenRow}>
-              Copy the token. It will be showed only once.
+              <Input name="tokenValue" value={token} readOnly />
-            </Label>
+              <ClipboardButton
-            <Field label="Token" className={styles.modalRow}>
+                className={styles.modalCopyToClipboardButton}
-              <div className={styles.modalTokenRow}>
+                variant="secondary"
-                <Input name="tokenValue" value={token} readOnly />
+                size="md"
-                <ClipboardButton
+                icon="copy"
-                  className={styles.modalCopyToClipboardButton}
+                getText={() => token}
-                  variant="secondary"
+              >
-                  size="md"
+                Copy clipboard
-                  getText={() => token}
+              </ClipboardButton>
-                >
+            </div>
-                  <Icon name="copy" /> Copy to clipboard
+          </Field>
-                </ClipboardButton>
+          <Modal.ButtonRow>
-              </div>
-            </Field>
-          </FieldSet>
-          <HorizontalGroup>
             <ClipboardButton variant="primary" getText={() => token} onClipboardCopy={onCloseInternal}>
               Copy to clipboard and close
             </ClipboardButton>
             <Button variant="secondary" onClick={onCloseInternal}>
               Close
             </Button>
-          </HorizontalGroup>
+          </Modal.ButtonRow>
         </>
       )}
     </Modal>
@@ -185,29 +172,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     modalContent: css`
       overflow: visible;
     `,
-    modalRow: css`
-      margin-bottom: ${theme.spacing(4)};
-    `,
     modalTokenRow: css`
       display: flex;
     `,
     modalCopyToClipboardButton: css`
       margin-left: ${theme.spacing(0.5)};
     `,
-    modalHeaderTitle: css`
-      font-size: ${theme.typography.size.lg};
-      margin: ${theme.spacing(0, 4, 0, 1)};
-      display: flex;
-      align-items: center;
-      position: relative;
-      top: 2px;
-    `,
-    modalHeaderIcon: css`
-      margin-right: ${theme.spacing(2)};
-      font-size: inherit;
-      &:before {
-        vertical-align: baseline;
-      }
-    `,
   };
 };