datastake-daf 0.6.759 → 0.6.760

package/src/@daf/core/components/Screens/FindInformation/index.js

@@ -18,6 +18,7 @@ export default function FindInformation({
 	goTo = () => {},
 	getRedirectLink = () => {},
 	renderBreadCrumbs = () => {},
+	breadcrumbs = [],
 }) {
 	const { defaultTab, setDefaultTab } = useFindInformation();
 	const params = useMemo(() => new URLSearchParams(location.search), [location.search]);
@@ -41,7 +42,7 @@ export default function FindInformation({
 	return (
 		<div className="daf-create-view semibold form-input-output">
 			<Header
-				breadcrumbs={breadCrumbs}
+				breadcrumbs={breadcrumbs || breadCrumbs}
 				title={t("Find Information")}
 				supportText={t(
 					"Identify available information sources among users of compatible applications and connected databases.",

package/src/@daf/core/components/Screens/Users/columns.js

@@ -3,12 +3,6 @@ import { Modal, Tag, Typography, message ,Tooltip} from "antd";
 
 import { renderDateFormatted } from '../../../../../helpers/Forms.js';
 import MoreMenu from '../../../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
 
 export const getColumns = ({t, goTo, user, 	removeUser = () => {},
 resendInvite = () => {},

package/src/@daf/core/components/Table/NavigationAction/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import CustomIcon from '../../Icon/CustomIcon.jsx';
+
+const NavigationAction = ({onClick, theme}) => {
+  return ( 
+        <div style={{ display: "flex", justifyContent: "center" }}>
+            <button 
+                onClick={onClick}
+                style={{ 
+                    cursor: 'pointer', 
+                    border: 'none', 
+                    background: 'transparent',
+                    padding: 0,
+                    display: 'flex',
+                    alignItems: 'center'
+                }}
+            >
+                <CustomIcon name="Link" size={15} color={theme.baseGray70} />
+            </button>
+        </div>
+  )
+}
+
+export default NavigationAction

package/src/@daf/pages/Dashboards/SupplyChain/index.jsx

@@ -20,7 +20,7 @@ function SupplyChain({
     setSelectedPartners, 
     informationSources,
     hardcodedData,
-    breadCrumbs = [],
+    breadcrumbs = [],
 }) {
 
     const sourceOptions = useMemo(() => {
@@ -69,7 +69,7 @@ function SupplyChain({
                             />
                         </div>
                     }
-                    breadcrumbs={breadCrumbs}
+                    breadcrumbs={breadcrumbs}
                 />
             }
         >

package/src/@daf/pages/Documents/columns.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../helpers/Forms.js';
-import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
-import MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
+import NavigationAction from '../../core/components/Table/NavigationAction/index.jsx';
+
 export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink, theme, subject, applications }) => [
   {
     dataIndex: 'datastakeId',
@@ -88,30 +87,14 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
         return <div className="daf-default-cell" />;
       }
       const onClick = () => {
-        const link = `/app/view/${subject}/${all.datastakeId}`;
+        let link = `/app/view/${subject}/${all.datastakeId}`;
         if (activeTab === "shared") {
           link += `?sourceId=${all?.authorId?.id}`;
         }
         goTo(getRedirectLink(link));
       };
-      const moreMenuItems = [
-        {
-          label: t("Details"),
-          value: "details",
-          onClick: onClick,
-        },
-        {
-          label: t("Remove"),
-          value: "remove",
-          onClick: () => {
-            console.log("remove");
-          },
-          disabled: true,
-        },
-      ];
-      return <div >
-           <MoreMenu items={moreMenuItems} />
-      </div>;
+
+      return <NavigationAction onClick={onClick} theme={theme} />;
     }
   }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Documents/index.jsx

@@ -34,6 +34,7 @@ const DocumentsTable = ({
     form = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -49,8 +50,6 @@ const DocumentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     useEffect(() => {
@@ -91,7 +90,7 @@ const DocumentsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Documents")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/Activities/columns.js

@@ -1,55 +1,12 @@
 import React from 'react';
 import { Tooltip, Tag } from 'antd';
-import { findOptions } from '../../../../helpers/StringHelper.js';
+import { findOptions, getLinkValue } from '../../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../../helpers/Forms.js';
-import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
-import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
-
-const getEventCategoryBySubject = (eventCategoryObject, subject) => {
-  if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
-    return null;
-  }
-  
-  const subjectSingular = subject.endsWith('ies') 
-    ? subject.slice(0, -3) + 'y'
-    : subject;                      
-
-  const key = `typeOfEvent is ${subjectSingular}`;
-  return eventCategoryObject[key] || null;
-};
-
-export const renderStatusTag = ({ value, t = (s) => s }) => {
-	const width = 87;
-
-	switch (value) {
-		case "edited":
-			return (
-				<Tag color="yellow" style={{ width }} className="text-center">
-					{t("Edited")}
-				</Tag>
-			);
-		case "submitted":
-			return (
-				<Tag color="green" style={{ width }} className="text-center">
-					{t("Submitted")}
-				</Tag>
-			);
-		default:
-			return (
-				<Tag color="blue" style={{ width }} className="text-center">
-					{t("Private")}
-				</Tag>
-			);
-	}
-};
+import { getEventCategoryBySubject } from '../helper.js';
+import { renderStatusTag } from '../../../utils/tags.js';
+import NavigationAction from '../../../core/components/Table/NavigationAction/index.jsx';
 
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
@@ -210,23 +167,14 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div className="daf-default-cell" />;
         }
         const onClick = () => {
-          const link = `/app/view/${subject}/${all.datastakeId}`;
+          let link = `/app/view/${subject}/${all.datastakeId}`;
           if (activeTab === "shared") {
             link += `?sourceId=${all?.authorId?.id}`;
           }
           goTo(getRedirectLink(link));
         };
-        const moreMenuItems = [
-          {
-            label: t("Details"),
-            value: "details",
-            onClick: onClick,
-          },
-     
-        ];
-        return <div >
-             <MoreMenu items={moreMenuItems} />
-        </div>;
+
+        return <NavigationAction onClick={onClick} theme={theme} />;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Events/Activities/index.jsx

@@ -35,6 +35,7 @@ const ActivitiesTable = ({
     extendingFilters = {},
     createDefaultValues = {},
     applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -52,8 +53,6 @@ const ActivitiesTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -95,7 +94,7 @@ const ActivitiesTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Activities")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/Incidents/columns.js

@@ -1,57 +1,12 @@
 import React from 'react';
 import { Tooltip, Tag } from 'antd';
-import { findOptions } from '../../../../helpers/StringHelper.js';
+import { findOptions, getLinkValue } from '../../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../../helpers/Forms.js';
-import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
-import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
-
-const getEventCategoryBySubject = (eventCategoryObject, subject) => {
-  if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
-    return null;
-  }
-  
-  const subjectSingular = subject.endsWith('ies') 
-    ? subject.slice(0, -3) + 'y'
-    : subject.endsWith('s') 
-    ? subject.slice(0, -1)       
-    : subject;                      
-
-  const key = `typeOfEvent is ${subjectSingular}`;
-  return eventCategoryObject[key] || null;
-};
-
-export const renderStatusTag = ({ value, t = (s) => s }) => {
-	const width = 87;
-
-	switch (value) {
-		case "edited":
-			return (
-				<Tag color="yellow" style={{ width }} className="text-center">
-					{t("Edited")}
-				</Tag>
-			);
-		case "submitted":
-			return (
-				<Tag color="green" style={{ width }} className="text-center">
-					{t("Submitted")}
-				</Tag>
-			);
-		default:
-			return (
-				<Tag color="blue" style={{ width }} className="text-center">
-					{t("Private")}
-				</Tag>
-			);
-	}
-};
+import { getEventCategoryBySubject } from '../helper.js';
+import { renderStatusTag } from '../../../utils/tags.js';
+import NavigationAction from '../../../core/components/Table/NavigationAction/index.jsx';
 
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
@@ -209,23 +164,14 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div className="daf-default-cell" />;
         }
         const onClick = () => {
-          const link = `/app/view/${subject}/${all.datastakeId}`;
+          let link = `/app/view/${subject}/${all.datastakeId}`;
           if (activeTab === "shared") {
             link += `?sourceId=${all?.authorId?.id}`;
           }
           goTo(getRedirectLink(link));
         };
-        const moreMenuItems = [
-          {
-            label: t("Details"),
-            value: "details",
-            onClick: onClick,
-          },
-     
-        ];
-        return <div >
-             <MoreMenu items={moreMenuItems} />
-        </div>;
+
+        return <NavigationAction onClick={onClick} theme={theme} />;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Events/Incidents/index.jsx

@@ -35,6 +35,7 @@ const IncidentsTable = ({
     extendingFilters = {},
     createDefaultValues = {},
     applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -52,8 +53,6 @@ const IncidentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -95,7 +94,7 @@ const IncidentsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Incidents")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/columns.js

@@ -2,43 +2,11 @@ import React from 'react';
 import { Tooltip, Tag } from 'antd';
 import { findOptions } from '../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../helpers/Forms.js';
-import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
-// import CustomIcon from '../../core/components/';
 import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
 import MoreTags from '../../core/components/Table/MoreTags/index.jsx';
-import MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if (linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
-
-export const renderEventStatusTag = ({ value, t = (s) => s }) => {
-  const width = 87;
-
-  switch (value) {
-    case "edited":
-      return (
-        <Tag color="orange" style={{ width }} className="text-center">
-          {t("Edited")}
-        </Tag>
-      );
-    case "submitted":
-      return (
-        <Tag color="green" style={{ width }} className="text-center">
-          {t("Submitted")}
-        </Tag>
-      );
-    default:
-      return (
-        <Tag color="blue" style={{ width }} className="text-center">
-          {t("Private")}
-        </Tag>
-      );
-  }
-};
+import NavigationAction from '../../core/components/Table/NavigationAction/index.jsx';
+import { renderStatusTag } from '../../utils/tags.js';
 
 export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications }) => [
   {
@@ -200,7 +168,7 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
       }
 
       const _val = all?.published || all?.status === "submitted" ? "submitted" : value;
-      return renderEventStatusTag({ value: _val, t });
+      return renderStatusTag({ value: _val, t });
     },
     ellipsis: true,
   },
@@ -227,23 +195,14 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
         return <div className="daf-default-cell" />;
       }
       const onClick = () => {
-        const link = `/app/view/${subject}/${all.datastakeId}`;
+        let link = `/app/view/${subject}/${all.datastakeId}`;
         if (activeTab === "shared") {
           link += `?sourceId=${all?.authorId?.id}`;
         }
         goTo(getRedirectLink(link));
       };
-      const moreMenuItems = [
-        {
-          label: t("Details"),
-          value: "details",
-          onClick: onClick,
-        },
-    
-      ];
-      return <div >
-           <MoreMenu items={moreMenuItems} />
-      </div>;
+
+      return <NavigationAction onClick={onClick} theme={theme} />;
     }
   }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Events/helper.js

@@ -0,0 +1,14 @@
+export const getEventCategoryBySubject = (eventCategoryObject, subject) => {
+    if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
+      return null;
+    }
+    
+    const subjectSingular = subject.endsWith('ies') 
+      ? subject.slice(0, -3) + 'y'
+      : subject.endsWith('s') 
+      ? subject.slice(0, -1)       
+      : subject;                      
+  
+    const key = `typeOfEvent is ${subjectSingular}`;
+    return eventCategoryObject[key] || null;
+  };

package/src/@daf/pages/Events/index.jsx

@@ -35,6 +35,7 @@ const EventsTable = ({
     extendingFilters = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -52,8 +53,6 @@ const EventsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -101,7 +100,7 @@ const EventsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("events")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Locations/MineSite/columns.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../../helpers/StringHelper.js';
+import { findOptions, getLinkValue } from '../../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../../helpers/Forms.js';
 import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
 import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
 
-export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data}) => [
+export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
         dataIndex: 'datastakeId',
         title: t('ID'),
@@ -129,15 +124,15 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
     
       {
         title: t("Sources"),
-        dataIndex: 'source',
+        dataIndex: 'sources',
         ellipsis: true,
         show: activeTab !== "own",
         render: (v, all) => {
           if (all.empty) {
             return <div className="daf-default-cell" />
           }
-          const source = findOptions(v, data?.options?.sourceOptions);
-          return source ? <Tooltip title={source}>{source}</Tooltip> : '-';
+          const sources = sourceAvatarConfig(v, user, applications);
+          return <AvatarGroup items={sources}></AvatarGroup>;
         },
       },
       {
@@ -149,7 +144,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />;
           }
           const onClick = () => {
-            const link = `/app/view/${subject}/${all.datastakeId}`;
+            let link = `/app/view/${subject}/${all.datastakeId}`;
             if (activeTab === "shared") {
               link += `?sourceId=${all?.authorId?.id}`;
             }

package/src/@daf/pages/Locations/MineSite/index.jsx

@@ -34,6 +34,8 @@ const ProductionSitesTable = ({
     form = {},
     extendingFilters = {},
     createDefaultValues = {},
+    applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState('own');
@@ -48,9 +50,8 @@ const ProductionSitesTable = ({
         theme,
         subject: 'production-sites',
         data,
-    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data]);
-
-    const breadCrumbs = [];
+        applications,   
+    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
@@ -93,7 +94,7 @@ const ProductionSitesTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("production-sites")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Locations/columns.js

@@ -1,17 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { findOptions } from '../../../helpers/StringHelper.js';
+import { findOptions, getLinkValue } from '../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../helpers/Forms.js';
-import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
-import MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
+import NavigationAction from '../../core/components/Table/NavigationAction/index.jsx';
 
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
@@ -139,35 +132,16 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
+
         const onClick = () => {
-          const link = `/app/view/${subject}/${all.datastakeId}`;
+          let link = `/app/view/${subject}/${all.datastakeId}`;
           if (activeTab === "shared") {
             link += `?sourceId=${all?.authorId?.id}`;
           }
           goTo(getRedirectLink(link));
         };
-        const moreMenuItems = [
-          {
-            label: t("Details"),
-            value: "details",
-            onClick: onClick,
-          },
-          {
-            label: t("Summary"),
-            value: "Summary",
-            onClick: () => {
-              let link = `/app/summary/${subject}/${all.datastakeId}`
-              if (activeTab === "shared") {
-                link += `?sourceId=${all?.authorId?.id}`;
-              }
-              goTo(getRedirectLink(link));
-            },
-            // disabled: true,
-          },
-        ];
-        return <div >
-             <MoreMenu items={moreMenuItems} />
-        </div>;
+
+        return <NavigationAction onClick={onClick} theme={theme} />;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Locations/index.jsx

@@ -34,6 +34,7 @@ const LocationsTable = ({
     form = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -51,8 +52,6 @@ const LocationsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams } = useGetQueryParams({location});
 
     useEffect(() => {
@@ -92,7 +91,7 @@ const LocationsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Locations")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}