feat: Folder authorization frontend

[shaohuzhang1]

feat: Folder authorization frontend

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided code has a few areas that could be improved:

1. Duplicated Code: The toTree function is duplicated inside the computed('treeData'). It would be more efficient to define this function outside of the component.

2. Logical Errors in Tree Construction: There's an error where you're creating a new node map but not properly using it during the tree construction process. This can lead to incorrect results when constructing the tree structure.

3. Pagination Configuration: In the original getPermissionList method, the pagination configuration wasn’t being passed correctly. This should be addressed to ensure proper pagination handling if needed in the future.

Here is the corrected version of the code with some suggested improvements:

// Define the toTree function outside the component
function toTree(nodeList: any[], parentIdKey = 'parentId'): { id: number; children?: Array<{ id: number }> }[] {
  // Convert the nodeList into an object for quick lookups
  const nodeMap = Object.fromEntries(nodeList.map((item: any) => [item.id, item]));
  
  // Build the tree structure
  nodeList.forEach((element) => {
    if (!element.children) {
      element.children = [];
    }
    
    // Find the parent element based on parentIdKey
    if (element[parentIdKey]) {
      const pParent = nodeMap[element[parentIdKey]];
      if (pParent) {
        pParent.children.push(element);
      }
    }
  });
  
  // Filter out root nodes (nodes without a parentId)
  return nodeList.filter((item) => !item[parentIdKey]);
}

// Computed property for tree data
const treeData = computed(() => {
  const resourceType = route.meta?.resource || 'APPLICATION';
  
  if (resourceType === 'MODEL') {
    return permissionData;
  }
  
  return toTree(permissionData.value, 'folder_id');
});

With these changes:

• The toTree function is defined once and reused across different parts.
• Logical errors related to building the tree are fixed by ensuring all necessary nodes have their corresponding parents added to the correct level.
• Proper use of pagination parameters in getPermissionList remains omitted since no such parameters were shown in the snippet. Adjustments here depend on your application’s requirements.

Additionally, consider adding type annotations to improve code readability and maintainability further.

[shaohuzhang1]

The provided code is clean and well-organized. Here are some minor improvements and suggestions:

1. Type Annotations: Since currentNode is used within template expressions, it should be declared with a type annotation (ref<(...args: any[]) => void>).

2. Arrow Function Shorthand: The arrow function for openAuthorization can be simplified if this. is not needed.

After these changes, the code looks like this:

<div id="file-list-container">
  <el-scrollbar style="height: calc(100vh - 35px);">
    <!-- Existing JSX content -->
  </el-scrollbar>
</div>

<CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" :title="title" />

<ResourceAuthorizationDrawer
  :type="props.source"
  :is-folder="true"
  :is-root-folder="!currentNode?.parent_id"
  ref="ResourceAuthorizationDrawerRef"
/>

Additional Suggestion:
Consider adding more descriptive variable names to help clarify their purpose. For example:

• currentFolder: Instead of using data, which could be ambiguous due to its use in other contexts.
• resourceAuthdrawerInstance: Describes the instance being managed by the drawer component.

These small adjustments make the code easier to read and maintain.

[shaohuzhang1]

Your code has several improvements and optimizations:

1. Template Refactoring: The permissionOptions template loop is replaced with calling a new method getFolderPermissionOptions(). This modularization makes the component easier to maintain and reduces repetition.

2. Optimization of Permission Retrieval:

   • A map (permissionOptionMap) is introduced to store options based on whether it's a root or regular folder.
   • getFolderPermissionOptions() determines which set of options should be used based on the provided prop values (isRootFolder or isFolder).

3. Handling Special Case:

   • If props.isRootFolder and an item’s permission is 'NOT_AUTH', it returns 'VIEW'.

These changes improve readability and efficiency by encapsulating logic related to handling different types of folders into separate methods, reducing redundant repeated code, and providing better control over when certain conditions apply.