app/assets/javascripts/organizations/mock_groups.js

+/* eslint-disable @gitlab/require-i18n-strings */
+
+// This is temporary mock data that will be removed when completing the following:
+// https://gitlab.com/gitlab-org/gitlab/-/issues/420777
+// https://gitlab.com/gitlab-org/gitlab/-/issues/421441
+
+export const organizationGroups = [
+  {
+    id: 'gid://gitlab/Group/29',
+    fullName: 'Commit451',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/Commit451',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:52" dir="auto">Autem praesentium vel ut ratione itaque ullam culpa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero sem, congue ut sem id, semper pharetra ante. Sed at dui ac nunc pellentesque congue. Phasellus posuere, nisl non pellentesque dignissim, lacus nisi molestie ex, vel placerat neque ligula non libero. Curabitur ipsum enim, pretium eu dignissim vitae, euismod nec nibh. Praesent eget ipsum eleifend, pellentesque tortor vel, consequat neque. Etiam suscipit dolor massa, sed consectetur nunc tincidunt ut. Suspendisse posuere malesuada finibus. Maecenas iaculis et diam eu iaculis. Proin at nulla sit amet erat sollicitudin suscipit sit amet a libero.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 0,
+    projectsCount: 3,
+    groupMembersCount: 2,
+    visibility: 'public',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/33',
+    fullName: 'Flightjs',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/flightjs',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:60" dir="auto">Ipsa reiciendis deleniti officiis illum nostrum quo aliquam.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 4,
+    projectsCount: 3,
+    groupMembersCount: 1,
+    visibility: 'private',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/24',
+    fullName: 'Gitlab Org',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/gitlab-org',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:64" dir="auto">Dolorem dolorem omnis impedit cupiditate pariatur officia velit.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 1,
+    projectsCount: 1,
+    groupMembersCount: 2,
+    visibility: 'internal',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/27',
+    fullName: 'Gnuwget',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/gnuwgetf',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:47" dir="auto">Culpa soluta aut eius dolores est vel sapiente.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 4,
+    projectsCount: 2,
+    groupMembersCount: 3,
+    visibility: 'public',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/31',
+    fullName: 'Jashkenas',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/jashkenas',
+    descriptionHtml: '<p data-sourcepos="1:1-1:25" dir="auto">Ut ut id aliquid nostrum.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 3,
+    projectsCount: 3,
+    groupMembersCount: 10,
+    visibility: 'private',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/22',
+    fullName: 'Toolbox',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/toolbox',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:46" dir="auto">Quo voluptatem magnam facere voluptates alias.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 2,
+    projectsCount: 3,
+    groupMembersCount: 40,
+    visibility: 'internal',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/35',
+    fullName: 'Twitter',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/twitter',
+    descriptionHtml:
+      '<p data-sourcepos="1:1-1:40" dir="auto">Quae nulla consequatur assumenda id quo.</p>',
+    avatarUrl: null,
+    descendantGroupsCount: 20,
+    projectsCount: 30,
+    groupMembersCount: 100,
+    visibility: 'public',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/73',
+    fullName: 'test',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/test',
+    descriptionHtml: '',
+    avatarUrl: null,
+    descendantGroupsCount: 1,
+    projectsCount: 1,
+    groupMembersCount: 1,
+    visibility: 'private',
+    userPermissions: {
+      removeGroup: true,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/74',
+    fullName: 'Twitter / test subgroup',
+    parent: null,
+    webUrl: 'http://127.0.0.1:3000/groups/twitter/test-subgroup',
+    descriptionHtml: '',
+    avatarUrl: null,
+    descendantGroupsCount: 4,
+    projectsCount: 4,
+    groupMembersCount: 4,
+    visibility: 'internal',
+    userPermissions: {
+      removeGroup: false,
+    },
+    maxAccessLevel: {
+      integerValue: 30,
+    },
+    __typename: 'Group',
+  },
+];

app/assets/javascripts/organizations/mock_projects.js

@@ -8,6 +8,7 @@ export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/8',
     nameWithNamespace: 'Twitter / Typeahead.Js',
+    organizationEditPath: '/-/organizations/default/projects/twitter/Typeahead.Js/edit',
     webUrl: 'http://127.0.0.1:3000/twitter/Typeahead.Js',
     topics: ['JavaScript', 'Vue.js', 'GraphQL', 'Jest', 'CSS', 'HTML'],
     forksCount: 4,
@@ -30,6 +31,7 @@ export const organizationProjects = [
     },
     userPermissions: {
       removeProject: true,
+      viewEditPage: true,
     },
     maxAccessLevel: {
       integerValue: 30,
@@ -39,6 +41,7 @@ export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/7',
     nameWithNamespace: 'Flightjs / Flight',
+    organizationEditPath: '/-/organizations/default/projects/flightjs/Flight/edit',
     webUrl: 'http://127.0.0.1:3000/flightjs/Flight',
     topics: [],
     forksCount: 0,
@@ -61,6 +64,7 @@ export const organizationProjects = [
     },
     userPermissions: {
       removeProject: true,
+      viewEditPage: true,
     },
     maxAccessLevel: {
       integerValue: 30,
@@ -70,6 +74,7 @@ export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/6',
     nameWithNamespace: 'Jashkenas / Underscore',
+    organizationEditPath: '/-/organizations/default/projects/jashkenas/Underscore/edit',
     webUrl: 'http://127.0.0.1:3000/jashkenas/Underscore',
     topics: [],
     forksCount: 0,
@@ -92,6 +97,7 @@ export const organizationProjects = [
     },
     userPermissions: {
       removeProject: true,
+      viewEditPage: true,
     },
     maxAccessLevel: {
       integerValue: 30,
@@ -101,6 +107,7 @@ export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/5',
     nameWithNamespace: 'Commit451 / Lab Coat',
+    organizationEditPath: '/-/organizations/default/projects/Commit451/lab-coat/edit',
     webUrl: 'http://127.0.0.1:3000/Commit451/lab-coat',
     topics: [],
     forksCount: 0,
@@ -123,6 +130,7 @@ export const organizationProjects = [
     },
     userPermissions: {
       removeProject: true,
+      viewEditPage: true,
     },
     maxAccessLevel: {
       integerValue: 30,
@@ -132,6 +140,7 @@ export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/1',
     nameWithNamespace: 'Toolbox / Gitlab Smoke Tests',
+    organizationEditPath: '/-/organizations/default/projects/toolbox/gitlab-smoke-tests/edit',
     webUrl: 'http://127.0.0.1:3000/toolbox/gitlab-smoke-tests',
     topics: [],
     forksCount: 0,
@@ -154,6 +163,7 @@ export const organizationProjects = [
     },
     userPermissions: {
       removeProject: false,
+      viewEditPage: true,
     },
     maxAccessLevel: {
       integerValue: 30,

app/assets/javascripts/organizations/projects/edit/components/app.vue

+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'OrganizationProjectsEditApp',
+  components: { GlSprintf },
+  i18n: {
+    pageTitle: __('Edit project: %{project_name}'),
+  },
+  inject: ['project'],
+};
+</script>
+
+<template>
+  <div class="gl-py-6">
+    <h1 class="gl-mt-0 gl-font-size-h-display">
+      <gl-sprintf :message="$options.i18n.pageTitle">
+        <template #project_name>{{ project.fullName }}</template>
+      </gl-sprintf>
+    </h1>
+  </div>
+</template>

app/assets/javascripts/organizations/projects/edit/index.js

+import Vue from 'vue';
+
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import App from './components/app.vue';
+
+export const initOrganizationsProjectsEdit = () => {
+  const el = document.getElementById('js-organizations-projects-edit');
+
+  if (!el) return false;
+
+  const {
+    dataset: { appData },
+  } = el;
+  const { project } = convertObjectPropsToCamelCase(JSON.parse(appData), { deep: true });
+
+  return new Vue({
+    el,
+    name: 'OrganizationProjectsEditRoot',
+    provide: {
+      project,
+    },
+    render(createElement) {
+      return createElement(App);
+    },
+  });
+};

app/assets/javascripts/organizations/shared/graphql/fragments/base_group.fragment.graphql

+fragment BaseGroup on Group {
+  id
+  fullName
+  parent {
+    id
+  }
+  webUrl
+  descriptionHtml
+  avatarUrl
+  descendantGroupsCount
+  projectsCount
+  groupMembersCount
+  visibility
+  userPermissions {
+    removeGroup
+  }
+  maxAccessLevel {
+    integerValue
+  }
+}

app/assets/javascripts/organizations/shared/graphql/fragments/base_project.fragment.graphql

@@ -2,6 +2,7 @@ fragment BaseProject on Project {
   id
   archived
   nameWithNamespace
+  organizationEditPath
   webUrl
   topics
   forksCount
@@ -22,6 +23,7 @@ fragment BaseProject on Project {
   }
   userPermissions {
     removeProject
+    viewEditPage
   }
   maxAccessLevel {
     integerValue

app/assets/javascripts/organizations/shared/graphql/fragments/group.fragment.graphql

+#import "./base_group.fragment.graphql"
+
+fragment Group on Group {
+  ...BaseGroup
+}

app/assets/javascripts/organizations/shared/graphql/queries/groups.query.graphql

 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
+#import "ee_else_ce/organizations/shared/graphql/fragments/group.fragment.graphql"
+
 query getOrganizationGroups(
   $id: OrganizationsOrganizationID!
   $search: String
@@ -19,24 +21,7 @@ query getOrganizationGroups(
       after: $after
     ) {
       nodes {
-        id
-        fullName
-        parent {
-          id
-        }
-        webUrl
-        descriptionHtml
-        avatarUrl
-        descendantGroupsCount
-        projectsCount
-        groupMembersCount
-        visibility
-        userPermissions {
-          removeGroup
-        }
-        maxAccessLevel {
-          integerValue
-        }
+        ...Group
       }
       pageInfo {
         ...PageInfo

app/assets/javascripts/organizations/shared/utils.js

@@ -3,10 +3,14 @@ import { ACTION_EDIT, ACTION_DELETE } from '~/vue_shared/components/list_actions
 import { QUERY_PARAM_END_CURSOR, QUERY_PARAM_START_CURSOR } from './constants';
 
 const availableProjectActions = (userPermissions) => {
-  const baseActions = [ACTION_EDIT];
+  const baseActions = [];
+
+  if (userPermissions.viewEditPage) {
+    baseActions.push(ACTION_EDIT);
+  }
 
   if (userPermissions.removeProject) {
-    return [...baseActions, ACTION_DELETE];
+    baseActions.push(ACTION_DELETE);
   }
 
   return baseActions;
@@ -33,6 +37,7 @@ export const formatProjects = (projects) =>
       webUrl,
       userPermissions,
       maxAccessLevel: accessLevel,
+      organizationEditPath: editPath,
       ...project
     }) => ({
       ...project,
@@ -44,7 +49,7 @@ export const formatProjects = (projects) =>
       webUrl,
       isForked: false,
       accessLevel,
-      editPath: `${webUrl}/edit`,
+      editPath,
       availableActions: availableProjectActions(userPermissions),
       actionLoadingStates: {
         [ACTION_DELETE]: false,

app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue

@@ -2,13 +2,12 @@
 // Since app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
 // can only handle two levels of breadcrumbs, but we have three levels here.
 // So we extended the registry_breadcrumb.vue component with harbor_registry_breadcrumb.vue to support multiple levels of breadcrumbs
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb } from '@gitlab/ui';
 import { isArray, last } from 'lodash';
 
 export default {
   components: {
     GlBreadcrumb,
-    GlIcon,
   },
   computed: {
     rootRoute() {
@@ -58,11 +57,5 @@ export default {
 </script>
 
 <template>
-  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
-    <template #separator>
-      <span class="gl-mx-n5">
-        <gl-icon name="chevron-lg-right" :size="8" />
-      </span>
-    </template>
-  </gl-breadcrumb>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs" />
 </template>

app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue

@@ -56,7 +56,7 @@ export default {
   },
   computed: {
     hasPipeline() {
-      return Boolean(this.packageEntity.pipeline);
+      return Boolean(this.packageEntity.pipeline?.user?.name);
     },
     hasProjectLink() {
       return Boolean(this.packageEntity.project_path);

app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue

@@ -144,7 +144,7 @@ export default {
         {
           key: 'checkbox',
           label: __('Select all'),
-          class: 'gl-w-4',
+          thClass: 'gl-w-4',
           hide: !this.canDelete,
         },
         {
@@ -158,14 +158,12 @@ export default {
         {
           key: 'created',
           label: __('Created'),
-          class: 'gl-text-right',
         },
         {
           key: 'actions',
           label: '',
           hide: !this.canDelete,
-          class: 'gl-text-right',
-          tdClass: 'gl-w-4 gl-pt-3!',
+          thClass: 'gl-w-4',
         },
       ].filter((c) => !c.hide);
     },
@@ -397,6 +395,7 @@ export default {
         <template #head(checkbox)="{ selectAllRows, clearSelected }">
           <gl-form-checkbox
             v-if="canDelete"
+            class="gl-min-h-0"
             data-testid="package-files-checkbox-all"
             :checked="areAllFilesSelected"
             :indeterminate="hasSelectedSomeFiles"
@@ -407,7 +406,6 @@ export default {
         <template #cell(checkbox)="{ rowSelected, selectRow, unselectRow }">
           <gl-form-checkbox
             v-if="canDelete"
-            class="gl-mt-1"
             :checked="rowSelected"
             data-testid="package-files-checkbox"
             @change="rowSelected ? unselectRow() : selectRow()"
@@ -421,6 +419,7 @@ export default {
             :aria-label="detailsShowing ? __('Collapse') : __('Expand')"
             data-testid="toggle-details-button"
             category="tertiary"
+            class="gl-mt-n2!"
             size="small"
             @click="
               toggleDetails();

app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue

@@ -59,6 +59,12 @@ export default {
     errorStatusRow() {
       return this.packageEntity?.status === PACKAGE_ERROR_STATUS;
     },
+    errorPackageStyle() {
+      return {
+        'gl-text-red-500': this.errorStatusRow,
+        'gl-font-weight-normal': this.errorStatusRow,
+      };
+    },
     dropdownItems() {
       return [
         {
@@ -93,10 +99,15 @@ export default {
     </template>
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
-        <gl-link v-if="containsWebPathLink" class="gl-text-body gl-min-w-0" :href="packageLink">
+        <gl-link
+          v-if="containsWebPathLink"
+          class="gl-text-body gl-min-w-0"
+          :class="errorPackageStyle"
+          :href="packageLink"
+        >
           <gl-truncate :text="packageEntity.name" />
         </gl-link>
-        <gl-truncate v-else :text="packageEntity.name" />
+        <gl-truncate v-else :class="errorPackageStyle" :text="packageEntity.name" />
 
         <package-tags
           v-if="packageEntity.tags.nodes && packageEntity.tags.nodes.length"

app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue

@@ -5,7 +5,6 @@ import {
   GlFormCheckbox,
   GlIcon,
   GlSprintf,
-  GlTooltipDirective,
   GlTruncate,
   GlLink,
 } from '@gitlab/ui';
@@ -40,9 +39,6 @@ export default {
     ListItem,
     TimeagoTooltip,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   inject: ['isGroupPage', 'canDeletePackages'],
   props: {
     packageEntity: {
@@ -94,6 +90,11 @@ export default {
     errorStatusRow() {
       return this.packageEntity.status === PACKAGE_ERROR_STATUS;
     },
+    errorStatusMessage() {
+      return this.packageEntity.statusMessage
+        ? this.packageEntity.statusMessage
+        : ERRORED_PACKAGE_TEXT;
+    },
     showTags() {
       return Boolean(this.packageEntity.tags?.nodes?.length);
     },
@@ -108,7 +109,6 @@ export default {
     },
   },
   i18n: {
-    erroredPackageText: ERRORED_PACKAGE_TEXT,
     createdAt: __('Created %{timestamp}'),
     deletePackage: DELETE_PACKAGE_TEXT,
     errorPublishing: ERROR_PUBLISHING,
@@ -139,7 +139,7 @@ export default {
         >
           <gl-truncate :text="packageEntity.name" />
         </router-link>
-        <gl-truncate v-else :text="packageEntity.name" />
+        <gl-truncate v-else :class="errorPackageStyle" :text="packageEntity.name" />
 
         <package-tags
           v-if="showTags"
@@ -163,15 +163,11 @@ export default {
         />
         <span class="gl-ml-2" data-testid="package-type">&middot; {{ packageType }}</span>
       </div>
-      <div v-else>
-        <gl-icon
-          v-gl-tooltip="{ title: $options.i18n.erroredPackageText }"
-          name="warning"
-          class="gl-text-red-500"
-          :aria-label="$options.i18n.warning"
-          data-testid="warning-icon"
-        />
-        <span class="gl-text-red-500">{{ $options.i18n.errorPublishing }}</span>
+      <div v-else class="gl-text-red-500">
+        <gl-icon name="warning" :aria-label="$options.i18n.warning" data-testid="warning-icon" />
+        <span data-testid="error-message"
+          >{{ $options.i18n.errorPublishing }} &middot; {{ errorStatusMessage }}</span
+        >
       </div>
     </template>
 

app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue

@@ -89,6 +89,12 @@ export default {
         { packageName: this.errorPackages[0].name },
       );
     },
+    errorMessageBodyAlert() {
+      if (this.errorPackages[0]?.statusMessage) {
+        return this.errorPackages[0].statusMessage;
+      }
+      return this.$options.i18n.errorMessageBodyAlert;
+    },
     showErrorPackageAlert() {
       return this.errorPackages.length > 0;
     },
@@ -168,7 +174,7 @@ export default {
         :title="errorTitleAlert"
         :primary-button-text="$options.i18n.deleteThisPackage"
         @primaryAction="showConfirmationModal"
-        >{{ $options.i18n.errorMessageBodyAlert }}</gl-alert
+        >{{ errorMessageBodyAlert }}</gl-alert
       >
       <registry-list
         data-testid="packages-table"

app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql

@@ -5,6 +5,7 @@ fragment PackageData on Package {
   packageType
   createdAt
   status
+  statusMessage
   tags {
     nodes {
       id

app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql

@@ -10,6 +10,7 @@ query getPackageDetails($id: PackagesPackageID!) {
     createdAt
     updatedAt
     status
+    statusMessage
     publicPackage
     npmUrl
     mavenUrl

app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql

@@ -16,6 +16,7 @@ query getPackageVersions(
         packageType
         version
         status
+        statusMessage
         _links {
           webPath
         }

app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue

@@ -3,12 +3,11 @@
 // until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079
 //
 // See the CSS workaround in app/assets/stylesheets/pages/registry.scss when this file is changed.
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb } from '@gitlab/ui';
 
 export default {
   components: {
     GlBreadcrumb,
-    GlIcon,
   },
   computed: {
     rootRoute() {
@@ -46,11 +45,5 @@ export default {
 </script>
 
 <template>
-  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
-    <template #separator>
-      <span class="gl-mx-n5">
-        <gl-icon name="chevron-lg-right" :size="8" />
-      </span>
-    </template>
-  </gl-breadcrumb>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs" />
 </template>

app/assets/javascripts/pages/organizations/projects/edit/index.js

+import { initOrganizationsProjectsEdit } from '~/organizations/projects/edit';
+
+initOrganizationsProjectsEdit();