Skip to content

Commit

Permalink
Merge pull request stakwork#501 from stakwork/feat/admin_workspaces
Browse files Browse the repository at this point in the history 
Added Workspaces dropdown for admin stats
  • Loading branch information
@elraphty
elraphty authored May 5, 2024
2 parents 08681bb + f6e30a3 commit d2b6ca7
Show file tree
Hide file tree
Showing 14 changed files with 229 additions and 50 deletions.
8 changes: 4 additions & 4 deletions cypress/e2e/46_adminFIlterStatus.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('Super Admin Bounty Filter Status Dropdown ', () => {

cy.contains('Status').click();
cy.get('label[for="Open"]').click();
cy.contains('Apply').click();
cy.get('button').contains('Apply').click();
cy.wait(1000);

for (let i = 5; i <= 6; i++) {
Expand All @@ -71,10 +71,10 @@ describe('Super Admin Bounty Filter Status Dropdown ', () => {
cy.contains(`Syed${i}`, { timeout: 10000 }).should('not.exist');
}

cy.contains('Status').click();
cy.contains('Status:').click();
cy.get('label[for="Open"]').click();
cy.get('label[for="Assigned"]').click();
cy.contains('Apply').click();
cy.get('button').contains('Apply').click();
cy.wait(1000);

for (let i = 3; i <= 4; i++) {
Expand All @@ -92,7 +92,7 @@ describe('Super Admin Bounty Filter Status Dropdown ', () => {
cy.contains('Status').click();
cy.get('label[for="Assigned"]').click();
cy.get('label[for="Paid"]').click();
cy.contains('Apply').click();
cy.get('button').contains('Apply').click();
cy.wait(1000);

for (let i = 1; i <= 2; i++) {
Expand Down
2 changes: 1 addition & 1 deletion src/config/ModeDispatcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export enum AppMode {
}

const hosts: { [k: string]: AppMode } = {
'localhost:3000': AppMode.COMMUNITY,
'localhost:3000': AppMode.TRIBES,
'localhost:13000': AppMode.TRIBES,
'localhost:23000': AppMode.TRIBES,
'tribes.sphinx.chat': AppMode.TRIBES,
Expand Down
60 changes: 59 additions & 1 deletion src/pages/superadmin/header/HeaderStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,14 @@ export const Select = styled.select`
box-shadow: 0px 2px 10px 0px rgba(97, 138, 255, 0.5);
outline: none;
border: none;
width: 113px;
width: 115px;
min-height: 40px;
padding: 0px 15px;
color: var(--White, #fff);
border-radius: 6px;
box-shadow: 0px 2px 10px 0px rgba(97, 138, 255, 0.5);
font-size: 14px;
align-items: center;
`;

export const Option = styled.div`
Expand Down Expand Up @@ -183,6 +189,56 @@ export const Option = styled.div`
}
`;

export const WorkspaceOption = styled.div`
position: absolute;
z-index: 1;
top: 50px;
right: -40px;
width: 210px;
height: 155px;
display: inline-flex;
padding: 12px 28px 12px 28px;
flex-direction: column;
align-items: center;
gap: 25px;
border-radius: 6px;
background: #fff;
overflow-y: scroll;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
ul {
list-style: none;
padding: 0;
margin: 0;
color: grey;
}
li {
padding: 8px 3px;
cursor: pointer;
color: grey;
font-family: 'Barlow', sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 18px;
border-bottom: 0.5px solid #ccc;
&:hover {
color: #3c3f41;
}
}
`;

export const WorkspaceText = styled.div`
flex: 2,
text-align: 'center';
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
`;

export const CustomButton = styled.button`
display: flex;
width: 113px;
Expand All @@ -202,3 +258,5 @@ export const CustomButton = styled.button`
export const Flex = styled.div`
display: flex;
`;

export const HeaderSelect = styled(Select)``;
20 changes: 20 additions & 0 deletions src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ describe('Header Component', () => {
test('displays header with extras', async () => {
const setStartDateMock = jest.fn();
const setEndDateMock = jest.fn();
const setWorkspaceMock = jest.fn();

const exportCSVText = 'Export CSV';

const { rerender } = render(
Expand All @@ -35,6 +37,8 @@ describe('Header Component', () => {
endDate={moment().startOf('day').unix()}
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);

Expand All @@ -61,6 +65,8 @@ describe('Header Component', () => {
endDate={moment().startOf('day').unix()}
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);
});
Expand All @@ -77,6 +83,8 @@ describe('Header Component', () => {
endDate={moment().startOf('day').unix()}
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);
});
Expand All @@ -89,6 +97,7 @@ describe('Header Component', () => {
test('displays same year for startDate and endDate', () => {
const setStartDateMock = jest.fn();
const setEndDateMock = jest.fn();
const setWorkspaceMock = jest.fn();
const exportCSVText = 'Export CSV';

const { rerender } = render(
Expand All @@ -97,6 +106,8 @@ describe('Header Component', () => {
endDate={moment().subtract('days').startOf('day').unix()} // Same year as startDate
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);

Expand Down Expand Up @@ -125,6 +136,7 @@ describe('Header Component', () => {
test('displays year for both dates for different startDate and endDate years', () => {
const setStartDateMock = jest.fn();
const setEndDateMock = jest.fn();
const setWorkspaceMock = jest.fn();
const exportCSVText = 'Export CSV';

const { rerender } = render(
Expand All @@ -133,6 +145,8 @@ describe('Header Component', () => {
endDate={moment().subtract('days').startOf('day').unix()} // Same year as startDate
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);

Expand All @@ -158,6 +172,7 @@ describe('Header Component', () => {
test('displays header with a 7-day difference by default', async () => {
const setStartDateMock = jest.fn();
const setEndDateMock = jest.fn();
const setWorkspaceMock = jest.fn();
const exportCSVText = 'Export CSV';

// Adjusted to ensure a 7-day difference by default
Expand All @@ -170,6 +185,8 @@ describe('Header Component', () => {
endDate={endDate}
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);

Expand All @@ -192,13 +209,16 @@ describe('Header Component', () => {
test('displays "Custom" when dates are selected', async () => {
const setStartDateMock = jest.fn();
const setEndDateMock = jest.fn();
const setWorkspaceMock = jest.fn();

render(
<Header
startDate={moment().subtract(7, 'days').startOf('day').unix()}
endDate={moment().startOf('day').unix()}
setStartDate={setStartDateMock}
setEndDate={setEndDateMock}
workspace={''}
setWorkspace={setWorkspaceMock}
/>
);

Expand Down
85 changes: 76 additions & 9 deletions src/pages/superadmin/header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect, useCallback } from 'react';
import moment from 'moment';
import { mainStore } from 'store/main';
import { mainStore, Workspace } from 'store/main';
import {
AlternateWrapper,
ButtonWrapper,
Expand All @@ -13,24 +13,39 @@ import {
RightWrapper,
Container,
Option,
CustomButton
CustomButton,
WorkspaceOption,
WorkspaceText
} from './HeaderStyles';
import arrowback from './icons/arrowback.svg';
import arrowforward from './icons/arrowforward.svg';
import expand_more from './icons/expand_more.svg';
import App from './components/Calendar/App';

interface HeaderProps {
startDate?: number;
endDate?: number;
setStartDate: (newDate: number) => void;
setEndDate: (newDate: number) => void;
workspace: string;
setWorkspace: React.Dispatch<React.SetStateAction<string>>;
}
export const Header = ({ startDate, setStartDate, endDate, setEndDate }: HeaderProps) => {
export const Header = ({
startDate,
setStartDate,
endDate,
setEndDate,
workspace,
setWorkspace
}: HeaderProps) => {
const [showSelector, setShowSelector] = useState(false);
const [showWorkspace, setShowWorkspace] = useState(false);
const [dateDiff, setDateDiff] = useState(7);
const [exportLoading, setExportLoading] = useState(false);
const [showCalendar, setShowCalendar] = useState(false);
const [dropdownText, setDropdownText] = useState<string>('Last 7 Days');
const [workspaceText, setWorkspaceText] = useState<string>('Workspaces ...');
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
const formatUnixDate = (unixDate: number) => {
const formatString = 'DD MMM YYYY';
if (startDate !== undefined && endDate !== undefined) {
Expand Down Expand Up @@ -67,10 +82,13 @@ export const Header = ({ startDate, setStartDate, endDate, setEndDate }: HeaderP

const exportCsv = async () => {
setExportLoading(true);
const csvUrl = await mainStore.exportMetricsBountiesCsv({
start_date: String(startDate),
end_date: String(endDate)
});
const csvUrl = await mainStore.exportMetricsBountiesCsv(
{
start_date: String(startDate),
end_date: String(endDate)
},
workspace
);

if (csvUrl) {
window.open(csvUrl);
Expand Down Expand Up @@ -109,22 +127,47 @@ export const Header = ({ startDate, setStartDate, endDate, setEndDate }: HeaderP
}
};

const handleWorkspaceChange = (option: string) => {
if (option === 'all') {
setWorkspaceText('All');
setWorkspace('');
} else {
setWorkspace(option);
const activeSpace = workspaces.find((work: Workspace) => work.uuid === option);
setWorkspaceText(activeSpace?.name ?? '');
}
};

const currentDateUnix = moment().unix();
const optionRef = useRef<HTMLDivElement | null>(null);
const workspaceRef = useRef<HTMLDivElement | null>(null);

useEffect(() => {
const handleOutsideClick = (event: MouseEvent) => {
if (optionRef.current && !optionRef.current.contains(event.target as Node)) {
setShowSelector(!showSelector);
}

if (workspaceRef.current && !workspaceRef.current.contains(event.target as Node)) {
setShowWorkspace(!showWorkspace);
}
};

window.addEventListener('click', handleOutsideClick);

return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [showSelector]);
}, [showSelector, showWorkspace]);

const getWorkspaces = useCallback(async () => {
const workspaces = await mainStore.getAdminWorkspaces();
setWorkspaces(workspaces);
}, []);

useEffect(() => {
getWorkspaces();
}, [getWorkspaces]);

return (
<Container>
Expand Down Expand Up @@ -156,6 +199,30 @@ export const Header = ({ startDate, setStartDate, endDate, setEndDate }: HeaderP
<ExportButton disabled={exportLoading} onClick={() => exportCsv()}>
<ExportText>{exportLoading ? 'Exporting ...' : 'Export CSV'}</ExportText>
</ExportButton>
<DropDown
data-testid="WorkspaceDropDown"
onClick={() => {
setShowWorkspace(!showWorkspace);
}}
style={{ position: 'relative' }}
>
<WorkspaceText style={{ flex: 2, textAlign: 'center' }}>{workspaceText}</WorkspaceText>
<div>
<img src={expand_more} alt="a" />
</div>
{showWorkspace ? (
<WorkspaceOption ref={workspaceRef}>
<ul>
<li onClick={() => handleWorkspaceChange('all')}>All</li>
{workspaces.map((work: Workspace) => (
<li key={work.uuid} onClick={() => handleWorkspaceChange(work.uuid)}>
{work.name}
</li>
))}
</ul>
</WorkspaceOption>
) : null}
</DropDown>
<DropDown
data-testid="DropDown"
onClick={() => {
Expand Down
Loading

0 comments on commit d2b6ca7

Please sign in to comment.