@gisce/react-ooui 1.2.0-rc.7 → 1.2.0-rc.71

package/src/index.ts

@@ -37,6 +37,7 @@ import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
 import { Tags } from "@/widgets/custom/Tags";
+import { Tag } from "@/widgets/custom/Tag";
 import { MultiCheckbox } from "./widgets/custom/MultiCheckbox";
 import { Radio } from "@/widgets/custom/Radio";
 import { Switch } from "@/widgets/custom/Switch";
@@ -145,6 +146,7 @@ export {
   DashboardGridItem,
   DashboardGrid,
   Tags,
+  Tag,
   MultiCheckbox,
   Radio,
   Switch,

package/src/locales/ca_ES.tsx

@@ -88,4 +88,6 @@ export default {
   selectAtLeastOneField: "Selecciona almenys un camp per a l'exportació",
   printScreen: "Imprimir pantalla",
   advancedExport: "Exportació avançada",
+  savedRegisters: "Registre guardat correctament",
+  errorWhileSavingForm: "Error en guardar el formulari",
 };

package/src/locales/en_US.tsx

@@ -85,4 +85,6 @@ export default {
   selectAtLeastOneField: "Select at least one field for the export",
   printScreen: "Print screen",
   advancedExport: "Advanced export",
+  savedRegisters: "Record successfully saved",
+  errorWhileSavingForm: "Error while saving form",
 };

package/src/locales/es_ES.tsx

@@ -89,4 +89,6 @@ export default {
   selectAtLeastOneField: "Selecciona al menos un campo para la exportación",
   printScreen: "Imprimir pantalla",
   advancedExport: "Exportación avanzada",
+  savedRegisters: "Registro guardado correctamente",
+  errorWhileSavingForm: "Error al guardar el formulario",
 };

package/src/stories/Label.stories.tsx

@@ -12,7 +12,7 @@ export default {
 export const Default = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
-    string: "Lorem ipsum",
+    string: "<b>Lorem ipsum</b>",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -25,7 +25,7 @@ export const LabelSecondary = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'secondary'}"
+    widget_props: "{'label_type': 'secondary'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -38,7 +38,7 @@ export const LabelWaning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'warning'}"
+    widget_props: "{'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -51,7 +51,7 @@ export const LabelDanger = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'danger'}"
+    widget_props: "{'label_type': 'danger'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -64,7 +64,7 @@ export const LabelSuccess = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'success'}"
+    widget_props: "{'label_type': 'success'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -73,12 +73,11 @@ export const LabelSuccess = (): React.ReactElement => {
   );
 };
 
-
 export const LabelH1 = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1'}"
+    widget_props: "{'label_size': 'h1'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -91,7 +90,7 @@ export const LabelH2Warning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1', 'label_type': 'warning'}"
+    widget_props: "{'label_size': 'h1', 'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">

package/src/stories/Separator.stories.tsx

@@ -19,3 +19,36 @@ export const Default = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const WithoutText = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};
+
+export const OnlyIcon = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};
+
+export const WithIcon = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+    string: "General",
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/containers/Group.stories.tsx

