[feature] Add note to missing Open-Source stats; Rework Note component per makets

2026-02-10 18:05:07 +08:00 · 2025-11-30 18:18:20 +03:00
parent ae27abdfe1
commit b75c3087f2
4 changed files with 44 additions and 33 deletions
--- a/AdminPanel/client/src/components/Note/Note.js
+++ b/AdminPanel/client/src/components/Note/Note.js
@ -13,11 +13,10 @@ function Note({type = 'note', children}) {
      title: 'Note',
      className: styles.note,
      icon: (
-        <svg className={styles.icon} width='24' height='24' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='#FF6F3D' strokeWidth='2' />
-          <path d='M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z' fill='#FF6F3D' />
+        <svg className={styles.icon} width='16' height='16' viewBox='0 0 16 16' fill='none'>
+          <circle cx='8' cy='8' r='7.25' stroke='#FF6F3D' strokeWidth='1.5' />
          <path
-            d='M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z'
+            d='M8.25 6.5C8.66421 6.5 9 6.83579 9 7.25V11H9.75C10.1642 11 10.5 11.3358 10.5 11.75C10.5 12.1642 10.1642 12.5 9.75 12.5H8.25C7.83579 12.5 7.5 12.1642 7.5 11.75V8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.83579 6.33579 6.5 6.75 6.5H8.25ZM8 3.5C8.55228 3.5 9 3.94772 9 4.5C9 5.05228 8.55228 5.5 8 5.5C7.44772 5.5 7 5.05228 7 4.5C7 3.94772 7.44772 3.5 8 3.5Z'
            fill='#FF6F3D'
          />
        </svg>
@ -27,17 +26,16 @@ function Note({type = 'note', children}) {
      title: 'Warning',
      className: styles.warning,
      icon: (
-        <svg className={styles.icon} width='24' height='24' viewBox='0 0 24 24' fill='none'>
+        <svg className={styles.icon} width='16' height='16' viewBox='0 0 16 16' fill='none'>
          <path
-            d='M10.5 4C11.1667 3 12.8333 3 13.5 4L21 17C21.6667 18 21 19.5 19.6667 19.5H5.33333C4 19.5 3.33333 18 4 17L10.5 4Z'
+            d='M5.876 2.733C6.8932 0.756 9.6068 0.756 10.624 2.733L14.9258 11.095C15.857 12.905 14.6646 15.25 12.5508 15.25H3.9482C1.8348 15.25 0.6431 12.905 1.5742 11.095L5.876 2.733Z'
            stroke='#CB0000'
-            strokeWidth='2'
+            strokeWidth='1.5'
          />
          <path
-            d='M12 8C12.5523 8 13 8.44772 13 9V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V9C11 8.44772 11.4477 8 12 8Z'
+            d='M8.25 7.5C8.66421 7.5 9 7.83579 9 8.25V12H9.75C10.1642 12 10.5 12.3358 10.5 12.75C10.5 13.1642 10.1642 13.5 9.75 13.5H8.25C7.83579 13.5 7.5 13.1642 7.5 12.75V9H6.75C6.33579 9 6 8.66421 6 8.25C6 7.83579 6.33579 7.5 6.75 7.5H8.25ZM8 4.5C8.55228 4.5 9 4.94772 9 5.5C9 6.05228 8.55228 6.5 8 6.5C7.44772 6.5 7 6.05228 7 5.5C7 4.94772 7.44772 4.5 8 4.5Z'
            fill='#CB0000'
          />
-          <circle cx='12' cy='16.5' r='1' fill='#CB0000' />
        </svg>
      )
    },
@ -45,13 +43,9 @@ function Note({type = 'note', children}) {
      title: 'Tip',
      className: styles.tip,
      icon: (
-        <svg className={styles.icon} width='24' height='24' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='#007B14' strokeWidth='2' />
-          <path d='M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z' fill='#007B14' />
-          <path
-            d='M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z'
-            fill='#007B14'
-          />
+        <svg className={styles.icon} width='16' height='16' viewBox='0 0 16 16' fill='none'>
+          <circle cx='8' cy='8' r='7.25' stroke='#007B14' strokeWidth='1.5' />
+          <path d='M4.66667 8L6.66667 10L11.3333 5.33333' stroke='#007B14' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
        </svg>
      )
    },
@ -59,11 +53,10 @@ function Note({type = 'note', children}) {
      title: 'Important',
      className: styles.important,
      icon: (
-        <svg className={styles.icon} width='24' height='24' viewBox='0 0 24 24' fill='none'>
-          <rect x='2' y='2' width='20' height='20' rx='2' stroke='#262BA5' strokeWidth='2' />
-          <path d='M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z' fill='#262BA5' />
+        <svg className={styles.icon} width='16' height='16' viewBox='0 0 16 16' fill='none'>
+          <rect x='1.25' y='1.25' width='13.5' height='13.5' rx='1.75' stroke='#262BA5' strokeWidth='1.5' />
          <path
-            d='M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z'
+            d='M8.25 7.5C8.66421 7.5 9 7.83579 9 8.25V12H9.75C10.1642 12 10.5 12.3358 10.5 12.75C10.5 13.1642 10.1642 13.5 9.75 13.5H8.25C7.83579 13.5 7.5 13.1642 7.5 12.75V9H6.75C6.33579 9 6 8.66421 6 8.25C6 7.83579 6.33579 7.5 6.75 7.5H8.25ZM8 4.5C8.55228 4.5 9 4.94772 9 5.5C9 6.05228 8.55228 6.5 8 6.5C7.44772 6.5 7 6.05228 7 5.5C7 4.94772 7.44772 4.5 8 4.5Z'
            fill='#262BA5'
          />
        </svg>
--- a/AdminPanel/client/src/components/Note/Note.module.scss
+++ b/AdminPanel/client/src/components/Note/Note.module.scss
@ -27,8 +27,8 @@

 /* Icon styling */
 .icon {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
  flex: none;
  order: 0;
  flex-grow: 0;
@ -39,7 +39,7 @@
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
-  font-size: 16px;
+  font-size: 18px;
  line-height: 130%;
  display: flex;
  align-items: center;
--- a/AdminPanel/client/src/pages/Statistics/index.js
+++ b/AdminPanel/client/src/pages/Statistics/index.js
@ -4,6 +4,7 @@ import TopBlock from './TopBlock/index';
 import InfoTable from './InfoTable/index';
 import ModeSwitcher from './ModeSwitcher';
 import MonthlyStatistics from './MonthlyStatistics';
+import Note from '../../components/Note/Note';
 import styles from './styles.module.css';
 import {fetchStatistics, fetchConfiguration} from '../../api';

@ -237,8 +238,9 @@ export default function Statistics() {
    return <div>Please, wait...</div>;
  }

-  return (
-    <div>
+  // Common header blocks
+  const headerBlocks = (
+    <>
      <div className={styles.topRow}>
        {buildBlock}
        {licenseBlock}
@ -246,16 +248,28 @@ export default function Statistics() {
      </div>

      {renderDatabaseBlock(configData?.services?.CoAuthoring?.sql)}
+    </>
+  );

-      {!isOpenSource && (
-        <>
-          <ModeSwitcher mode={mode} setMode={setMode} />
+  // Content based on license type
+  const statisticsContent = isOpenSource ? (
+    <div className={styles.noteWrapper}>
+      <Note type='note'>Connection and unique user statistics are only available in the Enterprise Edition or the Developer Edition.</Note>
+    </div>
+  ) : (
+    <>
+      <ModeSwitcher mode={mode} setMode={setMode} />

-          {currentTable}
-          {peaksAverage}
-          {isUsersModel && <MonthlyStatistics byMonth={quota?.byMonth} mode={mode} />}
-        </>
-      )}
+      {currentTable}
+      {peaksAverage}
+      {isUsersModel && <MonthlyStatistics byMonth={quota?.byMonth} mode={mode} />}
+    </>
+  );
+
+  return (
+    <div>
+      {headerBlocks}
+      {statisticsContent}
    </div>
  );
 }
--- a/AdminPanel/client/src/pages/Statistics/styles.module.css
+++ b/AdminPanel/client/src/pages/Statistics/styles.module.css
@ -25,3 +25,7 @@
 .current {
  font-weight: 700;
 }
+
+.noteWrapper {
+  margin-top: 24px;
+}