qpp-style 9.16.7 → 9.17.0

package/components/SideNav/Content/SelectRole/index.js

@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cookie from 'cookie';
+import Dropdown from '../../../Dropdown';
+import {
+  loadRoleOptions,
+  redirectPage,
+  getLocalStorageRoleState,
+  initializeLocalStorageRoleState,
+  updateLocalStorageRoleState,
+} from './utils';
+
+const SelectRole = ({ selectedRole, setSelectedRole }) => {
+  const {
+    qpp_has_authorizations: hasAuthorizations,
+    qpp_cms_internal_authorized: cmsInternalRoleValues,
+    qpp_impersonated_user: isHelpdeskRoleAndImpersonating,
+  } = cookie.parse(document.cookie);
+
+  const ROLE_OPTIONS = loadRoleOptions([
+    hasAuthorizations,
+    cmsInternalRoleValues,
+  ]);
+
+  const handleSelection = (e) => {
+    e.preventDefault();
+    const dropdownValue = e.target.value;
+    const newRoleSelected = ROLE_OPTIONS.filter(
+      (opt) => opt.value === dropdownValue
+    )[0].value;
+    // Update localStorage with the current selected role in state & the new role selected
+    updateLocalStorageRoleState(selectedRole, newRoleSelected);
+    setSelectedRole(newRoleSelected);
+    redirectPage(newRoleSelected);
+  };
+
+  // Set role on init render
+  // below is executed on every page refresh including on side nav link navigation & on role selection
+  useEffect(() => {
+    // Check localstorage & set initial selected role
+    const { selectedRole, previousSelectedRole } = getLocalStorageRoleState();
+    const roleValue = selectedRole || ROLE_OPTIONS[0].value;
+
+    // Set localStorage values if not set
+    initializeLocalStorageRoleState(roleValue);
+
+    // Update state
+    setSelectedRole(roleValue);
+
+    // No previous role set && current role is QPP User in localStorage values indicates
+    // initial render, where a user has NOT used the dropdown to change the user role.
+    // If the above condition is not met, redirect to default page of selected role
+    if (!previousSelectedRole && selectedRole !== 'QPP User') {
+      redirectPage(roleValue);
+    }
+  }, []);
+
+  return (
+    <div className="SelectRole__Container">
+      <p className="SelectRole__Text">You are viewing as a</p>
+      <Dropdown
+        value={selectedRole}
+        name="user-role-selection"
+        ariaLabel="Select User Role"
+        className="qpp-u-width--100 SelectRole__Dropdown"
+        options={ROLE_OPTIONS}
+        onChange={handleSelection}
+        disabled={isHelpdeskRoleAndImpersonating}
+      />
+    </div>
+  );
+};
+
+SelectRole.propTypes = {
+  selectedRole: PropTypes.string,
+  setSelectedRole: PropTypes.func,
+};
+
+export default SelectRole;

package/components/SideNav/Content/SelectRole/utils.js

