Skip to content

Commit b23ad2f

Browse files
KelvinTegelaarKelvinTegelaar
authored
Merge pull request #1518 from johnduprey/dev
Tenant selector tweaks
2 parents ccab7ba + ca55fcb commit b23ad2f

File tree

6 files changed

+67
-57
lines changed

6 files changed

+67
-57
lines changed

‎src/components/header/AppHeaderSearch.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const AppHeaderSearch = () => {
1212
}, [dispatch])
1313
return (
1414
<>
15-
<CButton size="sm" variant="ghost" onClick={handleFastSwitcher}>
16-
<FontAwesomeIcon icon={faSearch} />
15+
<CButton variant="ghost" onClick={handleFastSwitcher}>
16+
<FontAwesomeIcon icon={faSearch} size="lg" />
1717
</CButton>
1818
</>
1919
)

‎src/components/layout/AppHeader.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import {
44
CAlert,
55
CAlertLink,
66
CContainer,
7+
CCollapse,
78
CHeader,
89
CHeaderNav,
10+
CNavItem,
911
CHeaderToggler,
1012
CImage,
1113
CSidebarBrand,
@@ -35,37 +37,38 @@ const AppHeader = () => {
3537
return (
3638
<>
3739
<CHeader position="sticky">
38-
<CContainer fluid>
39-
<CSidebarBrand className="me-auto p-2" to="/">
40-
<CImage
41-
className="sidebar-brand-full me-2"
42-
src={
43-
currentTheme === 'cyberdrain' || preferredTheme === 'cyberdrain'
44-
? cyberdrainlogodark
45-
: cyberdrainlogolight
46-
}
47-
height={80}
48-
/>
49-
<CHeaderNav className="me-2 p-2">
50-
<CHeaderToggler
40+
<CSidebarBrand className="me-auto pt-xs-2 p-md-2" to="/">
41+
<CImage
42+
className="sidebar-brand-full me-2"
43+
src={
44+
currentTheme === 'cyberdrain' || preferredTheme === 'cyberdrain'
45+
? cyberdrainlogodark
46+
: cyberdrainlogolight
47+
}
48+
height={80}
49+
/>
50+
<CHeaderNav className="me-2 p-2">
51+
<CHeaderToggler
52+
className="me-2"
53+
onClick={() => dispatch(toggleSidebarShow({ sidebarShow }))}
54+
>
55+
<FontAwesomeIcon
56+
icon={sidebarShow ? faCaretSquareLeft : faCaretSquareRight}
57+
size="lg"
5158
className="me-2"
52-
onClick={() => dispatch(toggleSidebarShow({ sidebarShow }))}
53-
>
54-
<FontAwesomeIcon
55-
icon={sidebarShow ? faCaretSquareLeft : faCaretSquareRight}
56-
size="lg"
57-
className="me-2"
58-
/>
59-
</CHeaderToggler>
60-
61-
<TenantSelector className="me-2" NavSelector={true} />
62-
</CHeaderNav>
63-
</CSidebarBrand>
64-
<CHeaderNav className="ms-auto p-2">
59+
/>
60+
</CHeaderToggler>
61+
</CHeaderNav>
62+
</CSidebarBrand>
63+
<CHeaderNav className="p-md-2 flex-grow-1">
64+
<TenantSelector NavSelector={true} />
65+
<CNavItem>
6566
<AppHeaderSearch />
67+
</CNavItem>
68+
<CNavItem>
6669
<AppHeaderDropdown />
67-
</CHeaderNav>
68-
</CContainer>
70+
</CNavItem>
71+
</CHeaderNav>
6972
</CHeader>
7073

7174
{dashboard &&

‎src/components/utilities/TenantSelector.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { setCurrentTenant } from 'src/store/features/app'
77
import { CDropdown, CDropdownMenu, CDropdownToggle } from '@coreui/react'
88
import { useNavigate, useSearchParams } from 'react-router-dom'
99
import { queryString } from 'src/helpers'
10+
import { faBuilding } from '@fortawesome/free-solid-svg-icons'
11+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
1012

1113
const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = false }) => {
1214
const currentTenant = useSelector((state) => state.app.currentTenant)
@@ -73,11 +75,17 @@ const TenantSelector = ({ action, showAllTenantSelector = true, NavSelector = fa
7375
return (
7476
<>
7577
{NavSelector && (
76-
<CDropdown component="li" variant="nav-item">
78+
<CDropdown
79+
component="li"
80+
variant="nav-item"
81+
direction="center"
82+
className="flex-grow-1 my-auto"
83+
>
7784
<CDropdownToggle>
85+
<FontAwesomeIcon icon={faBuilding} className="me-2" />
7886
{currentTenant?.defaultDomainName ? (
7987
<>
80-
<b>Selected Tenant:</b> {currentTenant.displayName}
88+
<span class="text-wrap">{currentTenant.displayName}</span>
8189
</>
8290
) : (
8391
placeholder

‎src/scss/_custom.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -530,7 +530,6 @@
530530
}
531531
.dropdown-menu.show.tenantDropdown {
532532
padding: 1px;
533-
margin-left: 15px;
534533
}
535534

536535
.header.header-sticky {

‎src/scss/_tenantselector.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,6 @@
199199
}
200200

201201
.tenantDropdown {
202-
min-width: 30rem;
202+
min-width: 25rem;
203203
}
204204

‎src/views/home/Home.js

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -116,23 +116,23 @@ const Home = () => {
116116
</CippContentCard>
117117
</CCol>
118118
</CRow>
119-
<CRow className="mb-3">
120-
<CCol className="mb-3">
119+
<CRow>
120+
<CCol sm={12} md={3} className="mb-3">
121121
<CippContentCard title="Total Users" icon={faUsers}>
122122
<div>{!isLoadingUserCounts ? dashboard?.Users : <Skeleton />}</div>
123123
</CippContentCard>
124124
</CCol>
125-
<CCol className="mb-3">
125+
<CCol sm={12} md={3} className="mb-3">
126126
<CippContentCard title="Total Licensed users" icon={faUsers}>
127127
<div>{!isLoadingUserCounts ? dashboard?.LicUsers : <Skeleton />}</div>{' '}
128128
</CippContentCard>
129129
</CCol>
130-
<CCol className="mb-3">
130+
<CCol sm={12} md={3} className="mb-3">
131131
<CippContentCard title="Global Admin Users" icon={faLaptopCode}>
132132
<div>{!isLoadingUserCounts ? dashboard?.Gas : <Skeleton />}</div>{' '}
133133
</CippContentCard>
134134
</CCol>
135-
<CCol className="mb-3">
135+
<CCol sm={12} md={3} className="mb-3">
136136
<CippContentCard title="Total Guests" icon={faHotel}>
137137
<div>{!isLoadingUserCounts ? dashboard?.Guests : <Skeleton />}</div>{' '}
138138
</CippContentCard>
@@ -141,37 +141,37 @@ const Home = () => {
141141
<CRow className="mb-3">
142142
<CCol>
143143
<CippContentCard title="Current Tenant" icon={faBook}>
144-
<CRow className="mb-3">
145-
<CCol>
144+
<CRow>
145+
<CCol sm={12} md={4} className="mb-3">
146146
<p className="fw-lighter">Tenant Name</p>
147147
{currentTenant?.displayName}
148148
</CCol>
149-
<CCol>
149+
<CCol sm={12} md={4} className="mb-3">
150150
<p className="fw-lighter">Tenant ID</p>
151151
{currentTenant?.customerId}
152152
</CCol>
153-
<CCol>
153+
<CCol sm={12} md={4} className="mb-3">
154154
<p className="fw-lighter">Default Domain Name</p>
155155
{currentTenant?.defaultDomainName}
156156
</CCol>
157157
</CRow>
158-
<CRow className="mb-3">
159-
<CCol>
158+
<CRow>
159+
<CCol sm={12} md={4} className="mb-3">
160160
<p className="fw-lighter">Tenant Status</p>
161161
{currentTenant?.delegatedPrivilegeStatus}
162162
</CCol>
163-
<CCol>
163+
<CCol sm={12} md={4} className="mb-3">
164164
<p className="fw-lighter">Creation Date</p>
165165
{isLoadingOrg && <Skeleton />}
166166
{organization && organization?.createdDateTime}
167167
</CCol>
168-
<CCol>
168+
<CCol sm={12} md={4} className="mb-3">
169169
<p className="fw-lighter">Current Secure Score</p>
170170
{isLoadingOrg && <Skeleton />}
171171
</CCol>
172172
</CRow>
173-
<CRow className="mb-3">
174-
<CCol>
173+
<CRow>
174+
<CCol sm={12} md={4} className="mb-3">
175175
<p className="fw-lighter">AD Connect Status</p>
176176
{isLoadingOrg && <Skeleton />}
177177
{!isLoadingOrg && organization?.onPremisesSyncEnabled ? (
@@ -197,14 +197,14 @@ const Home = () => {
197197
'Disabled'
198198
)}
199199
</CCol>
200-
<CCol>
200+
<CCol sm={12} md={4} className="mb-3">
201201
<p className="fw-lighter">Domain(s)</p>
202202
{isLoadingOrg && <Skeleton />}
203203
{organization?.verifiedDomains.map((item) => (
204204
<li>{item.name}</li>
205205
))}
206206
</CCol>
207-
<CCol>
207+
<CCol sm={12} md={4} className="mb-3">
208208
<p className="fw-lighter">Capabilities</p>
209209
{isLoadingOrg && <Skeleton />}
210210
{organization?.assignedPlans
@@ -224,16 +224,16 @@ const Home = () => {
224224
))}
225225
</CCol>
226226
</CRow>
227-
<CRow className="mb-3">
228-
<CCol>
227+
<CRow>
228+
<CCol sm={12} md={4} className="mb-3">
229229
<p className="fw-lighter">Applied Standards</p>
230230
{isLoadingOrg && <Skeleton />}
231231
</CCol>
232-
<CCol>
232+
<CCol sm={12} md={4} className="mb-3">
233233
<p className="fw-lighter">Last Results</p>
234234
{isLoadingOrg && <Skeleton />}
235235
</CCol>
236-
<CCol>
236+
<CCol sm={12} md={4} className="mb-3">
237237
<p className="fw-lighter">Access Type</p>
238238
{isLoadingOrg && <Skeleton />}
239239
</CCol>
@@ -242,10 +242,10 @@ const Home = () => {
242242
</CCol>
243243
</CRow>
244244
<CRow className="mb-3">
245-
<CCol>
245+
<CCol className="mb-3">
246246
<ActionContentCard title="Portals" icon={faEllipsisH} content={actions1} />
247247
</CCol>
248-
<CCol>
248+
<CCol className="mb-3">
249249
<ActionContentCard title="CIPP Actions" icon={faEllipsisH} content={actions2} />
250250
</CCol>
251251
</CRow>

0 commit comments

Comments
 (0)