feat: new locaition/pattern for StatusAlert update

Author: muselesscreator

src/components/StatefulStatus/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@edx/paragon';
+import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
+import { useActiveView } from 'hooks';
+import { routeSteps, stepStates } from 'data/services/lms/constants';
+import { useStepState } from 'data/services/lms/hooks/selectors';
+
+export const alertMap = {
+  [stepStates.completed]: {
+    variant: 'success',
+    icon: CheckCircle,
+  },
+  [stepStates.closed]: {
+    variant: 'danger',
+    icon: Info,
+  },
+  [stepStates.teamAlreadySubmitted]: {
+    variant: 'warning',
+    icon: WarningFilled,
+  },
+  [stepStates.cancelled]: {
+    variant: 'warning',
+    icon: WarningFilled,
+  },
+  [stepStates.inProgress]: {
+    variant: 'dark',
+    icon: null,
+  },
+};
+
+const StatusAlert = ({
+  headerText,
+  message,
+  action,
+  alertState,
+}) => {
+  // let stepState = useStepState({ step: routeSteps[useActiveView()] });
+  const { variant, icon } = alertMap[alertState];
+  const actions = action ? [action] : [];
+
+  console.log({ alertState, variant, icon });
+
+  return (
+    <Alert
+      variant={variant}
+      icon={icon}
+      actions={actions}
+    >
+      <Alert.Heading>{headerText}</Alert.Heading>
+      <p>{message}</p>
+    </Alert>
+  );
+};
+StatusAlert.defaultProps = {
+  action: null,
+  alertState: null,
+};
+StatusAlert.propTypes = {
+  headerText: PropTypes.node.isRequired,
+  message: PropTypes.node.isRequired,
+  action: PropTypes.node,
+  alertState: PropTypes.string,
+};
+
+export default StatusAlert;

src/components/StatusAlert/index.jsx

@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  inProgressBadge: {
+    id: 'ora-grading.StatusAlert.inProgressBadge',
+    defaultMessage: 'In Progress',
+    description: 'Label for the in progress badge',
+  },
+  completedBadge: {
+    id: 'ora-grading.StatusAlert.completedBadge',
+    defaultMessage: 'Completed',
+    description: 'Label for the completed badge',
+  },
+  closedBadge: {
+    id: 'ora-grading.StatusAlert.closedBadge',
+    defaultMessage: 'Incomplete',
+    description: 'Label for the incomplete badge',
+  },
+  cancelledBadge: {
+    id: 'ora-grading.StatusAlert.cancelledBadge',
+    defaultMessage: 'Cancelled',
+    description: 'Label for the cancelled badge',
+  },
+});
+
+export default messages;

src/components/StatusAlert/messages.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@edx/paragon';
+
+import StatusAlert from 'components/StatusAlert';
+
+const CancelledState = ({
+  headerText,
+  message,
+  title,
+}) => (
+  <StatusAlert status="cancelled" title={title}>
+    <Alert.Heading>{headerText}</Alert.Heading>
+    <p>{message}</p>
+  </StatusAlert>
+);
+
+CancelledState.propTypes = {
+  headerText: PropTypes.node.isRequired,
+  message: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+};
+
+export default CancelledState;

src/components/StatusBadge/Statuses/CancelledState.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import StatusAlert from 'components/StatusAlert';
+
+const ErrorState = ({
+  headerText,
+  message,
+  title,
+}) => (
+  <StatusAlert title={title} status="error">
+    <Alert.Heading>{headerText}</Alert.Heading>
+    <p>{message}</p>
+  </StatusAlert>
+);
+ErrorState.propTypes = {
+  headerText: PropTypes.node.isRequired,
+  message: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+};
+
+export default ErrorState;

src/components/StatusBadge/Statuses/ErrorState.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import StatusAlert from 'components/StatusAlert';
+import messages from './messages';
+
+const InProgressState = ({
+  inProgressText,
+  actions,
+  title,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <StatusAlert status="default" title={title}>
+      <div>
+        <p><strong>{formatMessage(messages.instructions)}: </strong>{inProgressText}</p>
+        {actions}
+      </div>
+    </StatusAlert>
+  );
+};
+InProgressState.defaultProps = {
+  inProgressText: null,
+  actions: null,
+};
+InProgressState.propTypes = {
+  inProgressText: PropTypes.node,
+  actions: PropTypes.arrayOf(PropTypes.node),
+  title: PropTypes.node.isRequired,
+};
+
+export default InProgressState;