@@ -0,0 +1,120 @@
+/**
+ * Extract values from cookies, return parsed values in an array
+ * @param {array} cookies
+ * @returns {array}
+ */
+const extractCookieValues = (cookies) => {
+  const [hasAuthorizations, cmsInternalRoleValues] = cookies;
+  const cmsInternalRoles = cmsInternalRoleValues
+    ? JSON.parse(cmsInternalRoleValues)
+    : null;
+  return [hasAuthorizations, cmsInternalRoles];
+};
+
+/**
+ * Check if internal cms roles has Reviewer role
+ * @param {array} cmsInternalRoles array of values
+ * @returns {boolean}
+ */
+const hasReviewerRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.some(
+    (name) =>
+      name === 'QPP Self-Nomination' ||
+      name === 'QPP Targeted Review & Exceptions'
+  );
+};
+
+/**
+ * Check if internal cms roles includes Helpdek role
+ * @param {array} cmsInternalRoles array of values
+ * @returns {boolean}
+ */
+const hasHelpdeskRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.includes('QPP Helpdesk');
+};
+
+/**
+ * Transforms cookie values into optios format for use in role seelction dropdown
+ * @param {array} values extracted & parsed vookie values
+ * @returns {array}
+ */
+const transformCookieValues = (values) => {
+  const optionValues = [];
+  const [hasAuthorizations, cmsInternalRoles] = values;
+
+  if (hasAuthorizations === 'true') {
+    optionValues.push({ name: 'QPP User', value: 'QPP User' });
+  }
+  if (hasReviewerRole(cmsInternalRoles)) {
+    optionValues.push({ name: 'Reviewer', value: 'Reviewer' });
+  }
+  if (hasHelpdeskRole(cmsInternalRoles)) {
+    optionValues.push({ name: 'Helpdesk Viewer', value: 'Helpdesk Viewer' });
+  }
+  return optionValues;
+};
+
+/**
+ *
+ * @param {array} cookies authz & cms_internal_authz values parsed from cookies
+ * @returns {array} of objects for use in role dropdown
+ */
+export const loadRoleOptions = (cookies) => {
+  const cookieValues = extractCookieValues(cookies);
+  return transformCookieValues(cookieValues);
+};
+
+const defaultPageByRole = {
+  'QPP User': '/user/submissions',
+  'Helpdesk Viewer': '/user/helpdesk-viewing-tool',
+  Reviewer: '/user/reviewers',
+};
+
+/**
+ * Get redirect url/page by role
+ * @param {string} role
+ * @returns {string}
+ */
+export const redirectPage = (role) => {
+  const defaultPage = defaultPageByRole[role];
+  const { pathname } = window.location;
+  if (pathname === defaultPage) return;
+  else window.location.assign(defaultPage);
+};
+
+/**
+ * Get localStorage values related to user role
+ * @returns {object}
+ */
+export const getLocalStorageRoleState = () => ({
+  selectedRole: localStorage.getItem('selectedRole'),
+  previousSelectedRole: localStorage.getItem('previousSelectedRole'),
+});
+
+/**
+ * Initialize role values in localStorage
+ * @param {string} roleValue selector role value from dropdown
+ * @returns {void}
+ */
+export const initializeLocalStorageRoleState = (roleValue) => {
+  const localStorageValues = getLocalStorageRoleState();
+
+  if (!localStorageValues.selectedRole) {
+    localStorage.setItem('selectedRole', roleValue);
+  }
+  if (!localStorageValues.previousSelectedRole) {
+    localStorage.setItem('previousSelectedRole', '');
+  }
+};
+
+/**
+ * Update role values in localStorage
+ * @param {string} currentRole current/existing user role
+ * @param {string} updatedRole new user role selected from dropdown
+ */
+export const updateLocalStorageRoleState = (currentRole, updatedRole) => {
+  localStorage.setItem('previousSelectedRole', currentRole);
+  localStorage.setItem('selectedRole', updatedRole);
+};

package/components/SideNav/Details/PracticeDetails.jsx

