Merge pull request #1102 from logto-io/charles-ac-misc-improvements

fix(console): misc improvements and ui fixes

packages/console/package.json

@@ -82,7 +82,8 @@
   "eslintConfig": {
     "extends": "@silverhand/react",
     "rules": {
-      "complexity": "off"
+      "complexity": "off",
+      "@typescript-eslint/prefer-nullish-coalescing": "off"
     }
   },
   "stylelint": {

packages/console/src/components/AppContent/components/Sidebar/index.module.scss

@@ -6,6 +6,7 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 248px;
+  overflow-y: auto;
 
   > div + div {
     margin-top: _.unit(6);

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -1,5 +1,4 @@
 import { useLogto, UserInfoResponse } from '@logto/react';
-import { UserRole } from '@logto/schemas';
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +9,7 @@ import { getAvatarById } from '@/consts/avatars';
 import useApi from '@/hooks/use-api';
 import SignOut from '@/icons/SignOut';
 
+import UserInfoSkeleton from '../UserInfoSkeleton';
 import * as styles from './index.module.scss';
 
 const UserInfo = () => {
@@ -31,11 +31,10 @@ const UserInfo = () => {
   }, [api, isAuthenticated, fetchUserInfo]);
 
   if (!user) {
-    return null;
+    return <UserInfoSkeleton />;
   }
 
-  const { sub: id, name, avatar, role_names: roleNames } = user;
+  const { sub: id, name, avatar } = user;
-  const isAdmin = roleNames?.includes(UserRole.Admin);
 
   return (
     <>
@@ -48,8 +47,7 @@ const UserInfo = () => {
       >
         <img src={avatar ?? getAvatarById(id)} />
         <div className={styles.wrapper}>
-          <div className={styles.name}>{name}</div>
+          <div className={styles.name}>{name || t('users.unnamed')}</div>
-          {isAdmin && <div className={styles.role}>{t('user_details.roles.admin')}</div>}
         </div>
       </div>
       <Dropdown

packages/console/src/components/AppContent/components/UserInfoSkeleton/index.module.scss

@@ -0,0 +1,24 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2);
+  margin-left: _.unit(4);
+  border-radius: 8px;
+
+  .image {
+    @include _.shimmering-animation;
+    width: 36px;
+    height: 36px;
+    margin-right: _.unit(2);
+    border-radius: 6px;
+  }
+
+  .name {
+    @include _.shimmering-animation;
+    width: 85px;
+    height: 20px;
+    color: var(--color-text);
+  }
+}

packages/console/src/components/AppContent/components/UserInfoSkeleton/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const UserInfoSkeleton = () => (
+  <div className={styles.container}>
+    <div className={styles.image} />
+    <div className={styles.name} />
+  </div>
+);
+
+export default UserInfoSkeleton;

packages/console/src/components/ApplicationName/index.tsx

@@ -16,7 +16,6 @@ const ApplicationName = ({ applicationId, isLink = false }: Props) => {
 
   const { data } = useSWR<Application>(!isAdminConsole && `/api/applications/${applicationId}`);
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   const name = (isAdminConsole ? 'Admin Console' : data?.name) || '-';
 
   if (isLink && !isAdminConsole) {

packages/console/src/components/CodeEditor/index.module.scss

@@ -4,7 +4,7 @@
   padding: _.unit(6);
   border-radius: 16px;
   // Force dark theme on the code editor
-  background: #2d3132;
+  background: #34353f;
   position: relative;
 
   .copy {

packages/console/src/components/CodeEditor/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { ChangeEvent } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -6,19 +7,20 @@ import CopyToClipboard from '../CopyToClipboard';
 import * as styles from './index.module.scss';
 
 type Props = {
+  className?: string;
   language?: string;
   isReadonly?: boolean;
   value?: string;
   onChange?: (value: string) => void;
 };
 
-const CodeEditor = ({ language, isReadonly = false, value = '', onChange }: Props) => {
+const CodeEditor = ({ className, language, isReadonly = false, value = '', onChange }: Props) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange?.(event.currentTarget.value);
   };
 
   return (
-    <div className={styles.container}>
+    <div className={classNames(styles.container, className)}>
       <CopyToClipboard value={value} variant="icon" className={styles.copy} />
       <div className={styles.editor}>
         {/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -26,25 +26,14 @@
     cursor: text;
 
     .copyIcon {
+      display: flex;
+      align-items: center;
       margin-left: _.unit(3);
+      color: var(--color-icon);
       cursor: pointer;
 
-      > svg {
+      &:hover {
-        color: var(--color-icon);
+        color: var(--color-text);
-      }
-    }
-  }
-
-  &.icon {
-    .row {
-      .copyIcon {
-        > svg {
-          color: rgba(#fff, 0.8);
-        }
-
-        :hover {
-          color: #fff;
-        }
       }
     }
   }

packages/console/src/components/UserName/index.tsx

@@ -18,7 +18,7 @@ const UserName = ({ userId, isLink = false }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const isLoading = !data && !error;
-  const name = data?.name ?? t('users.unnamed');
+  const name = data?.name || t('users.unnamed');
 
   if (isLoading) {
     return null;

packages/console/src/pages/ApiResources/index.tsx

@@ -48,6 +48,7 @@ const ApiResources = () => {
         <Button
           title="admin_console.api_resources.create"
           type="primary"
+          size="large"
           icon={<Plus />}
           onClick={() => {
             setIsCreateFormOpen(true);

packages/console/src/pages/Applications/index.tsx

@@ -49,6 +49,7 @@ const Applications = () => {
           icon={<Plus />}
           title="admin_console.applications.create"
           type="primary"
+          size="large"
           onClick={() => {
             navigate('/applications/create');
           }}

packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss

@@ -10,7 +10,7 @@
   }
 
   .send {
-    margin-left: _.unit(1);
+    margin-left: _.unit(1.5);
     margin-bottom: 1px;
   }
 }

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -78,5 +78,9 @@
 
   .main {
     flex: 1;
+
+    .codeEditor {
+      margin-bottom: _.unit(6);
+    }
   }
 }

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -206,6 +206,7 @@ const ConnectorDetails = () => {
           </TabNav>
           <div className={styles.main}>
             <CodeEditor
+              className={styles.codeEditor}
               language="json"
               value={config}
               onChange={(value) => {
@@ -219,6 +220,7 @@ const ConnectorDetails = () => {
             <div className={detailsStyles.footerMain}>
               <Button
                 type="primary"
+                size="large"
                 title="admin_console.connector_details.save_changes"
                 isLoading={isSubmitting}
                 onClick={handleSave}

packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss

@@ -28,10 +28,16 @@ a.link {
     display: flex;
     align-items: center;
 
-    &:not(:last-child) {
+    &:not(:last-child)::after {
-      padding-right: _.unit(1);
+      content: '';
-      margin-right: _.unit(1);
+      width: 0;
+      height: 12px;
       border-right: 1px solid var(--color-border);
+      margin: 0 _.unit(1);
+    }
+
+    svg {
+      margin-right: _.unit(1);
     }
   }
 }

packages/console/src/pages/Connectors/index.tsx

@@ -60,6 +60,7 @@ const Connectors = () => {
             <Button
               title="admin_console.connectors.create"
               type="primary"
+              size="large"
               icon={<Plus />}
               onClick={() => {
                 setCreateType(ConnectorType.Social);

packages/console/src/pages/SignInExperience/index.tsx

@@ -135,6 +135,7 @@ const SignInExperience = () => {
                     <Button
                       isLoading={isSubmitting}
                       type="primary"
+                      size="large"
                       htmlType="submit"
                       title="general.save_changes"
                     />

packages/console/src/pages/UserDetails/components/UserConnectors.module.scss

@@ -19,7 +19,7 @@
   tbody {
     tr {
       td {
-        padding: _.unit(2);
+        padding: _.unit(3) _.unit(2);
         font: var(--font-body-medium);
 
         &:first-child {
@@ -53,4 +53,19 @@
       margin-left: _.unit(3);
     }
   }
+
+  .connectorId {
+    display: flex;
+    align-items: center;
+    font: var(--font-body-medium);
+    font-family: 'Roboto Mono', monospace;
+    line-height: 32px;
+
+    span {
+      max-width: 220px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }

packages/console/src/pages/UserDetails/components/UserConnectors.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Button from '@/components/Button';
+import CopyToClipboard from '@/components/CopyToClipboard';
 import TableError from '@/components/Table/TableError';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
@@ -87,6 +88,11 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
       {isLoading && <div>Loading</div>}
       {displayConnectors && (
         <table className={styles.table}>
+          <colgroup>
+            <col width="156px" />
+            <col />
+            <col width="110px" />
+          </colgroup>
           <thead>
             <tr>
               <th>{t('user_details.connectors.connectors')}</th>
@@ -102,25 +108,26 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
                 onRetry={async () => mutate(undefined, true)}
               />
             )}
-            {displayConnectors.map((connector) => (
+            {displayConnectors.map(({ id, userId = '', name, logo }) => (
-              <tr key={connector.id}>
+              <tr key={id}>
                 <td>
                   <div className={styles.connectorName}>
-                    <div>
+                    <img src={logo} />
-                      <img src={connector.logo} />
-                    </div>
                     <div className={styles.name}>
-                      <UnnamedTrans resource={connector.name} />
+                      <UnnamedTrans resource={name} />
                     </div>
                   </div>
                 </td>
-                <td>{connector.userId}</td>
+                <td className={styles.connectorId}>
+                  <span>{userId || '-'}</span>
+                  <CopyToClipboard variant="icon" value={userId} />
+                </td>
                 <td>
                   <Button
                     title="admin_console.user_details.connectors.remove"
                     type="plain"
                     onClick={() => {
-                      void handleDelete(connector.id);
+                      void handleDelete(id);
                     }}
                   />
                 </td>

packages/console/src/pages/Users/index.tsx

@@ -50,6 +50,7 @@ const Users = () => {
         <CardTitle title="users.title" subtitle="users.subtitle" />
         <Button
           title="admin_console.users.create"
+          size="large"
           type="primary"
           icon={<Plus />}
           onClick={() => {
@@ -124,7 +125,7 @@ const Users = () => {
               >
                 <td>
                   <ItemPreview
-                    title={name ?? t('users.unnamed')}
+                    title={name || t('users.unnamed')}
                     subtitle={conditionalString(username)}
                     icon={<img className={styles.avatar} src={avatar ?? getAvatarById(id)} />}
                     to={`/users/${id}`}