chore(console): reorganize console page (#3930)

2025-03-24 22:41:28 -05:00 · 2023-06-05 18:27:36 +08:00 · 2023-06-05 18:27:36 +08:00 · e6ea8fde54
commit e6ea8fde54
parent 4e3b2ce351
49 changed files with 327 additions and 221 deletions
--- a/packages/console/src/assets/images/contact-us.svg
+++ b/packages/console/src/assets/images/contact-us.svg
@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.40836 11.7417C8.37252 11.7813 8.33912 11.823 8.30836 11.8667C8.27682 11.9131 8.2516 11.9636 8.23336 12.0167C8.20933 12.0639 8.19248 12.1145 8.18336 12.1667C8.17927 12.2221 8.17927 12.2778 8.18336 12.3333C8.18054 12.4426 8.20337 12.5511 8.25002 12.65C8.28745 12.7534 8.34716 12.8473 8.42493 12.9251C8.50269 13.0029 8.59661 13.0626 8.70002 13.1C8.79978 13.1441 8.90763 13.1669 9.01669 13.1669C9.12575 13.1669 9.23361 13.1441 9.33336 13.1C9.43677 13.0626 9.53069 13.0029 9.60845 12.9251C9.68622 12.8473 9.74593 12.7534 9.78336 12.65C9.82036 12.5487 9.83734 12.4411 9.83336 12.3333C9.83399 12.2237 9.81297 12.1149 9.7715 12.0134C9.73003 11.9119 9.66893 11.8195 9.59169 11.7417C9.51422 11.6636 9.42205 11.6016 9.32051 11.5592C9.21896 11.5169 9.11003 11.4952 9.00002 11.4952C8.89001 11.4952 8.78109 11.5169 8.67954 11.5592C8.57799 11.6016 8.48583 11.6636 8.40836 11.7417ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.27291 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667ZM9.00002 4.83332C8.56091 4.83304 8.12947 4.94842 7.74911 5.16786C7.36876 5.38729 7.05291 5.70304 6.83336 6.08332C6.77306 6.17817 6.73258 6.28424 6.71434 6.39514C6.69609 6.50604 6.70048 6.61948 6.72721 6.72865C6.75395 6.83781 6.8025 6.94044 6.86993 7.03035C6.93736 7.12027 7.02228 7.19562 7.11958 7.25186C7.21689 7.30811 7.32456 7.34409 7.43613 7.35764C7.54771 7.37119 7.66086 7.36204 7.76881 7.33072C7.87675 7.29941 7.97724 7.24658 8.06423 7.17542C8.15123 7.10426 8.22293 7.01624 8.27502 6.91666C8.34844 6.78949 8.45416 6.68397 8.58148 6.61081C8.70879 6.53764 8.85318 6.49941 9.00002 6.49999C9.22104 6.49999 9.433 6.58779 9.58928 6.74407C9.74556 6.90035 9.83336 7.11231 9.83336 7.33332C9.83336 7.55434 9.74556 7.7663 9.58928 7.92258C9.433 8.07886 9.22104 8.16666 9.00002 8.16666C8.77901 8.16666 8.56705 8.25445 8.41077 8.41073C8.25449 8.56702 8.16669 8.77898 8.16669 8.99999V9.83332C8.16669 10.0543 8.25449 10.2663 8.41077 10.4226C8.56705 10.5789 8.77901 10.6667 9.00002 10.6667C9.22104 10.6667 9.433 10.5789 9.58928 10.4226C9.74556 10.2663 9.83336 10.0543 9.83336 9.83332V9.68332C10.3845 9.48334 10.8478 9.09601 11.1423 8.58905C11.4368 8.08208 11.5438 7.48773 11.4445 6.9099C11.3452 6.33206 11.046 5.8075 10.5992 5.42792C10.1523 5.04833 9.58631 4.83787 9.00002 4.83332Z" fill="#47464E"/>
+</svg>
--- a/packages/console/src/assets/images/document-nav-button.svg
+++ b/packages/console/src/assets/images/document-nav-button.svg
@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6667 6.44999C13.658 6.37344 13.6412 6.29802 13.6167 6.22499V6.14999C13.5766 6.06431 13.5232 5.98554 13.4583 5.91666L8.45834 0.916656C8.38946 0.851837 8.31069 0.798391 8.22501 0.758323H8.15001L7.88334 0.666656H2.83334C2.1703 0.666656 1.53442 0.930049 1.06558 1.39889C0.596736 1.86773 0.333344 2.50362 0.333344 3.16666V14.8333C0.333344 15.4964 0.596736 16.1322 1.06558 16.6011C1.53442 17.0699 2.1703 17.3333 2.83334 17.3333H11.1667C11.8297 17.3333 12.4656 17.0699 12.9344 16.6011C13.4033 16.1322 13.6667 15.4964 13.6667 14.8333V6.49999C13.6667 6.49999 13.6667 6.49999 13.6667 6.44999ZM8.66668 3.50832L10.825 5.66666H8.66668V3.50832ZM12 14.8333C12 15.0543 11.9122 15.2663 11.7559 15.4226C11.5997 15.5789 11.3877 15.6667 11.1667 15.6667H2.83334C2.61233 15.6667 2.40037 15.5789 2.24409 15.4226C2.08781 15.2663 2.00001 15.0543 2.00001 14.8333V3.16666C2.00001 2.94564 2.08781 2.73368 2.24409 2.5774C2.40037 2.42112 2.61233 2.33332 2.83334 2.33332H7.00001V6.49999C7.00001 6.721 7.08781 6.93297 7.24409 7.08925C7.40037 7.24553 7.61233 7.33332 7.83334 7.33332H12V14.8333Z" fill="#47464E"/>
+</svg>
--- a/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/hook.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/hook.tsx
@ -16,6 +16,7 @@ type ContactItem = {
  description: AdminConsoleKey;
  label: AdminConsoleKey;
  link: string;
+  isVisibleToCloud: boolean;
 };

 export const useContacts = (): ContactItem[] => {
@ -29,6 +30,7 @@ export const useContacts = (): ContactItem[] => {
      description: 'contact.discord.description',
      label: 'contact.discord.button',
      link: discordLink,
+      isVisibleToCloud: true,
    },
    {
      title: 'contact.github.title',
@ -36,6 +38,7 @@ export const useContacts = (): ContactItem[] => {
      description: 'contact.github.description',
      label: 'contact.github.button',
      link: githubIssuesLink,
+      isVisibleToCloud: false,
    },
    {
      title: 'contact.email.title',
@ -43,6 +46,7 @@ export const useContacts = (): ContactItem[] => {
      description: 'contact.email.description',
      label: 'contact.email.button',
      link: contactEmailLink,
+      isVisibleToCloud: true,
    },
  ];
 };
--- a/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/index.module.scss
--- a/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/Contact/ContactModal/index.tsx
@ -0,0 +1,63 @@
+import ReactModal from 'react-modal';
+
+import Button from '@/components/Button';
+import DynamicT from '@/components/DynamicT';
+import ModalLayout from '@/components/ModalLayout';
+import { isCloud } from '@/consts/cloud';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import { useContacts } from './hook';
+import * as styles from './index.module.scss';
+
+type Props = {
+  isOpen: boolean;
+  onCancel?: () => void;
+};
+
+function ContactModal({ isOpen, onCancel }: Props) {
+  const contacts = useContacts();
+
+  return (
+    <ReactModal
+      shouldCloseOnEsc
+      shouldCloseOnOverlayClick
+      isOpen={isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onCancel}
+    >
+      <ModalLayout title="contact.title" subtitle="contact.description" onClose={onCancel}>
+        <div className={styles.main}>
+          {contacts
+            .filter(({ isVisibleToCloud }) => (isCloud ? isVisibleToCloud : true))
+            .map(({ title, icon: ContactIcon, description, label, link }) => (
+              <div key={title} className={styles.row}>
+                <div className={styles.icon}>
+                  <ContactIcon />
+                </div>
+                <div className={styles.text}>
+                  <div className={styles.title}>
+                    <DynamicT forKey={title} />
+                  </div>
+                  <div className={styles.description}>
+                    <DynamicT forKey={description} />
+                  </div>
+                </div>
+                <div>
+                  <Button
+                    type="outline"
+                    title={label}
+                    to={link}
+                    className={styles.button}
+                    onClick={() => window.open(link)}
+                  />
+                </div>
+              </div>
+            ))}
+        </div>
+      </ModalLayout>
+    </ReactModal>
+  );
+}
+
+export default ContactModal;
--- a/packages/console/src/containers/AppContent/components/Topbar/Contact/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/Contact/index.tsx
@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import ContactIcon from '@/assets/images/contact-us.svg';
+import IconButton from '@/components/IconButton';
+
+import ContactModal from './ContactModal';
+
+function Contact() {
+  const [isContactOpen, setIsContactOpen] = useState(false);
+
+  return (
+    <>
+      <IconButton
+        size="medium"
+        onClick={() => {
+          setIsContactOpen(true);
+        }}
+      >
+        <ContactIcon />
+      </IconButton>
+      <ContactModal
+        isOpen={isContactOpen}
+        onCancel={() => {
+          setIsContactOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+export default Contact;
--- a/packages/console/src/containers/AppContent/components/Topbar/DocumentNavButton/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/DocumentNavButton/index.module.scss
@ -0,0 +1,42 @@
+@use '@/scss/underscore' as _;
+
+.documentNavButton {
+  display: flex;
+  align-items: center;
+  padding: _.unit(1);
+  border-radius: _.unit(2);
+  border: none;
+  background-color: transparent;
+  transition: background-color 0.2s ease-in-out;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
+
+  > :not(:last-child) {
+    margin-right: _.unit(1);
+  }
+
+  &:hover {
+    background-color: var(--color-hover-variant);
+  }
+
+  &.active {
+    background-color: var(--color-focused-variant);
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  span {
+    font: var(--font-label-2);
+    color: var(--color-text);
+  }
+}
+
+.textLink {
+  &:not(:disabled):hover {
+    text-decoration: none;
+  }
+}
--- a/packages/console/src/containers/AppContent/components/Topbar/DocumentNavButton/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/DocumentNavButton/index.tsx
@ -0,0 +1,20 @@
+import DocumentIcon from '@/assets/images/document-nav-button.svg';
+import DangerousRaw from '@/components/DangerousRaw';
+import TextLink from '@/components/TextLink';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
+
+import * as styles from './index.module.scss';
+
+function DocumentNavButton() {
+  const { documentationSiteUrl } = useDocumentationUrl();
+  return (
+    <div className={styles.documentNavButton}>
+      <DocumentIcon className={styles.icon} />
+      <TextLink href={documentationSiteUrl} target="_blank" className={styles.textLink}>
+        <DangerousRaw>Docs</DangerousRaw>
+      </TextLink>
+    </div>
+  );
+}
+
+export default DocumentNavButton;
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/SubMenu/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/SubMenu/index.module.scss
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/SubMenu/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/SubMenu/index.tsx
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/UserInfoSkeleton/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/UserInfoSkeleton/index.tsx
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/index.module.scss
@ -2,7 +2,6 @@

 .container {
  position: relative;
-  margin-left: _.unit(4);
  cursor: pointer;

  &::after {
--- a/packages/console/src/containers/AppContent/components/Topbar/UserInfo/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/UserInfo/index.tsx
@ -22,9 +22,8 @@ import useUserPreferences from '@/hooks/use-user-preferences';
 import { DynamicAppearanceMode } from '@/types/appearance-mode';
 import { onKeyDownHandler } from '@/utils/a11y';

-import SubMenu from '../SubMenu';
-import UserInfoSkeleton from '../UserInfoSkeleton';
-
+import SubMenu from './SubMenu';
+import UserInfoSkeleton from './UserInfoSkeleton';
 import * as styles from './index.module.scss';

 function UserInfo() {
--- a/packages/console/src/containers/AppContent/components/Topbar/index.module.scss
+++ b/packages/console/src/containers/AppContent/components/Topbar/index.module.scss
@ -23,4 +23,8 @@
    font: var(--font-title-2);
    color: var(--color-text);
  }
+
+  > :not(:last-child) {
+    margin-right: _.unit(4);
+  }
 }
--- a/packages/console/src/containers/AppContent/components/Topbar/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/index.tsx
@ -7,8 +7,9 @@ import Spacer from '@/components/Spacer';
 import { isCloud } from '@/consts/cloud';
 import EarlyBirdGift from '@/onboarding/components/EarlyBirdGift';

-import UserInfo from '../UserInfo';
-
+import Contact from './Contact';
+import DocumentNavButton from './DocumentNavButton';
+import UserInfo from './UserInfo';
 import * as styles from './index.module.scss';

 type Props = {
@ -30,6 +31,8 @@ function Topbar({ className }: Props) {
      )}
      <Spacer />
      {isCloud && <EarlyBirdGift />}
+      <DocumentNavButton />
+      <Contact />
      <UserInfo />
    </div>
  );
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx
@ -1,59 +0,0 @@
-import ReactModal from 'react-modal';
-
-import Button from '@/components/Button';
-import DynamicT from '@/components/DynamicT';
-import ModalLayout from '@/components/ModalLayout';
-import * as modalStyles from '@/scss/modal.module.scss';
-
-import { useContacts } from './hook';
-import * as styles from './index.module.scss';
-
-type Props = {
-  isOpen: boolean;
-  onCancel?: () => void;
-};
-
-function Contact({ isOpen, onCancel }: Props) {
-  const contacts = useContacts();
-
-  return (
-    <ReactModal
-      shouldCloseOnEsc
-      isOpen={isOpen}
-      className={modalStyles.content}
-      overlayClassName={modalStyles.overlay}
-      onRequestClose={onCancel}
-    >
-      <ModalLayout title="contact.title" subtitle="contact.description" onClose={onCancel}>
-        <div className={styles.main}>
-          {contacts.map(({ title, icon: ContactIcon, description, label, link }) => (
-            <div key={title} className={styles.row}>
-              <div className={styles.icon}>
-                <ContactIcon />
-              </div>
-              <div className={styles.text}>
-                <div className={styles.title}>
-                  <DynamicT forKey={title} />
-                </div>
-                <div className={styles.description}>
-                  <DynamicT forKey={description} />
-                </div>
-              </div>
-              <div>
-                <Button
-                  type="outline"
-                  title={label}
-                  to={link}
-                  className={styles.button}
-                  onClick={() => window.open(link)}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </ModalLayout>
-    </ReactModal>
-  );
-}
-
-export default Contact;
--- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
@ -6,19 +6,14 @@ import BarGraph from '@/assets/images/bar-graph.svg';
 import Bolt from '@/assets/images/bolt.svg';
 import Box from '@/assets/images/box.svg';
 import Connection from '@/assets/images/connection.svg';
-import ContactIcon from '@/assets/images/contact.svg';
-import Document from '@/assets/images/document.svg';
 import Hook from '@/assets/images/hook.svg';
 import List from '@/assets/images/list.svg';
 import UserProfile from '@/assets/images/profile.svg';
 import ResourceIcon from '@/assets/images/resource.svg';
 import Role from '@/assets/images/role.svg';
 import Web from '@/assets/images/web.svg';
-import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserPreferences from '@/hooks/use-user-preferences';

-import Contact from './components/Contact';
-
 type SidebarItem = {
  Icon: FC;
  title: TFuncKey<'translation', 'admin_console.tabs'>;
@ -49,7 +44,6 @@ export const useSidebarMenuItems = (): {
  const {
    data: { getStartedHidden },
  } = useUserPreferences();
-  const { documentationSiteUrl } = useDocumentationUrl();

  const sections: SidebarSection[] = [
    {
@ -85,10 +79,6 @@ export const useSidebarMenuItems = (): {
          Icon: Connection,
          title: 'connectors',
        },
-        {
-          Icon: Hook,
-          title: 'webhooks',
-        },
      ],
    },
    {
@ -102,11 +92,6 @@ export const useSidebarMenuItems = (): {
          Icon: List,
          title: 'audit_logs',
        },
-      ],
-    },
-    {
-      title: 'access_control',
-      items: [
        {
          Icon: Role,
          title: 'roles',
@ -114,17 +99,11 @@ export const useSidebarMenuItems = (): {
      ],
    },
    {
-      title: 'help_and_support',
+      title: 'automation',
      items: [
        {
-          Icon: ContactIcon,
-          title: 'contact_us',
-          modal: (isOpen, onCancel) => <Contact isOpen={isOpen} onCancel={onCancel} />,
-        },
-        {
-          Icon: Document,
-          title: 'docs',
-          externalLink: documentationSiteUrl,
+          Icon: Hook,
+          title: 'webhooks',
        },
      ],
    },
--- a/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx
+++ b/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx
@ -11,7 +11,7 @@ function EarlyBirdGift() {
  return (
    <>
      <IconButton
-        size="large"
+        size="medium"
        onClick={() => {
          setIsGiftOpen(true);
        }}
--- a/packages/phrases/src/locales/de/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Kontakt',
+  title: 'Hilfe erhalten',
  description:
-    'Tritt unserer Community bei, um Feedback zu geben, um Hilfe zu bitten und deine Gedanken mit anderen Entwicklern zu teilen',
+    'Für Hilfsanfragen oder Produktfeedback wenden Sie sich bitte über die folgenden Methoden an uns.',
  discord: {
-    title: 'Discord channel',
-    description: 'Tritt unserem öffentlichen Kanal bei, um mit anderen Entwicklern zu chatten',
+    title: 'Trete der Discord-Community bei',
+    description: 'Treten Sie unserem öffentlichen Kanal bei, um mit anderen Entwicklern zu chatten',
    button: 'Beitreten',
  },
  github: {
-    title: 'GitHub',
-    description: 'Erstelle ein Issue bei GitHub',
+    title: 'Erstelle ein GitHub-Problem',
+    description: 'Erstelle ein Problem und sende es an GitHub',
    button: 'Öffnen',
  },
  email: {
-    title: 'E-Mail senden',
-    description: 'Schick uns eine E-Mail für weitere Informationen und Hilfe',
+    title: 'Unterstützung per E-Mail kontaktieren',
+    description: 'Senden Sie uns eine E-Mail für weitere Informationen und Hilfe',
    button: 'Senden',
  },
 };
--- a/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Zugriffskontrolle',
  help_and_support: 'Hilfe und Support',
  tenant: 'Mieter',
+  automation: 'Automatisierung',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/en/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/contact.ts
@ -1,19 +1,19 @@
 const contact = {
-  title: 'Contact Us',
+  title: 'Get help',
  description:
-    'Join in our community to provide feedback, ask for help and share your thoughts with other developers',
+    'For help requests or product feedback, please contact us through the following methods.',
  discord: {
-    title: 'Discord channel',
+    title: 'Join Discord Community',
    description: 'Join our public channel to chat with other developers',
    button: 'Join',
  },
  github: {
-    title: 'GitHub',
+    title: 'Create GitHub issue',
    description: 'Create an issue and submit at GitHub',
    button: 'Open',
  },
  email: {
-    title: 'Send email',
+    title: 'Contact support via email',
    description: 'Send us an email for further information and help',
    button: 'Send',
  },
--- a/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Access Control',
  help_and_support: 'Help and Support',
  tenant: 'Tenant',
+  automation: 'Automation',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/es/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Contáctanos',
+  title: 'Obtener ayuda',
  description:
-    'Únete a nuestra comunidad para proporcionar comentarios, pedir ayuda y compartir tus ideas con otros desarrolladores',
+    'Para solicitudes de ayuda o comentarios sobre el producto, contáctenos a través de los siguientes métodos.',
  discord: {
-    title: 'Canal de Discord',
+    title: 'Únete a la comunidad de Discord',
    description: 'Únete a nuestro canal público para chatear con otros desarrolladores',
    button: 'Únete',
  },
  github: {
-    title: 'GitHub',
-    description: 'Crea un problema y envíalo en GitHub',
+    title: 'Crear problema en GitHub',
+    description: 'Crea un problema y envíalo a GitHub',
    button: 'Abrir',
  },
  email: {
-    title: 'Enviar correo electrónico',
-    description: 'Envíanos un correo electrónico para obtener más información y ayuda',
+    title: 'Contacta con soporte por correo electrónico',
+    description: 'Envíanos un correo electrónico para obtener más información y ayuda.',
    button: 'Enviar',
  },
 };
--- a/packages/phrases/src/locales/es/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Control de acceso',
  help_and_support: 'Ayuda y soporte',
  tenant: 'Inquilino',
+  automation: 'Automatización',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/fr/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/contact.ts
@ -1,20 +1,21 @@
 const contact = {
-  title: 'Nous contacter',
+  title: "Obtenir de l'aide",
  description:
-    "Participez à notre communauté pour fournir des informations, demander de l'aide et partager vos idées avec d'autres développeurs.",
+    "Pour les demandes d'aide ou les commentaires sur le produit, veuillez nous contacter par l'un des moyens suivants.",
  discord: {
-    title: 'Serveur Discord',
-    description: "Rejoignez notre serveur public pour discuter avec d'autres développeurs",
+    title: 'Rejoindre la communauté Discord',
+    description: "Rejoignez notre canal public pour discuter avec d'autres développeurs",
    button: 'Rejoindre',
  },
  github: {
-    title: 'GitHub',
-    description: 'Créer un ticket GitHub',
+    title: 'Créer un problème GitHub',
+    description: 'Créez un problème et soumettez-le sur GitHub',
    button: 'Ouvrir',
  },
  email: {
-    title: 'Envoyer un email',
-    description: "Envoyez nous un email pour plus d'information et d'aide",
+    title: 'Contacter le support par e-mail',
+    description:
+      "Envoyez-nous un e-mail pour obtenir des informations complémentaires et de l'aide",
    button: 'Envoyer',
  },
 };
--- a/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
@ -2,9 +2,10 @@ const tab_sections = {
  overview: "Vue d'ensemble",
  resource_management: 'Gestion des ressources',
  user_management: 'Gestion des utilisateurs',
-  access_control: "Contrôle d'accès", // NON TRADUIT
+  access_control: "Contrôle d'accès",
  help_and_support: 'Aide et support',
  tenant: 'Locataire',
+  automation: 'Automatisation',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/it/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/contact.ts
@ -1,22 +1,22 @@
-const contatto = {
-  title: 'Contattaci',
+const contact = {
+  title: 'Ottieni Aiuto',
  description:
-    'Unisciti alla nostra comunità per fornire feedback, chiedere aiuto e condividere le tue idee con altri sviluppatori',
+    'Per richieste di assistenza o commenti sui prodotti, contattaci tramite i seguenti metodi.',
  discord: {
-    title: 'Canale Discord',
+    title: 'Unisciti alla comunità di Discord',
    description: 'Unisciti al nostro canale pubblico per chattare con altri sviluppatori',
    button: 'Unisciti',
  },
  github: {
-    title: 'GitHub',
+    title: 'Crea problema su GitHub',
    description: 'Crea un problema e invialo su GitHub',
    button: 'Apri',
  },
  email: {
-    title: 'Invia email',
-    description: 'Invia una email per ulteriori informazioni e supporto',
+    title: 'Contattare il supporto tramite e-mail',
+    description: 'Invia una e-mail per ulteriori informazioni e assistenza',
    button: 'Invia',
  },
 };

-export default contatto;
+export default contact;
--- a/packages/phrases/src/locales/it/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Controllo Accessi',
  help_and_support: 'Aiuto e Supporto',
  tenant: 'Locatario',
+  automation: 'Automazione',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/ja/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/contact.ts
@ -1,21 +1,21 @@
 const contact = {
-  title: 'お問い合わせ',
+  title: 'ヘルプを得る',
  description:
-    'フィードバックを提供したり、助けを求めたり、他の開発者との考えを共有するために、当社コミュニティに参加してください。',
+    'ヘルプ要求または製品フィードバックについては、次の方法を使用してお問い合わせください。',
  discord: {
-    title: 'ディスコードチャンネル',
-    description: '他の開発者とチャットするために、パブリックチャンネルに参加してください。',
-    button: '参加',
+    title: 'Discord コミュニティに参加する',
+    description: '他の開発者とチャットするためにパブリックチャンネルに参加してください',
+    button: '参加する',
  },
  github: {
-    title: 'GitHub',
-    description: '問題を作成してGitHubに提出してください。',
+    title: 'GitHub issue を作成する',
+    description: '問題を作成して GitHub に提出する',
    button: '開く',
  },
  email: {
-    title: 'メール送信',
-    description: '詳細な情報やヘルプを求めるために、私たちにメールを送信してください。',
-    button: '送信',
+    title: 'メールでサポートに連絡する',
+    description: '詳細情報やヘルプをご希望の場合は、私たちにメッセージを送ってください',
+    button: '送信する',
  },
 };

--- a/packages/phrases/src/locales/ja/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'アクセス制御',
  help_and_support: 'ヘルプとサポート',
  tenant: 'テナント',
+  automation: 'オートメーション',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/ko/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/contact.ts
@ -1,20 +1,19 @@
 const contact = {
-  title: '연락처',
-  description:
-    '커뮤니티에 참여하여 피드백을 제공하고 도움을 요청하며 다른 개발자와 생각을 공유해 보세요.',
+  title: '지원 받기',
+  description: '도움 요청 또는 제품 피드백을 위해서, 아래의 방법을 통해 저희에게 문의해주세요.',
  discord: {
-    title: 'Discord 채널',
-    description: '공개 채널에 참여하여 다른 개발자와 채팅해 보세요.',
-    button: '참가',
+    title: '디스코드 커뮤니티 가입하기',
+    description: '다른 개발자들과 함께 채팅할 수 있는 공개 채널에서 저희와 함께해주세요.',
+    button: '가입하기',
  },
  github: {
-    title: 'GitHub',
-    description: 'GitHub에서 이슈를 생성해 보세요.',
+    title: 'GitHub 이슈 생성하기',
+    description: '이슈를 생성하고 GitHub에 제출해주세요.',
    button: '열기',
  },
  email: {
-    title: '이메일 보내기',
-    description: '추가 정보 및 도움말을 보려면 이메일을 보내 주세요.',
+    title: '이메일로 지원팀과 연락하기',
+    description: '더 많은 정보나 도움을 위해 이메일을 보내주세요.',
    button: '보내기',
  },
 };
--- a/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: '접근 제어',
  help_and_support: '고객센터',
  tenant: '세입자',
+  automation: '자동화',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Skontaktuj się z nami',
+  title: 'Zdobądź pomoc',
  description:
-    'Dołącz do naszej społeczności, żeby dać opinię, poprosić o pomoc i podzielić się swoimi myślami z innymi developerami',
+    'W przypadku żądań pomocy lub opinii na temat produktu, skontaktuj się z nami za pomocą następujących metod.',
  discord: {
-    title: 'Kanał Discord',
-    description: 'Dołącz do naszego publicznego kanału, żeby rozmawiać z innymi developerami',
+    title: 'Dołącz do społeczności Discorda',
+    description: 'Dołącz do naszego kanału publicznego, aby porozmawiać z innymi programistami',
    button: 'Dołącz',
  },
  github: {
-    title: 'GitHub',
-    description: 'Utwórz problem i wyślij na GitHub',
+    title: 'Utwórz problem w GitHub',
+    description: 'Utwórz problem i zgłoś w GitHub',
    button: 'Otwórz',
  },
  email: {
-    title: 'Wyślij e-mail',
-    description: 'Wyślij nam e-maila dla dalszych informacji i pomocy',
+    title: 'Skontaktuj się z pomocą techniczną przez e-mail',
+    description: 'Wyślij do nas e-maila w celu uzyskania dalszych informacji i pomocy',
    button: 'Wyślij',
  },
 };
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Kontrola dostępu',
  help_and_support: 'Pomoc i wsparcie',
  tenant: 'Najemca',
+  automation: 'Automatyzacja',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Contate-nos',
+  title: 'Obter ajuda',
  description:
-    'Junte-se à nossa comunidade para fornecer feedback, pedir ajuda e compartilhar suas ideias com outros desenvolvedores',
+    'Para solicitações de ajuda ou feedback do produto, entre em contato conosco pelos seguintes métodos.',
  discord: {
-    title: 'Canal do Discord',
+    title: 'Participe da comunidade do Discord',
    description: 'Junte-se ao nosso canal público para conversar com outros desenvolvedores',
-    button: 'Entrar',
+    button: 'Participar',
  },
  github: {
-    title: 'GitHub',
-    description: 'Crie uma issue e envie no GitHub',
+    title: 'Criar problema no GitHub',
+    description: 'Crie um problema e envie no GitHub',
    button: 'Abrir',
  },
  email: {
-    title: 'Enviar email',
-    description: 'Envie-nos um e-mail para mais informações e ajuda',
+    title: 'Entre em contato com o suporte via email',
+    description: 'Envie um email para obter mais informações e ajuda',
    button: 'Enviar',
  },
 };
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Controle de acesso',
  help_and_support: 'Ajuda e suporte',
  tenant: 'Locatário',
+  automation: 'Automação',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Contate-nos',
+  title: 'Obter ajuda',
  description:
-    'Junte-se à nossa comunidade para fornecer feedback, pedir ajuda e compartilhar pensamentos com outros desenvolvedores',
+    'Para solicitações de ajuda ou feedback do produto, entre em contato conosco através dos seguintes métodos.',
  discord: {
-    title: 'Discord',
+    title: 'Participar da comunidade Discord',
    description: 'Junte-se ao nosso canal público para conversar com outros desenvolvedores',
-    button: 'Juntar',
+    button: 'Entrar',
  },
  github: {
-    title: 'GitHub',
-    description: 'Crie um issue e submeta no GitHub',
+    title: 'Criar problema no GitHub',
+    description: 'Crie um problema e envie no GitHub',
    button: 'Abrir',
  },
  email: {
-    title: 'Enviar email',
-    description: 'Envie-nos um email para mais informações e ajuda',
+    title: 'Contato com suporte via e-mail',
+    description: 'Envie-nos um e-mail para obter mais informações e ajuda',
    button: 'Enviar',
  },
 };
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Controlo de acesso',
  help_and_support: 'Ajuda e suporte',
  tenant: 'Arrendatário',
+  automation: 'Automação',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/ru/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: 'Связаться с нами',
+  title: 'Получить помощь',
  description:
-    'Присоединяйтесь к нашему сообществу, чтобы оставлять отзывы, задавать вопросы и делиться своими мыслями с другими разработчиками',
+    'Для запросов на помощь и отзывов о продукте, свяжитесь с нами через следующие методы.',
  discord: {
-    title: 'Канал Discord',
+    title: 'Присоединяйтесь к Discord-сообществу',
    description:
-      'Присоединяйтесь к нашему общественному каналу, чтобы общаться с другими разработчиками',
+      'Присоединяйтесь к нашему открытому каналу, чтобы общаться с другими разработчиками',
    button: 'Присоединиться',
  },
  github: {
-    title: 'GitHub',
-    description: 'Создайте проблему и отправьте на GitHub',
+    title: 'Создать проблему в GitHub',
+    description: 'Создайте проблему и отправьте запрос в службу поддержки',
    button: 'Открыть',
  },
  email: {
-    title: 'Отправить электронное письмо',
+    title: 'Связаться с поддержкой по электронной почте',
    description:
      'Отправьте нам электронное письмо для получения дополнительной информации и помощи',
    button: 'Отправить',
--- a/packages/phrases/src/locales/ru/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Управление доступом',
  help_and_support: 'Помощь и поддержка',
  tenant: 'Арендатор',
+  automation: 'Автоматизация',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/contact.ts
@ -1,21 +1,21 @@
 const contact = {
-  title: 'Bizimle iletişime geçin',
+  title: 'Yardım alın',
  description:
-    'Geri bildirim sağlamak, yardım istemek ve düşüncelerinizi diğer geliştiricilerle paylaşmak için topluluğumuza katılın',
+    'Yardım istekleri veya ürün geribildirimleri için lütfen aşağıdaki yöntemlerle bizimle iletişime geçin.',
  discord: {
-    title: 'Discord kanalı',
-    description: 'Diğer geliştiricilerle sohbet etmek için herkese açık kanalımıza katılın',
+    title: 'Discord Topluluğuna Katılın',
+    description: 'Diğer geliştiricilerle sohbet etmek için genel kanalımıza katılın',
    button: 'Katıl',
  },
  github: {
-    title: 'GitHub',
-    description: "Bir issue oluşturun ve GitHub'da gönderin",
-    button: 'Aç',
+    title: 'GitHub sorunu oluşturun',
+    description: "Bir problem oluşturun ve GitHub'da gönderin",
+    button: 'Açık',
  },
  email: {
-    title: 'Eposta Gönder',
-    description: 'Daha fazla bilgi ve yardım için bize bir e-posta gönderin',
-    button: 'Gönder',
+    title: 'E-posta ile destek iletişimi',
+    description: 'Daha fazla bilgi ve yardım için bize e-posta gönderin',
+    button: 'Send',
  },
 };

--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: 'Erişim Kontrolü',
  help_and_support: 'Yardım ve Destek',
  tenant: 'Kiracı',
+  automation: 'Otomasyon',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: '联系我们',
-  description: '加入我们的社区，在这里你可以给我们提供产品建议，寻求帮助或和其他开发者交流心得',
+  title: '获取帮助',
+  description: '有关帮助请求或产品反馈，请通过以下方式与我们联系。',
  discord: {
-    title: 'Discord 频道',
-    description: '加入我们的公共频道，和其他开发者一起交流使用经验',
-    button: '立即加入',
+    title: '加入 Discord 社区',
+    description: '加入我们的公共频道与其他开发人员聊天',
+    button: '加入',
  },
  github: {
-    title: 'GitHub',
-    description: '通过 GitHub 给我们提一个 issue',
-    button: '前往页面',
+    title: '创建 GitHub 问题',
+    description: '创建问题并在 GitHub 提交',
+    button: '打开',
  },
  email: {
-    title: '邮件联系',
-    description: '通过邮件联系获取信息或寻求帮助',
-    button: '发送邮件',
+    title: '通过邮件联系支持',
+    description: '发送电子邮件以获取更多信息和帮助',
+    button: '发送',
  },
 };

--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: '访问控制',
  help_and_support: '帮助与支持',
  tenant: '租户',
+  automation: '自动化',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: '聯繫我們',
-  description: '加入我們的社區，在這裡你可以給我們提供產品建議，尋求幫助或和其他開發者交流心得',
+  title: '獲得幫助',
+  description: '欲查詢幫助或提供產品反饋，請透過以下方式聯絡我們。',
  discord: {
-    title: 'Discord 頻道',
-    description: '加入我們的公共頻道，和其他開發者一起交流使用經驗',
-    button: '立即加入',
+    title: '加入 Discord 社群',
+    description: '加入我們的公開頻道與其他開發者聊天',
+    button: '加入',
  },
  github: {
-    title: 'GitHub',
-    description: '通過 GitHub 給我們提一個 issue',
-    button: '前往頁面',
+    title: '建立 GitHub issue',
+    description: '建立問題並提交到 GitHub',
+    button: '打開',
  },
  email: {
-    title: '郵件聯繫',
-    description: '通過郵件聯繫獲取信息或尋求幫助',
-    button: '發送郵件',
+    title: '透過電子郵件聯絡客服支援',
+    description: '發送電子郵件以獲取進一步信息和幫助',
+    button: '發送',
  },
 };

--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: '訪問控制',
  help_and_support: '幫助與支援',
  tenant: '租戶',
+  automation: '自動化',
 };

 export default tab_sections;
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/contact.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/contact.ts
@ -1,20 +1,20 @@
 const contact = {
-  title: '聯繫我們',
-  description: '加入我們的社群，在這裡您可以提供產品建議、尋求幫助或和其他開發者交流心得',
+  title: '取得協助',
+  description: '若需協助申請或產品反饋，請透過下列方法與我們聯繫。',
  discord: {
-    title: 'Discord 頻道',
-    description: '加入我們的公共頻道，和其他開發者一起交流使用經驗',
-    button: '立即加入',
+    title: '加入 Discord 社群',
+    description: '進入我們的公開頻道與其他開發人員聊天',
+    button: '加入',
  },
  github: {
-    title: 'GitHub',
-    description: '透過 GitHub 給我們提一個 issue',
-    button: '前往頁面',
+    title: '建立 GitHub 異常問題單',
+    description: '建立異常問題單，在 GitHub 上提交',
+    button: '開啟',
  },
  email: {
-    title: '郵件聯繫',
-    description: '透過郵件聯繫獲取資訊或尋求幫助',
-    button: '發送郵件',
+    title: '透過電子郵件聯繫支援',
+    description: '發送電子郵件以獲得更多資訊和協助',
+    button: '發送',
  },
 };

--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/tab-sections.ts
@ -5,6 +5,7 @@ const tab_sections = {
  access_control: '訪問控制',
  help_and_support: '幫助與支持',
  tenant: '租戶',
+  automation: '自動化',
 };

 export default tab_sections;