fix: Apsara v1 migration fixes and minor UI refinements (#1034)

* fix (Button & InputField): Non editable text and button wrong variant

* fix: z-index and other button fixes

* refactor (Link): migrate a to Link

* fix (plans): upgrade/downgrade button styling

* fix (profile): email incorrectly displayed in profile section

* fix: plan info button variant incorrect

* refactor: button loading state with inbuilt prop

* fix: dialog spacing

* fix: skeleton and dialog

* fix: team page

* fix: project page

* fix: security page

* fix: tokens page

* fix: ui shift on upload image hover

* fix: plans page fixes

* fix: dialog padding spacing

* feat: add disabled state for add member button

* fix: typo

* fix: disable button when no permission in teams

* chore: remove brackets from text

* chore: remove separator

* chore: typo fix

* fix: invite css fixes

* fix: add border radius to sidebar

* style: css changes

* style: fix image crop overflowing when big image

* chore: spelling

* fix: api contract

* style: match switch to button style

* fix (EmptyState): copy change suggestions (#1043)

* fix: copy change suggestions

* fix: service accounts table overflow issue

* fix: select not working inside form (#1044)

* Update sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx

* Update sdks/js/packages/core/react/components/organization/domain/delete.tsx

* Update sdks/js/packages/core/react/components/organization/domain/add-domain.tsx

* Update sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx

* Update sdks/js/packages/core/react/components/organization/domain/add-domain.tsx

* refactor (Amount): Migrate Amount component to v1 in Frontier (#1030)

* chore: deprecate amount component

* Update sdks/js/packages/core/react/components/helpers/Amount/index.tsx

* refactor: migrate Amount component

* Update sdks/js/packages/core/react/components/organization/plans/pricing-column.tsx

* fix: remove old path

---------

Co-authored-by: Rohan Chakraborty <[email protected]>

Author: paanSinghCoder

sdks/js/packages/core/package.json

@@ -61,7 +61,7 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "0.46.0-rc.5",
+    "@raystack/apsara": "0.47.0",
     "@raystack/eslint-config": "workspace:^",
     "@raystack/frontier-tsconfig": "workspace:^",
     "@size-limit/preset-small-lib": "^8.2.6",

sdks/js/packages/core/react/components/avatar-upload/avatar-upload.module.css

@@ -10,6 +10,7 @@
   display: flex;
   width: 80px;
   height: 80px;
+  box-sizing: border-box;
   gap: var(--rs-space-5);
   justify-content: center;
   align-items: center;
@@ -29,18 +30,15 @@
 }
 
 .overlay {
-  z-index: 55;
   background-color: rgba(104, 112, 118, 0.5);
 }
 
 .cropModal {
   padding: 0;
-  max-width: 400px;
-  max-height: 400px;
+  max-width: 600px;
+  max-height: fit-content;
   width: 100%;
   height: 100%;
-  z-index: 60;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;

sdks/js/packages/core/react/components/avatar-upload/index.tsx

@@ -14,6 +14,7 @@ import styles from './avatar-upload.module.css';
 interface CropModalProps {
   imgSrc?: string;
   onClose: () => void;
+  // eslint-disable-next-line no-unused-vars
   onSave: (data: string) => void;
 }
 
@@ -88,10 +89,7 @@ function CropModal({ onClose, imgSrc, onSave }: CropModalProps) {
     <Dialog open={true}>
       <Dialog.Content overlayClassName={styles.overlay} className={styles.cropModal}>
           <Dialog.Header>
-            <Flex justify="between" style={{
-              padding: 'var(--rs-space-5) var(--rs-space-7)',
-              borderBottom: '1px solid var(--rs-color-border-base-primary)'
-            }}>
+            <Flex justify="between" align="center" style={{ width: '100%' }}>
               <Text size="large" weight="medium">
                 Crop your photo
               </Text>
@@ -108,7 +106,7 @@ function CropModal({ onClose, imgSrc, onSave }: CropModalProps) {
           <Dialog.Body>
             <Flex
               direction="column"
-              style={{ padding: 'var(--rs-space-5) var(--rs-space-9)', maxHeight: '280px', height: '100%' }}
+              style={{ maxHeight: '280px', height: '100%' }}
               justify={'center'}
               align={'center'}
             >
@@ -135,11 +133,7 @@ function CropModal({ onClose, imgSrc, onSave }: CropModalProps) {
           <Dialog.Footer>
             <Flex
               justify="end"
-              style={{
-                padding: 'var(--rs-space-5)',
-                borderTop: '1px solid var(--rs-color-border-base-primary)'
-              }}
-              gap="medium"
+              gap={5}
             >
               <Button
                 variant="outline"

sdks/js/packages/core/react/components/helpers/Amount/index.tsx

@@ -3,7 +3,6 @@ import {
   Flex,
   Text,
   toast,
-  Separator,
   Image,
   Skeleton,
   Dialog,
@@ -21,6 +20,7 @@ import { V1Beta1CreatePolicyForProjectBody, V1Beta1Project } from '~/src';
 import { PERMISSIONS } from '~/utils';
 import cross from '~/react/assets/cross.svg';
 import styles from './styles.module.css';
+import { handleSelectValueChange } from '~/react/utils';
 
 const DEFAULT_KEY_NAME = 'Initial Generated Key';
 
@@ -137,7 +137,7 @@ export const AddServiceAccount = () => {
       >
         <form onSubmit={handleSubmit(onSubmit)}>
           <Dialog.Header>
-            <Flex justify="between" className={styles.addDialogForm}>
+            <Flex justify="between" align="center" style={{ width: '100%' }}>
               <Text size={6} weight={500}>
                 New Service Account
               </Text>
@@ -149,15 +149,10 @@ export const AddServiceAccount = () => {
                 data-test-id="frontier-sdk-new-service-account-close-btn"
               />
             </Flex>
-            <Separator />
           </Dialog.Header>
 
           <Dialog.Body>
-            <Flex
-              direction="column"
-              gap={5}
-              className={styles.addDialogFormContent}
-            >
+            <Flex direction="column" gap={5}>
               <Text>
                 Create a dedicated service account to facilitate secure API
                 interactions on behalf of the organization.
@@ -182,13 +177,14 @@ export const AddServiceAccount = () => {
                     render={({ field }) => {
                       const { ref, onChange, ...rest } = field;
                       return (
-                        <Select {...rest} onValueChange={onChange}>
+                        <Select
+                          {...rest}
+                          onValueChange={handleSelectValueChange(onChange)}
+                        >
                           <Select.Trigger ref={ref}>
                             <Select.Value placeholder="Select a project" />
                           </Select.Trigger>
-                          <Select.Content
-                            style={{ width: '100% !important', zIndex: 65 }}
-                          >
+                          <Select.Content style={{ width: '100% !important' }}>
                             <Select.Viewport style={{ maxHeight: '300px' }}>
                               {projects.map(project => (
                                 <Select.Item
@@ -215,7 +211,7 @@ export const AddServiceAccount = () => {
           </Dialog.Body>
 
           <Dialog.Footer>
-            <Flex justify="end" className={styles.addDialogFormBtnWrapper}>
+            <Flex justify="end">
               <Button
                 variant="solid"
                 color="accent"

sdks/js/packages/core/react/components/organization/api-keys/add.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   Text,
   toast,
-  Separator,
   Image,
   Dialog
 } from '@raystack/apsara/v1';
@@ -52,7 +51,7 @@ export const DeleteServiceAccount = () => {
         className={styles.addDialogContent}
       >
         <Dialog.Header>
-          <Flex justify="between" className={styles.addDialogForm}>
+          <Flex justify="between" align="center" style={{ width: '100%' }}>
             <Text size="large" weight="medium">
               Delete Service Account
             </Text>
@@ -65,28 +64,24 @@ export const DeleteServiceAccount = () => {
               data-test-id="frontier-sdk-delete-service-account-close-btn"
             />
           </Flex>
-          <Separator />
         </Dialog.Header>
 
         <Dialog.Body>
           <Flex
             direction="column"
             gap={5}
-            className={styles.addDialogFormContent}
           >
             <Text>
               This is an irreversible and permanent action doing this might
               result in deletion of the service account and the keys associated
               with it. Do you wish to proceed?
             </Text>
           </Flex>
-          <Separator />
         </Dialog.Body>
 
         <Dialog.Footer>
           <Flex
             justify="end"
-            className={styles.addDialogFormBtnWrapper}
             gap={5}
           >
             <Button

sdks/js/packages/core/react/components/organization/api-keys/delete.tsx

@@ -35,7 +35,7 @@ const NoServiceAccounts = ({
     <Flex justify="center" align="center" className={styles.stateContent}>
       <EmptyState
         icon={<Image src={keyIcon as unknown as string} alt="keyIcon" />}
-        heading="No service account"
+        heading="No service account found"
         subHeading={`Create a new account to use the APIs of ${appName} platform`}
         primaryAction={
           <Button
@@ -58,7 +58,7 @@ const NoAccess = () => {
       <EmptyState
         icon={<ExclamationTriangleIcon />}
         heading="Restricted Access"
-        subHeading={`Admin access required, please reach out to your admin incase you want to generate a key.`}
+        subHeading='Admin access required, please reach out to your admin incase you want to generate a key'
       />
     </Flex>
   );

sdks/js/packages/core/react/components/organization/api-keys/index.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   Text,
   toast,
-  Separator,
   Image,
   Dialog
 } from '@raystack/apsara/v1';
@@ -64,7 +63,7 @@ export const DeleteServiceAccountKey = () => {
         className={styles.addDialogContent}
       >
         <Dialog.Header>
-          <Flex justify="between" className={styles.addDialogForm}>
+          <Flex justify="between" align="center" style={{ width: '100%' }}>
             <Text size="large" weight="medium">
               Revoke API Key
             </Text>
@@ -77,28 +76,24 @@ export const DeleteServiceAccountKey = () => {
               data-test-id="frontier-sdk-revoke-service-account-key-close-btn"
             />
           </Flex>
-          <Separator />
         </Dialog.Header>
 
         <Dialog.Body>
           <Flex
             direction="column"
             gap={5}
-            className={styles.addDialogFormContent}
           >
             <Text>
               This is an irreversible action doing this might lead to
               discontinuation of access to the {appName} features. Do you wish
               to proceed?
             </Text>
           </Flex>
-          <Separator />
         </Dialog.Body>
 
         <Dialog.Footer>
           <Flex
             justify="end"
-            className={styles.addDialogFormBtnWrapper}
             gap={5}
           >
             <Button

sdks/js/packages/core/react/components/organization/api-keys/service-user/delete.tsx

@@ -3,7 +3,6 @@ import {
   Flex,
   Spinner,
   Text,
-  Separator,
   toast,
   Image,
   Dialog,
@@ -210,7 +209,7 @@ export default function ManageServiceUserProjects() {
         className={styles.manageProjectDialogContent}
       >
         <Dialog.Header>
-          <Flex justify="between" style={{ padding: '16px 24px' }}>
+          <Flex justify="between" align="center" style={{ width: '100%' }}>
             <Text size="large" weight="medium">
               Manage Project Access
             </Text>
@@ -223,13 +222,12 @@ export default function ManageServiceUserProjects() {
               data-test-id="frontier-sdk-service-account-manage-access-close-btn"
             />
           </Flex>
-          <Separator />
         </Dialog.Header>
 
         <Dialog.Body>
           <Flex
             className={styles.manageProjectDialogWrapper}
-            gap="large"
+            gap={9}
             direction={'column'}
           >
             <Text size="small" variant="secondary">

sdks/js/packages/core/react/components/organization/api-keys/service-user/projects.tsx

@@ -70,32 +70,13 @@
   padding: 0;
   max-width: 400px;
   width: 100%;
-  z-index: 60;
 }
 
 .overlay {
-  z-index: 55;
   background-color: rgba(104, 112, 118, 0.5);
 }
 
-.addDialogForm {
-  padding: var(--rs-space-5) var(--rs-space-7);
-}
-
-.addDialogFormContent {
-  padding: var(--rs-space-9) var(--rs-space-7);
-}
-
-.addDialogFormBtnWrapper {
-  padding: var(--rs-space-5);
-}
-
-.manageProjectDialog {
-  padding: var(--rs-space-5) var(--rs-space-7);
-}
-
 .manageProjectDialogWrapper {
-  padding: var(--rs-space-5) var(--rs-space-7);
   height: calc(100% - var(--rs-space-9) - var(--rs-space-9));
   overflow: hidden;
 }