src/components/StatusBadge/Statuses/InProgressState.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@edx/paragon';
+
+import StatusAlert from 'components/StatusAlert';
+
+const SuccessState = ({
+  headerText,
+  message,
+  actions,
+  title,
+}) => (
+  <StatusAlert
+    title={title}
+    status="success"
+  >
+    <div className="d-flex align-items-center">
+      <div className="d-flex flex-column">
+        <Alert.Heading>{headerText}</Alert.Heading>
+        <p>{message}</p>
+      </div>
+      {actions}
+    </div>
+  </StatusAlert>
+);
+
+SuccessState.propTypes = {
+  headerText: PropTypes.node.isRequired,
+  message: PropTypes.node.isRequired,
+  actions: PropTypes.arrayOf(PropTypes.node),
+  title: PropTypes.node.isRequired,
+};
+export default SuccessState;

src/components/StatusBadge/Statuses/SuccessState.jsx

@@ -0,0 +1,4 @@
+export { default as InProgressState } from './InProgressState';
+export { default as CancelledState } from './CancelledState';
+export { default as SuccessState } from './SuccessState';
+export { default as ErrorState } from './ErrorState';

src/components/StatusBadge/Statuses/index.jsx

@@ -0,0 +1,97 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  yourResponse: {
+    id: 'ora-grading.AssessmentView.yourResponse',
+    defaultMessage: 'Your response',
+    description: 'Label for the response textarea',
+  },
+  instructions: {
+    id: 'ora-grading.AssessmentView.instructions',
+    defaultMessage: 'Instructions',
+    description: 'Label for the instructions textarea',
+  },
+  instructionsText: {
+    id: 'ora-grading.AssessmentView.instructionsText',
+    defaultMessage: `Create a response to the prompt below.
+    Progress will be saved automatically and you can return to complete your
+    progress at any time. After you submit your response, you cannot edit
+    it.`,
+    description: 'Description for the instructions textarea',
+  },
+  inProgressBadge: {
+    id: 'ora-grading.AssessmentView.inProgressBadge',
+    defaultMessage: 'In Progress',
+    description: 'Label for the in progress badge',
+  },
+  inProgressHeader: {
+    id: 'ora-grading.AssessmentView.inProgressHeader',
+    defaultMessage: 'Self-grading due by {dueDate}',
+    description: 'Header for the in progress badge',
+  },
+  inProgressText: {
+    id: 'ora-grading.AssessmentView.inProgressBadgeText',
+    defaultMessage: `Assess your own response and give
+    yourself a grade. Progress will be saved automatically and you
+    can return to complete your self assessment at any time. After
+    you submit your grade, you cannot edit it.`,
+    description: 'Description for the in progress badge',
+  },
+  inProgressButton: {
+    id: 'ora-grading.AssessmentView.inProgressButton',
+    defaultMessage: 'Begin self assessment',
+    description: 'Label for button to begin self assessment',
+  },
+  completedBadge: {
+    id: 'ora-grading.AssessmentView.completedBadge',
+    defaultMessage: 'Completed',
+    description: 'Label for the completed badge',
+  },
+  completedHeader: {
+    id: 'ora-grading.AssessmentView.completedHeader',
+    defaultMessage: 'Practice grading is complete!',
+    description: 'Header for the completed badge',
+  },
+  completedBodyHeader: {
+    id: 'ora-grading.AssessmentView.completedBodyHeader',
+    defaultMessage: 'Practice grading complete',
+    description: 'Alert header for the completed badge',
+  },
+  completedBodyButton: {
+    id: 'ora-grading.AssessmentView.completedBodyButton',
+    defaultMessage: 'Begin peer grading',
+    description: 'Label for button to view your grade',
+  },
+  errorBadge: {
+    id: 'ora-grading.AssessmentView.errorBadge',
+    defaultMessage: 'Incomplete',
+    description: 'Label for the incomplete badge',
+  },
+  errorHeader: {
+    id: 'ora-grading.AssessmentView.errorBadgeHeader',
+    defaultMessage: 'This step is past due!',
+    description: 'Header for the incomplete badge',
+  },
+  errorBodyHeader: {
+    id: 'ora-grading.AssessmentView.errorBodyHeader',
+    defaultMessage: 'The due date for this step has passed',
+    description: 'Alert header for the incomplete badge',
+  },
+  cancelledBadge: {
+    id: 'ora-grading.AssessmentView.cancelledBadge',
+    defaultMessage: 'Cancelled',
+    description: 'Label for the cancelled badge',
+  },
+  cancelledHeader: {
+    id: 'ora-grading.AssessmentView.cancelledBadgeHeader',
+    defaultMessage: 'Self-grading Due by {dueDate}',
+    description: 'Header for the cancelled badge',
+  },
+  cancelledBodyHeader: {
+    id: 'ora-grading.AssessmentView.cancelledBodyHeader',
+    defaultMessage: 'This step has been cancelled',
+    description: 'Alert header for the cancelled badge',
+  },
+});
+
+export default messages;