Taxonomy Term List page is broken when users don't have permission to edit/create terms

Created on 13 January 2025, about 1 month ago

Problem/Motivation

When user has access to view the list of terms/taxonomy overview page and they don't have access to manage them, the style is broken and confusing.
The user sees a + SVG but no indentation. It's quite hard to distinguish between parent and child terms.

Steps to reproduce

1. Create a taxonomy
2. Add few terms
3. Add children terms so you can get the indentation

Proposed resolution

Adjust the css/styling of the page

🐛 Bug report
Status

Active

Version

10.4

Component

Claro theme

Created by

🇧🇷Brazil carolpettirossi Campinas - SP

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @carolpettirossi
  • 🇳🇿New Zealand quietone

    Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies .

  • did u logged in using admin account or its just a normal account without admin access because i am not able to reproduce the issue here.

    please share a short video of the issue. thanks

  • 🇧🇷Brazil carolpettirossi Campinas - SP

    @saurav-drupal-dev, you must remove the permission to create/edit terms and add the view overview,

    See the permissions here for content editor:

    Evidence that the layout is broken for the user with content editor role:

  • Issue is able replicate on local, Here this issue coming due to styled components as they would be only view only access to editors. Hence does not containing draggable table that doesn't allow svg and indentation styles get rendered, so for Proposed solution is to create a separate component style to overwrite as below.

    /* *
     * @file
     * Styles for custom indentation and tree item visibility for view access.
     */
    .indentation {
        position: relative;
        inset-inline-start: calc(var(--space-xs)* -0.5);
        float: left; /* LTR */
        width: 1.5625rem;
        height: 1.5625rem;
        background: none !important;
        line-height: 0;
    }
    
    [dir="rtl"] .indentation {
        float: right;
    }
    
    .tree__item {
        display: none;
    }

    Did a try on my system it worked for me. (as image attached). not sure so, I would like to explore any other potential solutions to address this. if all good Will Raise MR.

  • @kushagra.goyal What if all the code related to .indention and .tree classes was moved to the new indentation.pcss.css file?
    It looks like this block of code can be completely extracted from the tabledrag.css file.

    /* *
     * @file
     * Styles for custom indentation and tree item visibility for view access.
     */
    
    /**
     * Indentation.
     */
    .indentation {
      position: relative;
      inset-inline-start: calc(var(--space-xs) * -0.5);
      float: left; /* LTR */
      width: 25px;
      height: 25px;
      background: none !important;
      line-height: 0;
    
      @nest .tabledrag-cell-content & {
        /* Fixes Safari bug (16.1 at least) where table rows are overly large when
          using indentation (e.g. re-ordering menu items. */
        display: inline-flex;
        float: none;
        overflow: hidden;
        flex-direction: column;
        height: 100%;
      }
    
      @nest [dir="rtl"] & {
        float: right;
      }
    }
    
    /**
     * Tree is the visual representation for the simultaneously moved draggable
     * rows.
     *
     * These rules are styling the inline SVG that is placed inside the .indentation
     * element.
     */
    .tree {
      width: 25px;
      height: 25px;
    }
    
    .tree__item {
      display: none;
    }
    
    /* LTR tree child. */
    .tree-child path {
      &:not(.tree__item-child-ltr) {
        display: none;
      }
    
      &.tree__item-child-ltr {
        display: block;
      }
    }
    
    /* RTL tree child. */
    [dir="rtl"] {
      & .tree-child path {
        &:not(.tree__item-child-rtl) {
          display: none;
        }
        &.tree__item-child-rtl {
          display: block;
        }
      }
    
      /* Last RTL tree child. */
      & .tree-child-last path {
        &:not(.tree__item-child-last-rtl) {
          display: none;
        }
        &.tree__item-child-last-rtl {
          display: block;
        }
      }
    }
    
    /* Last LTR tree child. */
    .tree-child-last path {
      &:not(.tree__item-child-last-ltr) {
        display: none;
      }
      &.tree__item-child-last-ltr {
        display: block;
      }
    }
    
    /* Horizontal line. */
    .tree-child-horizontal path {
      &:not(.tree__item-horizontal) {
        display: none;
      }
    
      &.tree__item-horizontal {
        display: block;
      }
    }
    

    I have tested your suggestion and I can confirm it's working fine.

  • Hi @brunoalmeida, thanks for looking into this. Yeah It will ok by adding code for tree and indentation As Tree is the visual representation for draggable rows. This will help item visibility for view access.

  • Pipeline finished with Failed
    10 days ago
    Total: 636s
    #415024
  • I needed to fix this in my current project so I have created a MR using the @kushagra.goyal solution.
    I'm also adding a patch for Core version 10.4.x.

Production build 0.71.5 2024