@scality/core-ui 0.127.0 → 0.128.0

package/dist/components/tabsv2/StyledTabs.d.ts

@@ -12,6 +12,7 @@ export declare const TabsContainer: import("styled-components").StyledComponent<
 }, never>;
 export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     tabContentColor?: string | undefined;
+    withoutPadding?: boolean | undefined;
 }, never>;
 export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TabsScroller: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/tabsv2/StyledTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAyBvB,CAAC;AACF,eAAO,MAAM,UAAU;;SAUtB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}
+{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAyBvB,CAAC;AACF,eAAO,MAAM,UAAU;;;SAatB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}

package/dist/components/tabsv2/StyledTabs.js

@@ -74,7 +74,7 @@ export const TabsContainer = styled.div `
 `;
 export const TabContent = styled.div `
   margin: 0;
-  padding: 0;
+  padding: ${(props) => (props.withoutPadding ? '0' : spacing.r16)};
   display: block;
   width: 100%;
   height: 100%;

package/dist/components/tabsv2/Tab.d.ts

@@ -11,6 +11,7 @@ export type TabProps = {
     exact?: boolean;
     strict?: boolean;
     sensitive?: boolean;
+    withoutPadding?: boolean;
 };
 declare function Tab(_: TabProps): null;
 export { Tab };

package/dist/components/tabsv2/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tab.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,iBAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,QAQvB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tab.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,iBAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,QAQvB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/tabsv2/Tabsv2.component.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, { ReactElement } from 'react';
 import { Tab } from './Tab';
+import { TabProps } from './Tab';
 type TabsProps = {
     activeTabColor?: string;
     activeTabSeparator?: string;
@@ -9,7 +9,7 @@ type TabsProps = {
     tabContentColor?: string;
     separatorColor?: string;
     tabHoverColor?: string;
-    children: ChildrenArray<Element<typeof Tab>>;
+    children: ReactElement<TabProps>[];
     className?: string;
 };
 export declare const TabsContext: React.Context<boolean>;

package/dist/components/tabsv2/Tabsv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabsv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tabsv2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5B,KAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,WAAW,wBAAgC,CAAC;AAMzD,iBAAS,IAAI,CAAC,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6LX;kBAxMQ,IAAI;;;AA4Mb,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tabsv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tabsv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,YAAY,EACb,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAS,MAAM,OAAO,CAAC;AAKxC,KAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,WAAW,wBAAgC,CAAC;AAMzD,iBAAS,IAAI,CAAC,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAgMX;kBA3MQ,IAAI;;;AA+Mb,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/tabsv2/Tabsv2.component.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
+import React, { createContext, useEffect, useState, useCallback, } from 'react';
 import { TabBar, ScrollableContainer, TabContent, TabItem, TabsContainer, TabsScroller, } from './StyledTabs';
 import { useHistory, useLocation, useRouteMatch, matchPath, Route, } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
@@ -77,12 +76,12 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
                     event.preventDefault();
                     history.push(getPushHistoryPath(path, query));
                 }
-            }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { className: "sc-tabs-item-title", children: label })) : (_jsx(SecondaryText, { className: "sc-tabs-item-title", children: label })), textBadge && (_jsx(EmphaseText, { className: "sc-tabs-item-icon", children: textBadge }))] }, index));
+            }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { children: label })) : (_jsx(SecondaryText, { children: label })), textBadge && _jsx(EmphaseText, { children: textBadge })] }, index));
     });
-    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), _jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, children: filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
-                            ? tab.props.path
-                            : url + '/' + tab.props.path, children: !tab.props.query ||
-                            (tab.props.query && matchQuery(tab.props.query)) ? (tab.props.children) : (_jsx(_Fragment, {})) }, index))) })] }) }));
+    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
+                        ? tab.props.path
+                        : url + '/' + tab.props.path, children: !tab.props.query ||
+                        (tab.props.query && matchQuery(tab.props.query)) ? (_jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, withoutPadding: tab.props.withoutPadding, children: tab.props.children })) : (_jsx(_Fragment, {})) }, index)))] }) }));
 }
 Tabs.Tab = Tab;
 // re-export Tab

package/dist/components/tabsv2/useScrollingTabs.d.ts

@@ -4,7 +4,7 @@ declare const useScrollingTabs: (selectedTabIndex: number | null | undefined) =>
     scrollButtonEndRef: import("react").MutableRefObject<HTMLDivElement | null | undefined>;
     tabsRef: import("react").MutableRefObject<any>;
     tabsListRef: import("react").RefObject<HTMLDivElement>;
-    handleKeyDown: (event: KeyboardEvent) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     handleTabsScroll: () => void;
     handleStartScrollClick: () => void;
     handleEndScrollClick: () => void;

package/dist/components/tabsv2/useScrollingTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollingTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/useScrollingTabs.ts"],"names":[],"mappings":";AAmIA,QAAA,MAAM,gBAAgB,qBAAsB,MAAM,GAAG,IAAI,GAAG,SAAS;;;;;2BA0JrC,aAAa;;;;;;;;CA+C5C,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"useScrollingTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/useScrollingTabs.ts"],"names":[],"mappings":";AAmIA,QAAA,MAAM,gBAAgB,qBAAsB,MAAM,GAAG,IAAI,GAAG,SAAS;;;;;2BA0JrC,mBAAmB,CAAC,cAAc,CAAC;;;;;;;;CA+ClE,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.127.0",
+  "version": "0.128.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/tabsv2/StyledTabs.ts

@@ -84,9 +84,12 @@ export const TabsContainer = styled.div<{
     margin-right: -1px;
   }
 `;
