Skip to content

Show anonymous user banner on assignment viewer page #2920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cqnykamp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Show anonymous user banner on assignment viewer page #2920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions apps/app/src/paths/AssignmentViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,17 @@ import {

import { DoenetViewer } from "@doenet/doenetml-iframe";

import { Box, Button, Grid, GridItem, Text, Tooltip } from "@chakra-ui/react";
import {
Alert,
AlertDescription,
AlertIcon,
Box,
Button,
Grid,
GridItem,
Text,
Tooltip,
} from "@chakra-ui/react";
import axios, { AxiosError } from "axios";
import {
EnterClassCode,
Expand Down Expand Up @@ -256,6 +266,10 @@ export function AssignmentViewer() {
throw Error("User should have been defined");
}

const isAnonymous = user.isAnonymous === true;
const anonymousBannerHeight = "40px";
const headerHeight = isAnonymous ? "120px" : "80px";

const [attemptNumber, setAttemptNumber] = useState<number>(
loaderData.attemptNumber,
);
Expand Down Expand Up @@ -565,8 +579,6 @@ export function AssignmentViewer() {
const baseUrl = window.location.protocol + "//" + window.location.host;
const doenetViewerUrl = `${baseUrl}/activityViewer`;

const headerHeight = "80px";

let viewer: ReactElement<any>;
if (loaderData.type === "singleDoc") {
const maxAttempts = assignment.assignmentInfo?.maxAttempts ?? 0;
Expand Down Expand Up @@ -698,6 +710,25 @@ export function AssignmentViewer() {
</Grid>
</GridItem>

{isAnonymous && (
<Box
position="fixed"
top="80px"
height={anonymousBannerHeight}
width="100%"
zIndex="500"
data-test="Anonymous User Banner"
>
<Alert status="warning" height={anonymousBannerHeight}>
<AlertIcon />
<AlertDescription>
You are logged in as an anonymous user. Your work is saved in this
browser only and may be lost if you clear your browser data.
</AlertDescription>
</Alert>
</Box>
)}

<GridItem
area="centerContent"
height={`calc(100vh - ${headerHeight})`}
Expand Down
51 changes: 51 additions & 0 deletions packages/e2e-tests/e2e/Assignments/assignmentWorkflow.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,4 +519,55 @@ describe("Assignment workflow Tests", function () {
});
},
);

it(
"Anonymous user sees banner; non-anonymous user does not",
{ tags: ["@group1"] },
() => {
const code = Date.now().toString();
const instructorEmail = `test${code}@doenet.org`;
cy.loginAsTestUser({
isAuthor: true,
email: instructorEmail,
firstNames: "Instructor",
lastNames: "One",
});

let classCode: number | null = null;

cy.createContent({
name: "Test Assignment",
contentType: "singleDoc",
doenetML: `<p>Hello world</p>`,
}).then((contentId) => {
cy.createAssignment({
contentId,
closedOn: DateTime.now().plus({ days: 7 }).toISO(),
}).then(({ classCode: cc }) => {
classCode = cc;
});
});

// Anonymous user sees the banner
cy.loginAsTestUser({ isAnonymous: true });

cy.then(() => {
cy.visit(`/code/${classCode}`);
cy.get('[data-test="Anonymous User Banner"]').should("be.visible");
cy.contains("anonymous user").should("be.visible");
});

// Non-anonymous user does not see the banner
cy.loginAsTestUser({
email: instructorEmail,
firstNames: "Instructor",
lastNames: "One",
});

cy.then(() => {
cy.visit(`/code/${classCode}`);
cy.get('[data-test="Anonymous User Banner"]').should("not.exist");
});
},
);
});
Loading