[MM-51844 & MM-51843] Work template permissions check (#22825)

server/channels/app/worktemplates/templates.yaml

@@ -42,7 +42,7 @@ content:
       template: "Product Release"
       name: "Feature release"
       id: product-release-playbook
-      illustration: "/static/worktemplates/product_teams/feature_release/playbook.png"
+      illustration: "/static/worktemplates/playbooks/product_release.png"
   - integration:
       id: jira
   - integration:

server/channels/app/worktemplates/worktemplate_generated.go

@@ -143,7 +143,7 @@ var wt00a1b44a5831c0a3acb14787b3fdd352 = &WorkTemplate{
 				Template:     "Product Release",
 				Name:         "Feature release",
 				ID:           "product-release-playbook",
-				Illustration: "/static/worktemplates/product_teams/feature_release/playbook.png",
+				Illustration: "/static/worktemplates/playbooks/product_release.png",
 			},
 		},
 		{

webapp/channels/src/components/work_templates/components/customize.tsx

@@ -11,9 +11,12 @@ import {trackEvent} from 'actions/telemetry_actions';
 import Constants, {TELEMETRY_CATEGORIES} from 'utils/constants';
 import {isEnterpriseOrE20License} from 'utils/license_utils';
 import {getLicense} from 'mattermost-redux/selectors/entities/general';
-
+import {haveICurrentTeamPermission} from 'mattermost-redux/selectors/entities/roles';
+import {Permissions} from 'mattermost-redux/constants';
+import {GlobalState} from 'types/store';
 import {Visibility, WorkTemplate} from '@mattermost/types/work_templates';
 import {ChannelType} from '@mattermost/types/channels';
+
 export interface CustomizeProps {
     className?: string;
     name: string;
@@ -38,6 +41,10 @@ const Customize = ({
     const templateHasChannels = template.content.findIndex((item) => item.channel) !== -1;
     const templateHasBoards = template.content.findIndex((item) => item.board) !== -1;
     const templateHasPlaybooks = template.content.findIndex((item) => item.playbook) !== -1;
+    const canCreatePublicChannel = useSelector((state: GlobalState) => haveICurrentTeamPermission(state, Permissions.CREATE_PUBLIC_CHANNEL));
+    const canCreatePrivateChannel = useSelector((state: GlobalState) => haveICurrentTeamPermission(state, Permissions.CREATE_PRIVATE_CHANNEL));
+    const canCreatePublicPlaybook = useSelector((state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PUBLIC_CREATE));
+    const canCreatePrivatePlaybook = useSelector((state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PRIVATE_CREATE));
 
     useEffect(() => {
         trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'pageview_customize');
@@ -49,10 +56,39 @@ const Customize = ({
     };
 
     let privateButtonProps = {};
-    if (templateHasPlaybooks && !licenseIsEnterprise) {
+    let publicButtonProps = {};
-        if (visibility === Visibility.Private) {
+    if (templateHasPlaybooks) {
-            onVisibilityChanged(Visibility.Public);
+        if (!canCreatePublicPlaybook) {
+            publicButtonProps = {
+                tooltip: formatMessage({id: 'work_templates.customize.public_playbook_permission_issue', defaultMessage: 'You do not have permission to create public playbooks.'}),
+                disabled: true,
+            };
         }
+        if (!canCreatePrivatePlaybook) {
+            privateButtonProps = {
+                tooltip: formatMessage({id: 'work_templates.customize.private_playbook_permission_issue', defaultMessage: 'You do not have permission to create private playbooks.'}),
+                disabled: true,
+            };
+        }
+    }
+
+    if (templateHasChannels) {
+        if (!canCreatePublicChannel) {
+            publicButtonProps = {
+                tooltip: formatMessage({id: 'work_templates.customize.public_channel_permission_issue', defaultMessage: 'You do not have permission to create public channels.'}),
+                disabled: true,
+            };
+        }
+        if (!canCreatePrivateChannel) {
+            privateButtonProps = {
+                tooltip: formatMessage({id: 'work_templates.customize.private_channel_permission_issue', defaultMessage: 'You do not have permission to create private channels.'}),
+                disabled: true,
+            };
+        }
+    }
+
+    // leave this rule last as it has priority
+    if (templateHasPlaybooks && !licenseIsEnterprise) {
         privateButtonProps = {
             tooltip: formatMessage({id: 'work_templates.customize.private_playbook_license_issue', defaultMessage: 'Private playbooks requires an Enterprise license.'}),
             locked: true,
@@ -98,6 +134,7 @@ const Customize = ({
                     selected={privacySelectorValue}
                     onChange={onPrivacySelectorChanged}
                     privateButtonProps={privateButtonProps}
+                    publicButtonProps={publicButtonProps}
                 />
             </div>
         </div>
@@ -146,4 +183,3 @@ const StyledCustomized = styled(Customize)`
 `;
 
 export default StyledCustomized;
-

webapp/channels/src/i18n/en.json

@@ -5699,7 +5699,11 @@
   "work_templates.customize.name_label_all": "Name your channel, board, and playbook",
   "work_templates.customize.name_label_channels_boards": "Name your channel and board",
   "work_templates.customize.name_label_channels_playbooks": "Name your channel and playbook",
+  "work_templates.customize.private_channel_permission_issue": "You do not have permission to create private channels.",
   "work_templates.customize.private_playbook_license_issue": "Private playbooks requires an Enterprise license.",
+  "work_templates.customize.private_playbook_permission_issue": "You do not have permission to create private playbooks.",
+  "work_templates.customize.public_channel_permission_issue": "You do not have permission to create public channels.",
+  "work_templates.customize.public_playbook_permission_issue": "You do not have permission to create public playbooks.",
   "work_templates.customize.visibility_title": "Who should have access to this?",
   "work_templates.menu.modal_title": "Create from a template",
   "work_templates.menu.quick_use": "Quick use",

webapp/channels/src/selectors/work_template.ts

@@ -3,14 +3,23 @@
 
 import {createSelector} from 'reselect';
 
-import {getFeatureFlagValue} from 'mattermost-redux/selectors/entities/general';
+import {getFeatureFlagValue, getLicense} from 'mattermost-redux/selectors/entities/general';
 import {GlobalState} from 'types/store';
+import {haveICurrentTeamPermission} from 'mattermost-redux/selectors/entities/roles';
+import {Permissions} from 'mattermost-redux/constants';
+import {isEnterpriseOrE20License} from 'utils/license_utils';
 
 export const areWorkTemplatesEnabled = createSelector(
     'areWorktemplatesEnabled',
     (state: GlobalState) => getFeatureFlagValue(state, 'WorkTemplate') === 'true',
-    (workTemplateFF) => {
+    (state: GlobalState) => getLicense(state),
-        return workTemplateFF;
+    (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.CREATE_PUBLIC_CHANNEL) || haveICurrentTeamPermission(state, Permissions.CREATE_PRIVATE_CHANNEL),
+    (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PUBLIC_CREATE),
+    (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PRIVATE_CREATE),
+    (workTemplateFF, license, canCreateChannel, canCreatePublicPlaybook, canCreatePrivatePlaybook) => {
+        const licenseIsEnterprise = isEnterpriseOrE20License(license);
+        const canCreatePlaybook = canCreatePublicPlaybook || (canCreatePrivatePlaybook && licenseIsEnterprise);
+        return workTemplateFF && canCreateChannel && canCreatePlaybook;
     },
 );