-export const TabContent = styled.div<{ tabContentColor?: string }>`
+export const TabContent = styled.div<{
+  tabContentColor?: string;
+  withoutPadding?: boolean;
+}>`
   margin: 0;
-  padding: 0;
+  padding: ${(props) => (props.withoutPadding ? '0' : spacing.r16)};
   display: block;
   width: 100%;
   height: 100%;

package/src/lib/components/tabsv2/Tab.ts

@@ -12,6 +12,7 @@ export type TabProps = {
   exact?: boolean;
   strict?: boolean;
   sensitive?: boolean;
+  withoutPadding?: boolean;
 };
 
 function Tab(_: TabProps) {

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -1,6 +1,10 @@
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, {
+  createContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactElement,
+} from 'react';
 import {
   TabBar,
   ScrollableContainer,
@@ -15,6 +19,7 @@ import {
   useRouteMatch,
   matchPath,
   Route,
+  Switch,
 } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
 import { ScrollButton } from './ScrollButton';
@@ -32,7 +37,7 @@ type TabsProps = {
   tabContentColor?: string;
   separatorColor?: string;
   tabHoverColor?: string;
-  children: ChildrenArray<Element<typeof Tab>>;
+  children: ReactElement<TabProps>[];
   className?: string;
 };
 export const TabsContext = createContext<boolean>(false);
@@ -60,9 +65,11 @@ function Tabs({
     number | null | undefined
   >(null);
   const queryURL = new URLSearchParams(location.search);
-  const filteredTabsChildren = React.Children.toArray(children).filter(
+  const filteredTabsChildren: ReactElement<TabProps>[] = React.Children.toArray(
+    children,
+  ).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as ReactElement<TabProps>[];
 
   const matchQuery = useCallback(
     (query: Query): boolean => {
@@ -168,18 +175,17 @@ function Tabs({
       >
         {icon && <TabIcon label={label}>{icon}</TabIcon>}
         {isSelected ? (
-          <BasicText className="sc-tabs-item-title">{label}</BasicText>
+          <BasicText>{label}</BasicText>
         ) : (
-          <SecondaryText className="sc-tabs-item-title">{label}</SecondaryText>
-        )}
-        {textBadge && (
-          <EmphaseText className="sc-tabs-item-icon">{textBadge}</EmphaseText>
+          <SecondaryText>{label}</SecondaryText>
         )}
+        {textBadge && <EmphaseText>{textBadge}</EmphaseText>}
       </TabItem>
     );
   });
   return (
     <TabsContext.Provider value={true}>
+      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
@@ -213,31 +219,33 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
-        <TabContent
-          className="sc-tabs-item-content"
-          tabContentColor={tabContentColor}
-        >
-          {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
-            <Route
-              exact={tab.props.exact}
-              sensitive={tab.props.sensitive}
-              strict={tab.props.strict}
-              key={index}
-              path={
-                tab.props.path.startsWith('/')
-                  ? tab.props.path
-                  : url + '/' + tab.props.path
-              }
-            >
-              {!tab.props.query ||
-              (tab.props.query && matchQuery(tab.props.query)) ? (
-                tab.props.children
-              ) : (
-                <></>
-              )}
-            </Route>
-          ))}
-        </TabContent>
+
+        {filteredTabsChildren.map((tab, index) => (
+          <Route
+            exact={tab.props.exact}
+            sensitive={tab.props.sensitive}
+            strict={tab.props.strict}
+            path={
+              tab.props.path.startsWith('/')
+                ? tab.props.path
+                : url + '/' + tab.props.path
+            }
+            key={index}
+          >
+            {!tab.props.query ||
+            (tab.props.query && matchQuery(tab.props.query)) ? (
+              <TabContent
+                className="sc-tabs-item-content"
+                tabContentColor={tabContentColor}
+                withoutPadding={tab.props.withoutPadding}
+              >
+                {tab.props.children}
+              </TabContent>
+            ) : (
+              <></>
+            )}
+          </Route>
+        ))}
       </TabsContainer>
     </TabsContext.Provider>
   );

package/src/lib/components/tabsv2/useScrollingTabs.ts

@@ -283,7 +283,7 @@ const useScrollingTabs = (selectedTabIndex: number | null | undefined) => {
     scrollSelectedIntoView();
   }, [scrollSelectedIntoView, selectedTabIndex]);
 
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const list = tabsListRef.current;
     const ownerDocument = (list && list.ownerDocument) || document;
     const currentFocus = ownerDocument.activeElement;

package/stories/tabsv2.stories.tsx

@@ -5,15 +5,23 @@ import { Wrapper, Title } from './common';
 import { BrowserRouter } from 'react-router-dom';
 import { brand, spacing } from '../src/lib/style/theme';
 import styled from 'styled-components';
-import { useLocation } from 'react-router';
+import { MemoryRouter, Route, useLocation } from 'react-router';
+
 const Content = styled.div`
   padding: ${spacing.sp24};
   color: ${(props) => props.theme.textPrimary};
+  height: 100%;
 `;
 export default {
   title: 'Components/Navigation/Tabs',
   component: Tabs,
-  decorators: [(story) => <BrowserRouter>{story()}</BrowserRouter>],
+  decorators: [
+    (story) => (
+      <BrowserRouter>
+        <Wrapper style={{ minHeight: '30rem' }}>{story()}</Wrapper>
+      </BrowserRouter>
+    ),
+  ],
   argTypes: {
     activeTabSeparator: {
       control: {
@@ -79,44 +87,52 @@ const DefaultTabsDetails = (props) => {
       <Title>
         {location.pathname} / {location.search}
       </Title>
-      <Tabs {...props}>
-        <Tab path="/iframe.html" label="Users">
-          <Content>Users Content</Content>
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'group',
-          }}
-          label="Groups"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'role @',
-          }}
-          label="Roles"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'policies',
-          }}
-          label="Policies"
-        >
-          {details()}
-        </Tab>
-        <Tab path="/path4" label="Storage Location">
-          <Content>Storage Location Content</Content>
-        </Tab>
-        <Tab path="/path5" label="Properties">
-          <Content>Properties Content</Content>
-        </Tab>
-      </Tabs>
+      <MemoryRouter initialEntries={['/path?tab=group']} initialIndex={0}>
+        <Route
+          path="/:path?"
+          render={() => (
+            <Tabs {...props}>
+              <Tab path="/path" label="Users" withoutPadding>
+                <Content>Users Content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'group',
+                }}
+                label="Groups"
+              >
+                {details()}
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'role',
+                }}
+                label="Roles"
+                withoutPadding
+              >
+                <Content>Roles content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'policies',
+                }}
+                label="Policies"
+              >
+                <Content>Policies content</Content>
+              </Tab>
+              <Tab path="/path4" label="Storage Location">
+                <Content>Storage Location Content</Content>
+              </Tab>
+              <Tab path="/path5" label="Properties">
+                <Content>Properties Content</Content>
+              </Tab>
+            </Tabs>
+          )}
+        />
+      </MemoryRouter>
     </>
   );
 };