@@ -61,3 +61,27 @@ export const Default = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const WithIcon = (): React.ReactElement => {
+  const ooui = new GroupOoui({
+    string: "General",
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Group ooui={ooui} />
+    </LocaleProvider>
+  );
+};
+
+
+export const OnlyIcon = (): React.ReactElement => {
+  const ooui = new GroupOoui({
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Group ooui={ooui} />
+    </LocaleProvider>
+  );
+};

package/src/stories/containers/Notebook.stories.tsx

@@ -167,3 +167,30 @@ export const IconTabs = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+
+export const IconTablerTabs = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook">
+      <page string="Home" icon="bolt">
+        <field name="name" />
+      </page>
+      <page string="Attributes" icon="address-book">
+        <field name="surname" />
+      </page>
+    </notebook>
+  </form>`;
+
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};

package/src/stories/custom/Tag.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { Tag as TagOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+import { TagInput } from "../../widgets/custom/Tag";
+
+export default {
+  title: "Components/Widgets/Custom/Tag",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": {"draft": "blue", "open": "green"}}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithoutColor = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithColorAuto = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": "auto"}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};

package/src/stories/mocks/models/crm_case.ts

@@ -39,13 +39,14 @@ export default {
     task_id: false,
     user_id: [1, "Administrator"],
     workdones_ids: [],
+    integer: 40003.23,
   },
   form: {
-    arch:
-      '<form string="Casos">\n       <group col="8" colspan="4">\n                                <field colspan="4" name="partner_id" on_change="onchange_partner_id(partner_id, email_from)" select="1"/>\n                                <field colspan="3" name="partner_address_id" on_change="onchange_partner_address_id(partner_address_id, email_from)" select="2"/>\n                             \n                                <field colspan="3" name="email_from" select="2"/>\n                                <button name="remind_partner" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                                <field name="user_id" select="1" domain="[(\'id\',\'!=\', 0)]"/>\n                                <button name="autoassign" string="Assigna-me\'l" type="object"/>\n                                <button name="remind_user" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                            </group><field name="state" select="1"/></form>',
+    arch: '<form string="Casos">\n      <field name="integer" /> <group col="8" colspan="4">\n                                <field colspan="4" name="partner_id" on_change="onchange_partner_id(partner_id, email_from)" select="1"/>\n                                <field colspan="3" name="partner_address_id" on_change="onchange_partner_address_id(partner_address_id, email_from)" select="2"/>\n                             \n                                <field colspan="3" name="email_from" select="2"/>\n                                <button name="remind_partner" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                                <field name="user_id" select="1" domain="[(\'id\',\'!=\', 0)]"/>\n                                <button name="autoassign" string="Assigna-me\'l" type="object"/>\n                                <button name="remind_user" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                            </group><field name="state" select="1"/></form>',
 
     field_parent: false,
     fields: {
+      integer: { string: "Integer", type: "integer" },
       active: { string: "Actiu", type: "boolean", views: {} },
       canal_id: {
         context: "",
@@ -138,8 +139,7 @@ export default {
         type: "one2many",
         views: {
           form: {
-            arch:
-              '<form string="Historial de comunicaci&#xF3;">\n                                    <group col="6" colspan="4">\n                                        <field name="date" select="1"/>\n                                        <field name="email" select="1"/>\n                                        <field name="canal_id" select="2"/>\n                                    </group>\n                                    <newline/>\n                                    <field colspan="4" name="description" nolabel="1" select="2"/>\n                                </form>\n                                ',
+            arch: '<form string="Historial de comunicaci&#xF3;">\n                                    <group col="6" colspan="4">\n                                        <field name="date" select="1"/>\n                                        <field name="email" select="1"/>\n                                        <field name="canal_id" select="2"/>\n                                    </group>\n                                    <newline/>\n                                    <field colspan="4" name="description" nolabel="1" select="2"/>\n                                </form>\n                                ',
             fields: {
               canal_id: {
                 context: "",
@@ -160,8 +160,7 @@ export default {
             },
           },
           tree: {
-            arch:
-              '<tree string="Historial de comunicaci&#xF3;">\n                                    <field name="note"/>\n                                </tree>\n                            ',
+            arch: '<tree string="Historial de comunicaci&#xF3;">\n                                    <field name="note"/>\n                                </tree>\n                            ',
             fields: {
               note: {
                 digits: [16, 2],
@@ -185,8 +184,7 @@ export default {
         type: "one2many",
         views: {
           form: {
-            arch:
-              '<form string="Accions">\n                                    <separator colspan="4" string="Informaci\u00f3 de l\'acci\u00f3"/>\n                                    <field colspan="4" name="name"/>\n                                    <field name="date" select="2"/>\n                                    <field name="fefe_id" select="2"/>\n                                    <field name="som" select="2"/>\n                                    <field name="canal_id"/>\n                                </form>\n                            ',
+            arch: '<form string="Accions">\n                                    <separator colspan="4" string="Informaci\u00f3 de l\'acci\u00f3"/>\n                                    <field colspan="4" name="name"/>\n                                    <field name="date" select="2"/>\n                                    <field name="fefe_id" select="2"/>\n                                    <field name="som" select="2"/>\n                                    <field name="canal_id"/>\n                                </form>\n                            ',
             fields: {
               canal_id: {
                 context: "",
@@ -389,8 +387,7 @@ export default {
         type: "one2many",
         views: {
           tree: {
-            arch:
-              '<tree editable="top">\n                                <field name="date"/>\n                                <field name="type_id"/>\n                                <field name="hours" sum="Time spent" widget="float_time"/>\n                          \n                                <field name="name"/>    \n                            </tree>\n                        ',
+            arch: '<tree editable="top">\n                                <field name="date"/>\n                                <field name="type_id"/>\n                                <field name="hours" sum="Time spent" widget="float_time"/>\n                          \n                                <field name="name"/>    \n                            </tree>\n                        ',
             fields: {
               date: { string: "Data", type: "datetime", views: {} },
               hours: { string: "Temps dedicat", type: "float", views: {} },

package/src/stories/views/Tree.stories.jsx

@@ -30,7 +30,7 @@ Default.args = {
       lang: false,
       name: "AGRI ENERGIA ELECTRICA, S.A.",
       ref: "0112",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 100,
     },
@@ -41,7 +41,7 @@ Default.args = {
       lang: false,
       name: "Agrolait",
       ref: false,
-      title: false,
+      title: "ltd",
       numeric: 30.1,
       progressbar: 70.434331,
     },
@@ -85,14 +85,14 @@ Default.args = {
       lang: false,
       name: "Aragón",
       ref: "02",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 20.01,
     },
   ],
   treeView: {
     arch:
-      '<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>',
+      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
     fields: {
       progressbar: {
         string: "Progress bar",
@@ -149,7 +149,7 @@ Default.args = {
       },
       title: {
         selection: [
-          ["Corp.", "Corp."],
+          ["corp", "Corp."],
           ["ltd", "Ltd"],
           ["", ""],
         ],

package/src/types/index.ts

@@ -224,6 +224,7 @@ type EvalDomainRequest = {
   domain: string;
   values: any;
   context?: any;
+  fields?: any;
 };
 
 type IsShortcutFavoriteOptions = {

package/src/ui/FavouriteButton.tsx

@@ -55,7 +55,7 @@ const FavouriteButton = (props: Props) => {
   const [shortcuts, setShortcuts] = useState<ShortcutApi[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentShortcutId, setCurrentShortcutId] = useState<number>();
-  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const { t } = (useContext(LocaleContext) as LocaleContextType) || {};
 
   const tabManagerContext = useContext(
     TabManagerContext
@@ -150,10 +150,10 @@ const FavouriteButton = (props: Props) => {
     <Menu onClick={handleMenuClick}>
       <div style={{ width: 300, padding: 5, display: "flex" }}>
         <div style={{ paddingLeft: 15, color: "#ccc" }}>
-          {t("favorites").toUpperCase()}
+          {t?.("favorites").toUpperCase()}
         </div>
         <div style={{ flexGrow: 1, paddingLeft: 10 }}>
-          <Tooltip title={t("edit_favorites")}>
+          <Tooltip title={t?.("edit_favorites")}>
             <EditOutlined
               style={{ color: "#1890FF", cursor: "pointer" }}
               onClick={editFavourites}
@@ -177,7 +177,7 @@ const FavouriteButton = (props: Props) => {
         </>
       ) : (
         <div style={{ width: 300, padding: 5, paddingLeft: 15 }}>
-          {t("no_favorites")}
+          {t?.("no_favorites")}
         </div>
       )}
     </Menu>

package/src/views/RootView.tsx

@@ -250,6 +250,7 @@ function RootView(props: RootViewProps, ref: any) {
             fields,
             values: { ...values, ...globalValues },
           }),
+          fields,
           context: { ...rootContext, ...parsedContext },
         })
       : [];
@@ -437,6 +438,11 @@ function RootView(props: RootViewProps, ref: any) {
         },
       });
     } else {
+      const formattedInitialView =
+        initialView && Array.isArray(initialView.id)
+          ? { ...initialView, id: initialView.id[0] }
+          : initialView;
+
       addNewTab({
         title,
         action: {
@@ -454,7 +460,7 @@ function RootView(props: RootViewProps, ref: any) {
             context={{ ...rootContext, ...context }}
             domain={domain}
             setCanWeClose={registerViewCloseFn}
-            initialView={initialView}
+            initialView={formattedInitialView}
             res_id={res_id}
             formDefaultValues={values}
             formForcedValues={forced_values}

package/src/views/actionViews/GraphActionView.tsx

@@ -113,6 +113,7 @@ export const GraphActionView = (props: GraphActionViewProps) => {
           formView.search_fields,
           treeView.search_fields,
         ])}
+        formXml={formView.arch}
         limit={limit!}
         onClear={clear}
         offset={offset}

package/src/views/actionViews/TreeActionView.tsx

@@ -2,7 +2,11 @@ import TreeActionBar from "@/actionbar/TreeActionBar";
 import { FormView, TreeView, View } from "@/types";
 import TitleHeader from "@/ui/TitleHeader";
 import SearchTree from "@/widgets/views/SearchTree";
-import React from "react";
+import React, { useContext } from "react";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
 
 export type TreeActionViewProps = {
   formView?: FormView;
@@ -38,6 +42,10 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     searchTreeNameSearch,
   } = props;
 
+  const { currentView, setPreviousView } = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+
   if (!visible) {
     return null;
   }
@@ -66,6 +74,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
           const itemIndex = results.findIndex((item: any) => {
             return item.id === id;
           });
+          setPreviousView?.(currentView);
           setCurrentItemIndex(itemIndex);
           const formView = availableViews.find(
             (v) => v.type === "form"

package/src/widgets/WidgetFactory.tsx

@@ -29,6 +29,7 @@ import {
   Radio,
   Switch,
   Steps,
+  Tag,
   CodeEditor,
 } from "@/index";
 import { Image } from "./base/Image";
@@ -99,6 +100,8 @@ const getWidgetType = (type: string) => {
       return Indicator;
     case "tags":
       return Tags;
+    case "tag":
+      return Tag;
     case "multicheckbox":
       return MultiCheckbox;
     case "radio":

package/src/widgets/base/Integer.tsx

@@ -32,6 +32,7 @@ export const Integer = (props: IntegerProps) => {
         }}
         defaultValue={0}
         onBlur={elementHasLostFocus}
+        precision={0}
       />
     </Field>
   );

package/src/widgets/base/Label.tsx

@@ -3,6 +3,7 @@ import { Tooltip, Typography } from "antd";
 import { WidgetProps } from "@/types";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { Label as LabelOoui } from "@gisce/ooui";
+import { Interweave } from "interweave";
 const { Text, Title } = Typography;
 
 type Props = WidgetProps & {
@@ -18,13 +19,8 @@ const alignClass = {
 
 const Label = (props: Props) => {
   const { ooui, align, responsiveBehaviour } = props;
-  const {
-    label,
-    tooltip,
-    fieldForLabel,
-    labelSize,
-    labelType,
-  } = ooui as LabelOoui;
+  const { label, tooltip, fieldForLabel, labelSize, labelType } =
+    ooui as LabelOoui;
   const addColon = fieldForLabel !== null ? true : false;
   const labelText = addColon && label.length > 1 ? label + " :" : label;
   const responsiveAlign = responsiveBehaviour ? "left" : "right";
@@ -43,10 +39,10 @@ const Label = (props: Props) => {
       )}
       <span className="pr-2">
         <TextType
-          level={labelSize !== "text" ? ((labelSize as string) as any) : null}
+          level={labelSize !== "text" ? (labelSize as string as any) : null}
           type={labelType as any}
         >
-          {labelText}
+          <Interweave content={labelText} />
         </TextType>
       </span>
     </div>

package/src/widgets/base/Reference.tsx

@@ -49,6 +49,8 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
 
   useEffect(() => {
     if (!value) {
+      setSelectionValue(undefined);
+      setMany2oneValue([]);
       return;
     }
 
@@ -73,8 +75,16 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           }
           onChange={(changedValue: string) => {
             setSelectionValue(changedValue);
-            setMany2oneValue([]);
-            onChange?.(undefined);
+            let m2oValue = many2oneValue[0] || 0;
+            if (changedValue !== selectionValue) {
+              setMany2oneValue([]);
+              m2oValue = 0;
+            }
+            const referenceValue = `${changedValue},${m2oValue}`;
+            if (referenceValue === value) {
+              return;
+            }
+            onChange?.(referenceValue);
           }}
           value={selectionValue}
         />
@@ -92,7 +102,7 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           value={many2oneValue}
           onChange={(changedValue: any[]) => {
             setMany2oneValue(changedValue);
-            const referenceValue = `${selectionValue},${changedValue[0]}`;
+            const referenceValue = `${selectionValue},${changedValue[0] || 0}`;
             if (referenceValue === value) {
               return;
             }

package/src/widgets/base/ReferenceTree.tsx

@@ -0,0 +1,62 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { Space } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
+import { LoadingOutlined } from "@ant-design/icons";
+
+export type ReferenceTreeProps = {
+  value: string;
+  context?: any;
+  selectionValues?: any;
+};
+
+export const ReferenceTree = (
+  props: ReferenceTreeProps
+): React.ReactElement => {
+  const { value, context, selectionValues } = props;
+  const [name, setName] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const [model, id] = value ? value.split(",") : [];
+  const intId = parseInt(id);
+
+  const fetchName = useCallback(async () => {
+    if (!value) {
+      return;
+    }
+    if (value && name) {
+      return;
+    }
+    setLoading(true);
+    const nameResponse = await ConnectionProvider.getHandler().execute({
+      action: "name_get",
+      payload: [intId],
+      model,
+      context,
+    });
+    setName(nameResponse[0][1]);
+    setLoading(false);
+  }, [value, name]);
+
+  useEffect(() => {
+    fetchName();
+  }, [value]);
+
+  if (!value && !loading) {
+    return <></>;
+  }
+
+  if (loading) {
+    return <LoadingOutlined />;
+  }
+
+  const selectionDescription = selectionValues.get(model);
+
+  return (
+    <Space>
+      <>{`${selectionDescription}:`}</>
+      <>{name}</>
+      <Many2oneSuffix id={intId} model={model} />
+    </Space>
+  );
+};