@@ -7,7 +7,7 @@ const PracticeDetails = ({
   apmEntityId,
   vgId,
   cpcPlusId,
-  pcfId
+  pcfId,
 }) => {
   function renderId() {
     if (cpcPlusId) {

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -23,9 +23,11 @@ const NavLinkDrawer = ({
   isHighlighted,
   darkerBackground,
   leftBorderHighlightDisabled,
-  largerDrawerBottomPadding
+  hideLabelSection,
+  largerDrawerBottomPadding,
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
+  const MANAGE_ACCESS = '/user/manage-access';
 
   const toggleDrawer = () => {
     if (!isExpanded && typeof sidebarExpand === 'function') {
@@ -37,6 +39,14 @@ const NavLinkDrawer = ({
     if (!isAlwaysOpen && !disabled) {
       setIsOpen(!isOpen);
     }
+
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url === MANAGE_ACCESS) {
+      return (window.location.href = MANAGE_ACCESS);
+    }
   };
 
   const isLinkActive = (link, func) => {
@@ -59,7 +69,7 @@ const NavLinkDrawer = ({
 
   const buildLeftIconClasses = () => {
     let leftIcon = `left-icon`;
-    
+
     if (isAlwaysOpen) {
       leftIcon += ` always-open`;
     }
@@ -69,7 +79,7 @@ const NavLinkDrawer = ({
     }
 
     return leftIcon;
-  }
+  };
 
   // Classes for the link drawer button
   const currentPage = isCurrentPage(
@@ -80,43 +90,49 @@ const NavLinkDrawer = ({
 
   const renderLeftIcon = (leftIcon) => {
     if (leftIcon) {
-      return (<svg
-        className={`${buildLeftIconClasses()}`}
-        aria-hidden="true"
-        focusable="false"
+      return (
+        <svg
+          className={`${buildLeftIconClasses()}`}
+          aria-hidden="true"
+          focusable="false"
         >
-        {leftIcon}
-        </svg>)
+          {leftIcon}
+        </svg>
+      );
     }
-  }
+  };
 
   const hasDarkerBackground = (darkerBackground) => {
     return darkerBackground ? 'background-highlight' : '';
-  }
+  };
 
   const hasDarkerTitle = (darkerBackground) => {
     return darkerBackground ? 'expanded currentPage' : '';
-  }
+  };
 
   const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
-    return leftBorderHighlightDisabled ? 'left-border-disabled' : ''
-  }
+    return leftBorderHighlightDisabled ? 'left-border-disabled' : '';
+  };
+
+  const isLabelSectionHidden = (hideLabelSection) => {
+    return hideLabelSection ? 'hidden-label-section' : '';
+  };
 
   const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
     return isLeftBorderDisabled && !isExpanded ? 'hidden-nav-link-item' : '';
-  }
+  };
 
   const highlightTitle = (isHighlighted) => {
     return isHighlighted && isExpanded ? 'highlight' : '';
-  }
+  };
 
   const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
     return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';
-  }
+  };
 
   const adjustItemSpacing = (largerDrawerBottomPadding) => {
     return largerDrawerBottomPadding ? 'larger-item-spacing' : '';
-  }
+  };
 
   useEffect(() => {
     if (disabled) {
@@ -185,17 +201,22 @@ const NavLinkDrawer = ({
         {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
         tabIndex="0"
         aria-label={label}
-        {...(isAlwaysOpen || disabled
+        {...((url !== MANAGE_ACCESS && isAlwaysOpen) || disabled
           ? { disabled: isAlwaysOpen || disabled }
           : {})}
-        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${hasDarkerTitle(darkerBackground)}
-         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(leftBorderHighlightDisabled)}
+        className={`${className} ${expandedClass} ${highlightTitle(
+          isHighlighted
+        )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
+          leftBorderHighlightDisabled
+        )}
+         ${isLabelSectionHidden(hideLabelSection)}
          ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       >
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
           {renderLeftIcon(leftIcon)}
           <AnimationGroup display={isExpanded}>
-            <span>{label}</span>
+            <span className="sidebar-inline-link-label">{label}</span>
           </AnimationGroup>
         </div>
         {isExpanded && !isAlwaysOpen && (
@@ -212,11 +233,16 @@ const NavLinkDrawer = ({
         <div
           className={`${currentPage ? 'currentPage' : ''} ${
             isOpen && !disabled ? 'drawer open' : 'drawer'
-          } ${hasDarkerBackground(darkerBackground)} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+          } ${hasDarkerBackground(
+            darkerBackground
+          )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
         >
           <ul aria-hidden={!isOpen}>
             {listOfLinks &&
-              renderDrawerLinksRecursively(listOfLinks, `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`)}
+              renderDrawerLinksRecursively(
+                listOfLinks,
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+              )}
           </ul>
         </div>
       </AnimationGroup>
@@ -243,7 +269,8 @@ NavLinkDrawer.propTypes = {
   isHighlighted: PropTypes.bool,
   darkerBackground: PropTypes.bool,
   leftBorderHighlightDisabled: PropTypes.bool,
-  largerDrawerBottomPadding: PropTypes.bool
+  hideLabelSection: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool,
 };
 
 export default NavLinkDrawer;

package/components/SideNav/Links/NavLinkInline.jsx

@@ -8,6 +8,7 @@ const NavLinkInline = ({
   urlExpressionToMatch,
   className,
   icon,
+  rightIcon,
   label,
   isActive,
   showLabel,
@@ -78,7 +79,10 @@ const NavLinkInline = ({
           {icon}
         </svg>
         <AnimationGroup display={showLabel}>
-          <span tabIndex="-1">{label}</span>
+          <span tabIndex="-1" className="sidebar-inline-link-label">
+            {label}
+            {rightIcon}
+          </span>
         </AnimationGroup>
       </a>
       {showTooltip && (
@@ -95,6 +99,7 @@ NavLinkInline.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   icon: PropTypes.element,
+  rightIcon: PropTypes.element,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   showLabel: PropTypes.bool,

package/components/SideNav/UI/SideNavUI.jsx

@@ -78,13 +78,10 @@ const SideNavUI = ({
     );
   };
 
-  const getDynamicContent = (contentItems, className, recursionId, hideLinkClass) => {
+  const getDynamicContent = (contentItems, className, recursionId) => {
     const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
       config;
     let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
-    if (hideLinkClass) {
-      linkClass = '';
-    }
     const containerRecursionId = recursionId || 0;
 
     const getDynamicIcon = (icon) => {
@@ -94,22 +91,25 @@ const SideNavUI = ({
 
     const hasDarkerBackground = (darkerBackground) => {
       return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
-    }
+    };
 
     const itemsMarkup = (contentItems || []).map((item, index) => {
       const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
       return (
         {
           divider: (
-            <AnimationGroup display={isExpandedState} key={key} darkerBackground={item.darkerBackground}>
-              <hr className={`${hasDarkerBackground(item.darkerBackground)}`}/>
+            <AnimationGroup
+              display={isExpandedState}
+              key={key}
+              darkerBackground={item.darkerBackground}
+            >
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
             </AnimationGroup>
           ),
           container: getDynamicContent(
             item.items,
             item.className,
-            containerRecursionId + 1,
-            item.hideLinkClass
+            containerRecursionId + 1
           ),
           linkBack: (
             <AnimationGroup display={isExpandedState} key={key}>
@@ -183,6 +183,7 @@ const SideNavUI = ({
               isHighlighted={item.isHighlighted}
               darkerBackground={item.darkerBackground}
               leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              hideLabelSection={item.hideLabelSection}
               largerDrawerBottomPadding={item.largerDrawerBottomPadding}
             />
           ),

package/components/SideNav/helpers.js

@@ -1,3 +1,20 @@
+import cookie from 'cookie';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  FacilityBasedPreviewIcon,
+  HardshipIcon,
+  HelpSupportIcon,
+  ManageUsersIcon,
+  MyApplicationsIcon,
+  MyTestDataIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  StarIcon,
+  TargetIcon,
+  IndividualReporting,
+} from '../../lib/SvgComponents';
+
 const submissionsUrl = '/user/submissions';
 const dashboardUrl = '/user/dashboard';
 const manageUrl = '/user/manage-access';
@@ -36,6 +53,195 @@ const handleNavigation = (e, linkCallbackFunction, label) => {
   });
 };
 
+/**
+ * Load icon by url
+ * @param {string} url
+ * @returns svg icon
+ */
+const getIcon = (url) => {
+  const icons = {
+    [dashboardUrl]: DashboardIcon,
+    [feedbackUrl]: StarIcon,
+    [manageUrl]: ManageUsersIcon,
+    [physicianCompareUrl]: PhysicianCompareIcon,
+    [reportsPortalUrl]: HardshipIcon,
+    [submissionsUrl]: AccountHomeIcon,
+    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
+    '/developers': HelpSupportIcon,
+    '/resources/help-and-support': HelpSupportIcon,
+    '/user/apm-incentive-payments': PaymentIcon,
+    '/user/applications': MyApplicationsIcon,
+    '/user/exception/#/landing': HardshipIcon,
+    '/user/targeted-review/#/landing': TargetIcon,
+    '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': AccountHomeIcon,
+    '/reviewer/exception': HardshipIcon,
+    '/reviewer/targeted-review': TargetIcon,
+    '/self-nomination': IndividualReporting,
+  };
+  return icons[url];
+};
+
+/**
+ * Check if Reviewer or Self-Nom role
+ * @param {string} name
+ * @returns {boolean}
+ */
+const isReviewerOrSelfNomRole = (name) =>
+  name === 'QPP Self-Nomination' || name === 'QPP Targeted Review & Exceptions';
+
+/**
+ * Check if user is currently impersonating
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isImpersonating = (docCookie) => {
+  const parsedCookies = cookie.parse(docCookie);
+  return (
+    parsedCookies.qpp_can_impersonate && parsedCookies.qpp_impersonated_user
+  );
+};
+
+/**
+ * Check if user has multiple roles, used to display Select Role dropdown
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isMultiRoleUser = (docCookie) => {
+  const { qpp_cms_internal_authorized } = cookie.parse(docCookie);
+  let internalAuthz = [];
+  if (qpp_cms_internal_authorized) {
+    internalAuthz = JSON.parse(qpp_cms_internal_authorized);
+  }
+  // Filter out test internalCms authz
+  const filteredInternalAuthz = internalAuthz.filter((internalAuth) => {
+    return (
+      internalAuth !== 'Test internalCms Resource' &&
+      internalAuth !== 'Test internalCms Resource 2'
+    );
+  });
+  return filteredInternalAuthz.length > 1;
+};
+
+/**
+ * Transform cookie values to permissions object
+ * @param {object} cookies parsed document.cookie values
+ * @returns {object}
+ */
+const transformCookieValues = (cookies) => {
+  const {
+    qpp_can_impersonate,
+    qpp_has_authorizations,
+    user_has_apm_payments,
+    qpp_cms_internal_authorized,
+    qpp_ehr_authorized,
+    qpp_has_non_registry_authorizations,
+  } = cookies;
+  return {
+    canImpersonate: qpp_can_impersonate === 'true',
+    hasAuthorizations: qpp_has_authorizations === 'true',
+    hasApmPayments: user_has_apm_payments === 'true',
+    internalReviewerNames: qpp_cms_internal_authorized
+      ? JSON.parse(qpp_cms_internal_authorized)
+      : [],
+    ehrAuthorized: qpp_ehr_authorized === 'true',
+    hasNonRegistryAuthorizations:
+      qpp_has_non_registry_authorizations === 'true',
+  };
+};
+
+const permissionsByRole = {
+  'QPP User': {
+    canImpersonate: false,
+    hasAuthorizations: true,
+    hasApmPayments: true,
+  },
+  Reviewer: {
+    hasAuthorizations: false,
+    hasApmPaymentss: false,
+  },
+  'Helpdesk Viewer': {
+    hasAuthorizations: false,
+    hasApmPayments: false,
+    hasNonRegistryAuthorizations: false,
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+  // Helpdesk role && impersonating (use impersonated user authz values)
+  Impersonation: {
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+};
+
+/**
+ * Return permissions by role
+ * @param {string} selectedRole selected user role
+ * @param {object} permissionValues default permission values from transformed parsed cookie
+ * @returns {object}
+ */
+const loadUserPermissionsByRole = (selectedRole, permissionValues) => {
+  return {
+    ...permissionValues,
+    ...permissionsByRole[selectedRole],
+  };
+};
+
+/**
+ * Helper fn to return user permissions/properties from cookies set on login
+ * @param {string} docCookie cookie values set on login
+ * @param {string} selectedRole string of selected role if user has multiple roles
+ * @returns {object}
+ */
+const loadUserPermissions = (docCookie, selectedRole) => {
+  const parsedCookies = cookie.parse(docCookie);
+  const permissionValues = transformCookieValues(parsedCookies);
+  const impersonating = isImpersonating(docCookie);
+  const role = impersonating ? 'Impersonation' : selectedRole;
+
+  if (role) {
+    return loadUserPermissionsByRole(role, permissionValues);
+  }
+
+  return permissionValues;
+};
+
+/**
+ * Return map of link conditionals based on user cookies for side nav
+ * @param {object} userPermissions user permissions/properties derived from cookies set on login
+ * @returns {object}
+ */
+const getUrlConditionMap = (userPermissions) => {
+  return {
+    [dashboardUrl]: userPermissions.hasAuthorizations,
+    [feedbackUrl]: userPermissions.hasAuthorizations,
+    '/user/apm-incentive-payments': userPermissions.hasApmPayments,
+    [physicianCompareUrl]: userPermissions.hasNonRegistryAuthorizations,
+    [reportsPortalUrl]: userPermissions.hasAuthorizations,
+    [facilityBasedPreviewBaseUrl]: userPermissions.hasAuthorizations,
+    '/user/helpdesk-viewing-tool': userPermissions.canImpersonate,
+    '/reviewer/exception': userPermissions.internalReviewerNames?.includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/targeted-review':
+      userPermissions.internalReviewerNames?.includes(
+        'QPP Targeted Review & Exceptions'
+      ),
+    '/self-nomination': userPermissions.internalReviewerNames?.includes(
+      'QPP Self-Nomination'
+    ),
+
+    // dev pre
+    '/user/applications': userPermissions.ehrAuthorized,
+    '/user/test-data': userPermissions.ehrAuthorized,
+  };
+};
+
+const isImpersonationLink = (docCookie, linkLabel) => {
+  if (!isImpersonating(docCookie)) return;
+  const helpdeskLinks = ['Account Home', 'Manage Access', 'Help and Support'];
+  return !helpdeskLinks.includes(linkLabel);
+};
+
 module.exports = {
   submissionsUrl,
   dashboardUrl,
@@ -48,4 +254,11 @@ module.exports = {
   reportsPortalUrl,
   facilityBasedPreviewBaseUrl,
   viewingToolUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  isReviewerOrSelfNomRole,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
 };

package/components/Tabs/Tab.js

@@ -23,4 +23,4 @@ Tab.propTypes = {
   href: PropTypes.string,
 };
 
-export default Tab
+export default Tab;