Add empty enums illustration

src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx

@@ -4,6 +4,7 @@ import { IconPlus } from "@douyinfe/semi-icons";
 import { useTranslation } from "react-i18next";
 import SearchBar from "./SearchBar";
 import EnumDetails from "./EnumDetails";
+import Empty from "../Empty";
 
 export default function EnumsTab() {
   const { enums, addEnum } = useEnums();
@@ -19,22 +20,26 @@ export default function EnumsTab() {
           </Button>
         </div>
       </div>
-      <Collapse accordion>
+      {enums.length <= 0 ? (
-        {enums.map((e, i) => (
+        <Empty title={t("no_enums")} text={t("no_enums_text")} />
-          <Collapse.Panel
+      ) : (
-            key={`enum_${i}`}
+        <Collapse accordion>
-            id={`scroll_enum_${i}`}
+          {enums.map((e, i) => (
-            header={
+            <Collapse.Panel
-              <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+              key={`enum_${i}`}
-                {e.name}
+              id={`scroll_enum_${i}`}
-              </div>
+              header={
-            }
+                <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            itemKey={`${i}`}
+                  {e.name}
-          >
+                </div>
-            <EnumDetails data={e} i={i} />
+              }
-          </Collapse.Panel>
+              itemKey={`${i}`}
-        ))}
+            >
-      </Collapse>
+              <EnumDetails data={e} i={i} />
+            </Collapse.Panel>
+          ))}
+        </Collapse>
+      )}
     </div>
   );
 }

src/i18n/locales/en.js

@@ -223,6 +223,8 @@ const en = {
     enum_w_no_name: "Found enum with no name",
     enum_w_no_values: "Found enum '{{enumName}}' with no values",
     duplicate_enums: "Duplicate enums with the name '{{enumName}}'",
+    no_enums: "No enums",
+    no_enums_text: "Define enums here",
   },
 };