feat: [AXIMST-23] Course unit - Sidebar with unit info

[peterkulko]

YouTrack
https://youtrack.raccoongang.com/issue/AXIMST-23

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (ts-develop@3812f03). Click here to learn what that means.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@              Coverage Diff              @@
##             ts-develop     #117   +/-   ##
=============================================
  Coverage              ?   88.93%           
=============================================
  Files                 ?      558           
  Lines                 ?     9240           
  Branches              ?     1930           
=============================================
  Hits                  ?     8218           
  Misses                ?      974           
  Partials              ?       48           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[monteri]

We will open this PR into upstream. I think it should not contain such comments that are related to our work to make sure PRs are merged faster without additional questions.

[peterkulko]

Removed

[monteri]

Suggested change

	const useCourseUnitData = (unitData) => {
	const useCourseUnitData = ({ hasChanges, published, visibilityState }) => {

[peterkulko]

Changed

[monteri]

Suggested change

	let title = intl.formatMessage(messages.sidebarTitleDraftNeverPublished);
	let releaseLabel = getUnitReleaseStatus(intl).release;
	switch (visibilityState) {
	case UNIT_VISIBILITY_STATES.staffOnly:
	title = intl.formatMessage(messages.sidebarTitleVisibleToStaffOnly);
	break;
	case UNIT_VISIBILITY_STATES.live:
	title = intl.formatMessage(messages.sidebarTitlePublishedAndLive);
	releaseLabel = getUnitReleaseStatus(intl).released;
	break;
	case UNIT_VISIBILITY_STATES.ready:
	releaseLabel = getUnitReleaseStatus(intl).scheduled;
	break;
	default:
	if (published) {
	title = hasChanges
	? intl.formatMessage(messages.sidebarTitleDraftUnpublishedChanges)
	: intl.formatMessage(messages.sidebarTitlePublishedNotYetReleased);
	}
	break;
	}
	const titleMessages = {
	[UNIT_VISIBILITY_STATES.staffOnly]: messages.sidebarTitleVisibleToStaffOnly,
	[UNIT_VISIBILITY_STATES.live]: messages.sidebarTitlePublishedAndLive,
	default: published ? (hasChanges ? messages.sidebarTitleDraftUnpublishedChanges : messages.sidebarTitlePublishedNotYetReleased)
	: messages.sidebarTitleDraftNeverPublished,
	};
	const releaseLabels = {
	[UNIT_VISIBILITY_STATES.staffOnly]: releaseStatus.release,
	[UNIT_VISIBILITY_STATES.live]: releaseStatus.released,
	[UNIT_VISIBILITY_STATES.ready]: releaseStatus.scheduled,
	default: releaseStatus.release,
	};
	const releaseStatus = getUnitReleaseStatus(intl);
	const title = titleMessages[visibilityState] || titleMessages.default;
	const releaseLabel = releaseLabels[visibilityState] || releaseLabels.default;

Generally try to use Object instead of switch-case

[peterkulko]

Added

[monteri]

Suggested change

	if (hasChanges && editedOn && editedBy) {
	return intl.formatMessage(messages.publishInfoDraftSaved, { editedOn, editedBy });
	} if (publishedOn && publishedBy) {
	return intl.formatMessage(messages.publishLastPublished, { publishedOn, publishedBy });
	}
	return intl.formatMessage(messages.publishInfoPreviouslyPublished);
	if (hasChanges && editedOn && editedBy) {
	return intl.formatMessage(messages.publishInfoDraftSaved, { editedOn, editedBy });
	} else if (publishedOn && publishedBy) {
	return intl.formatMessage(messages.publishLastPublished, { publishedOn, publishedBy });
	} else {
	return intl.formatMessage(messages.publishInfoPreviouslyPublished);
	}

[peterkulko]

Added variable

[monteri]

Suggested change

	export const getReleaseInfo = (intl, releaseDate, releaseDateFrom) => {
	if (releaseDate) {
	return (
	<span className="course-unit-sidebar-date-and-with">
	<h6 className="course-unit-sidebar-date-timestamp m-0 d-inline">
	{releaseDate}&nbsp;
	</h6>
	{intl.formatMessage(messages.releaseInfoWithSection, { sectionName: releaseDateFrom })}
	</span>
	);
	}
	return intl.formatMessage(messages.releaseInfoUnscheduled);
	};
	export const getReleaseInfo = (intl, releaseDate, releaseDateFrom) => {
	if (releaseDate) {
	return {
	isScheduled: true,
	releaseDate,
	releaseDateFrom,
	sectionNameMessage: intl.formatMessage(messages.releaseInfoWithSection, { sectionName: releaseDateFrom }),
	};
	}
	return {
	isScheduled: false,
	message: intl.formatMessage(messages.releaseInfoUnscheduled),
	};
	};

We don't use JSX in utils, please change the usage of this function

[monteri]

import React from 'react';
import { getReleaseInfo } from './utils';

const ReleaseInfoComponent = ({ intl, releaseDate, releaseDateFrom }) => {
  const releaseInfo = getReleaseInfo(intl, releaseDate, releaseDateFrom);

  if (releaseInfo.isScheduled) {
    return (
      <span className="course-unit-sidebar-date-and-with">
        <h6 className="course-unit-sidebar-date-timestamp m-0 d-inline">
          {releaseInfo.releaseDate}&nbsp;
        </h6>
        {releaseInfo.sectionNameMessage}
      </span>
    );
  }

  return <>{releaseInfo.message}</>;
};

[peterkulko]

Created

[monteri]

Suggested change

	export const getIconVariant = (visibilityState, published, hasChanges) => {
	if (visibilityState === UNIT_VISIBILITY_STATES.staffOnly) {
	// Visible to staff only
	return { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK };
	} if (visibilityState === UNIT_VISIBILITY_STATES.live) {
	// Published and live
	return { iconSrc: CheckCircleIcon, colorVariant: COLORS.GREEN };
	} if (published && !hasChanges) {
	// Published (not yet released)
	return { iconSrc: CheckCircleOutlineIcon, colorVariant: COLORS.BLACK };
	} if (published && hasChanges) {
	// Draft (unpublished changes)
	return { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK };
	}
	return { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK };
	};
	export const getIconVariant = (visibilityState, published, hasChanges) => {
	const iconVariants = {
	[UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
	[UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: COLORS.GREEN },
	publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: COLORS.BLACK },
	publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
	default: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
	};
	if (visibilityState in iconVariants) {
	return iconVariants[visibilityState];
	}
	if (published) {
	return hasChanges ? iconVariants.publishedWithChanges : iconVariants.publishedNoChanges;
	}
	return iconVariants.default;
	};

If there is many-if logic it is preferable to try Object solution.

[peterkulko]

Changed