Skip to content

Add details to submit panel about acceptance criteria #5820

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

Draft
marcellamaki wants to merge 1 commit into
base: unstable
Choose a base branch
from
Draft

Add details to submit panel about acceptance criteria #5820

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
28 changes: 10 additions & 18 deletions ...els/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,13 @@ jest.mock('shared/data/resources', () => ({

const store = factory();

const { nonePrimaryInfo$, flaggedPrimaryInfo$, approvedPrimaryInfo$, submittedPrimaryInfo$ } =
communityChannelsStrings;
const {
nonePrimaryInfo$,
flaggedPrimaryInfo$,
approvedPrimaryInfo$,
submittedPrimaryInfo$,
countriesInfoText$,
} = communityChannelsStrings;

async function makeWrapper({ channel, publishedData, latestSubmission }) {
const isLoading = ref(true);
Expand Down Expand Up @@ -235,31 +240,18 @@ describe('SubmitToCommunityLibrarySidePanel', () => {
expect(moreDetailsButton.exists()).toBe(true);
});

it('is not displayed when there are previous submissions', async () => {
const wrapper = await makeWrapper({
channel: publishedNonPublicChannel,
publishedData,
latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.APPROVED },
});

const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
expect(moreDetailsButton.exists()).toBe(false);
});

it('when clicked, shows additional info', async () => {
it('when clicked, shows country info and a hide button', async () => {
const wrapper = await makeWrapper({
channel: publishedNonPublicChannel,
publishedData,
latestSubmission: null,
});

const infoText = wrapper.find('.info-text');
expect(infoText.text()).not.toContain('The Kolibri Community Library features channels');

const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
expect(wrapper.text()).not.toContain(countriesInfoText$());
await moreDetailsButton.trigger('click');

expect(infoText.text()).toContain('The Kolibri Community Library features channels');
expect(wrapper.text()).toContain(countriesInfoText$());

const lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
expect(lessDetailsButton.exists()).toBe(true);
Expand Down
94 changes: 94 additions & 0 deletions ...on/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,43 @@
:channel-version-id="channelVersionId"
@update:allChecked="allSpecialPermissionsChecked = $event"
/>
<hr >
<div class="info-text">
<p class="checklist-intro">
{{ channelFitChecklistIntro$() }}
</p>
<ul
v-if="showingCriteria"
class="checklist"
>
<li>
<strong>{{ channelFitLicenseLabel$() }}:</strong>
{{ channelFitChecklistLicense$() }}
</li>
<li>
<strong>{{ channelFitOfflineUseLabel$() }}:</strong>
{{ channelFitChecklistOfflineUse$() }}
</li>
<li>
<strong>{{ channelFitAttributionLabel$() }}:</strong>
{{ channelFitChecklistAttribution$() }}
</li>
<li>
<strong>{{ channelFitQualityLabel$() }}:</strong>
{{ channelFitChecklistQuality$() }}
</li>
<li>
<strong>{{ channelFitChannelInfoLabel$() }}:</strong>
{{ channelFitChecklistChannelInfo$() }}
</li>
</ul>
<KButton
appearance="basic-link"
@click="showingCriteria = !showingCriteria"
>
{{ showingCriteria ? hideCriteriaAction$() : viewCriteriaAction$() }}
</KButton>
</div>
<div class="country-area">
<KTransition kind="component-fade-out-in">
<div
Expand All @@ -171,6 +208,25 @@
/>
</KTransition>
</div>
<div v-if="showingMoreDetails">
<div class="info-text">{{ countriesInfoText$() }}</div>
<KButton
appearance="basic-link"
data-test="less-details-button"
@click="showingMoreDetails = false"
>
{{ lessDetailsButton$() }}
</KButton>
</div>
<div v-else>
<KButton
appearance="basic-link"
data-test="more-details-button"
@click="showingMoreDetails = true"
>
{{ moreDetailsButton$() }}
</KButton>
</div>
<KTextbox
v-model="description"
:disabled="!canBeEdited"
Expand Down Expand Up @@ -275,6 +331,7 @@
moreDetailsButton$,
lessDetailsButton$,
countryLabel$,
countriesInfoText$,
descriptionLabel$,
descriptionRequired$,
notPublishedWarningTitle$,
Expand All @@ -295,12 +352,26 @@
submittingSnackbar$,
publishingMessage$,
confirmReplacementText$,
channelFitChecklistIntro$,
channelFitLicenseLabel$,
channelFitChecklistLicense$,
channelFitOfflineUseLabel$,
channelFitChecklistOfflineUse$,
channelFitAttributionLabel$,
channelFitChecklistAttribution$,
channelFitQualityLabel$,
channelFitChecklistQuality$,
channelFitChannelInfoLabel$,
channelFitChecklistChannelInfo$,
viewCriteriaAction$,
hideCriteriaAction$,
} = communityChannelsStrings;

const annotationColor = computed(() => tokensTheme.annotation);
const infoTextColor = computed(() => paletteTheme.grey.v_700);

const showingMoreDetails = ref(false);
const showingCriteria = ref(false);
const countries = ref([]);
const description = ref('');
const isPublishing = computed(() => props.channel?.publishing === true);
Expand Down Expand Up @@ -542,6 +613,7 @@
annotationColor,
infoTextColor,
showingMoreDetails,
showingCriteria,
countries,
description,
replacementConfirmed,
Expand Down Expand Up @@ -571,6 +643,7 @@
moreDetailsButton$,
lessDetailsButton$,
countryLabel$,
countriesInfoText$,
descriptionLabel$,
descriptionRequired$,
channelVersion$,
Expand All @@ -587,6 +660,19 @@
confirmReplacementText$,
checkedSpecialPermissions,
allSpecialPermissionsChecked,
channelFitChecklistIntro$,
channelFitLicenseLabel$,
channelFitChecklistLicense$,
channelFitOfflineUseLabel$,
channelFitChecklistOfflineUse$,
channelFitAttributionLabel$,
channelFitChecklistAttribution$,
channelFitQualityLabel$,
channelFitChecklistQuality$,
channelFitChannelInfoLabel$,
channelFitChecklistChannelInfo$,
viewCriteriaAction$,
hideCriteriaAction$,
};
},
props: {
Expand Down Expand Up @@ -628,6 +714,14 @@
color: v-bind('annotationColor');
}

.checklist {
padding-bottom: 12px;
}

.checklist-intro {
font-weight: 600;
}

.content {
display: flex;
flex-direction: column;
Expand Down
69 changes: 66 additions & 3 deletions contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,8 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
'Information shown in the "Submit to Community Library" panel when a previous version was flagged',
},
nonePrimaryInfo: {
message: 'Your published channel will be added to the Community Library review queue.',
message:
"We're inviting members of the Kolibri community to submit channels they've created for offline learning in low-resource settings. ",
context:
'Information shown in the "Submit to Community Library" panel when there are no previous submissions',
},
Expand All @@ -180,10 +181,15 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
},
moreDetails: {
message:
"The Kolibri Community Library features channels created by the community. Share your openly licensed work for review, and once it's approved, it will be available to users in your selected region or language.",
"After your submission is approved, the channel will be available to other Kolibri Studio users on the 'Community Library' page.",
context:
'Detailed description of the Community Library shown in the "Submit to Community Library" panel',
},
countriesInfoText: {
message:
'Select one or more countries to tag your channels submission with. For example, if your channel contains materials aligned to a national curriculum or regionally-specific content, selecting the relevant countries will help users find it. Otherwise, leave this blank.',
context: 'Help text for the country selection field in the "Submit to Community Library" panel',
},
notPublishedWarningTitle: {
message: "This channel isn't published to Kolibri Studio yet",
context:
Expand Down Expand Up @@ -216,7 +222,7 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
'Description of warning shown in the "Submit to Community Library" panel when the current version is already submitted',
},
descriptionLabel: {
message: "Describe what's new in this submission",
message: "Describe what's included in this submission",
context:
'Label for the submission description field in the "Submit to Community Library" panel',
},
Expand Down Expand Up @@ -273,6 +279,63 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
context:
'Label for the notes that admins can add to a submission in the Community Library for themselves',
},
channelFitLicenseLabel: {
message: 'License',
context: 'Label for the license checklist item in the channel fit checklist',
},
channelFitOfflineUseLabel: {
message: 'Offline use',
context: 'Label for the offline use checklist item in the channel fit checklist',
},
channelFitAttributionLabel: {
message: 'Attribution',
context: 'Label for the attribution checklist item in the channel fit checklist',
},
channelFitQualityLabel: {
message: 'Quality',
context: 'Label for the quality checklist item in the channel fit checklist',
},
channelFitChannelInfoLabel: {
message: 'Channel information',
context: 'Label for the channel information checklist item in the channel fit checklist',
},
channelFitChecklistIntro: {
message: 'Is your channel a good fit?',
context:
'Introductory text before a checklist of criteria for submitting a channel to the Community Library',
},
viewCriteriaAction: {
message: 'View criteria',
context: 'Button text to view the channel fit checklist criteria',
},
hideCriteriaAction: {
message: 'Hide criteria',
context: 'Button text to hide the channel fit checklist criteria',
},
channelFitChecklistLicense: {
message: 'Is your content openly licensed or in the public domain?',
context:
'License checklist item asking whether the channel content uses open or public domain licenses',
},
channelFitChecklistOfflineUse: {
message: 'Does your channel work without an internet connection?',
context: 'Offline use checklist item asking whether the channel works offline',
},
channelFitChecklistAttribution: {
message: 'Does each piece of content have an author listed?',
context: 'Attribution checklist item asking whether content items have authors listed',
},
channelFitChecklistQuality: {
message:
'Has anyone on your team or in your organization reviewed it and found it useful for learners?',
context:
'Quality checklist item asking whether the channel has been reviewed and validated by someone on the team',
},
channelFitChecklistChannelInfo: {
message:
"Is your channel's basic information filled in — title, description, thumbnail, language, subject, and level?",
context: 'Channel information checklist item asking whether the channel metadata is complete',
},
confirmReplacementText: {
message: 'I understand this will replace my earlier submission on the review queue',
context: 'Checkbox text shown when there is a pending submission to confirm replacement',
Expand Down
Loading