Merge branch '214268-fix-group-level-public-access' into 'master'

Display the unavailable state when user has no access

See merge request gitlab-org/gitlab!29907

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -5,6 +5,7 @@ import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import FirstClassProjectSecurityDashboard from './components/first_class_project_security_dashboard.vue';
 import FirstClassGroupSecurityDashboard from './components/first_class_group_security_dashboard.vue';
 import FirstClassInstanceSecurityDashboard from './components/first_class_instance_security_dashboard.vue';
+import UnavailableState from './components/unavailable_state.vue';
 import createStore from './store';
 import createRouter from './store/router';
 import projectsPlugin from './store/plugins/projects';
@@ -21,27 +22,35 @@ export default (
   dashboardType = isRequired('No dashboard type was passed to the security dashboard initializer'),
   /* eslint-enable @gitlab/require-i18n-strings */
 ) => {
+  if (el.dataset.isUnavailable) {
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(UnavailableState, {
+          props: {
+            link: el.dataset.dashboardDocumentation,
+            svgPath: el.dataset.emptyStateSvgPath,
+          },
+        });
+      },
+    });
+  }
+
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
-  const {
-    dashboardDocumentation,
-    emptyStateSvgPath,
-    hasPipelineData,
-    securityDashboardHelpPath,
-    projectAddEndpoint,
-    projectListEndpoint,
-  } = el.dataset;
+
   const props = {
-    emptyStateSvgPath,
-    dashboardDocumentation,
-    hasPipelineData: Boolean(hasPipelineData),
-    securityDashboardHelpPath,
-    projectAddEndpoint,
-    projectListEndpoint,
+    emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+    dashboardDocumentation: el.dataset.dashboardDocumentation,
+    hasPipelineData: Boolean(el.dataset.hasPipelineData),
+    securityDashboardHelpPath: el.dataset.securityDashboardHelpPath,
+    projectAddEndpoint: el.dataset.projectAddEndpoint,
+    projectListEndpoint: el.dataset.projectListEndpoint,
   };
+
   let component;
 
   if (dashboardType === DASHBOARD_TYPES.PROJECT) {