[Multi-tags] Admin - Editing Tag Levels

by ADMIN 40 views

As an administrator, managing tags and their levels is a crucial task. In this article, we will explore the process of editing tag levels, including rearranging toggle positions, adding functionality to mark tags as required/not required, and introducing new options for multi-level tags.

Rearranging Toggle Position for Multi-Level Tags

The first step in editing tag levels is to rearrange the toggle position for multi-level tags. According to design mocks, we need to move the toggle below the custom tag name field. To achieve this, we need to edit the WorkspaceViewTagsPage component and rearrange the components as follows:

<OfflineWithFeedback
  ...props
>
  <MenuItemWithTopDescription
    ...props
    description={translate(`workspace.tags.customTagName`)}
  />
</OfflineWithFeedback>;

{
  !hasDependentTags && (
    <View style={[styles.pv4, styles.ph5]}>
      <ToggleSettingOptionRow
        ...props      />
    </View>
  );
}

Note that we hide the Toggle for dependent tags as we can only mark independent multi-level tags as not required.

Adding Functionality to Mark Tags as Required/Not Required

On the WorkspaceTagsPage, we want to give the ability to mark independent tags as not required. To do this, we need to update the condition to show the selector component.

const hasDependentTags = useMemo(() => PolicyUtils.hasDependentTags(policy, policyTags), [policy, policyTags]);

const canSelectMultiple = !hasDependentTags && (shouldUseNarrowLayout ? selectionMode?.isEnabled : true);

We also need to hide the existing delete and enable/disable options for multi-level tags. To do this, we need to update the options const.

if (!hasAccountingConnections && !isUsingMultiLevelTags) {
  options.push({
    text: translate(
      selectedTagsArray.length === 1
        ? "workspace.tags.deleteTag"
        : "workspace.tags.deleteTags"
    ),
    ...props
  });
}

if (enabledTagCount > 0 && !isUsingMultiLevelTags) {
  options.push({
    text: translate(
      enabledTagCount === 1
        ? "workspace.tags.disableTag"
        : "workspace.tags.disableTags"
    ),
    ...props
  });
}

if (disabledTagCount > 0 && !isUsingMultiLevelTags) {
  options.push({
    text: translate(
      disabledTagCount === 1
        ? "workspace.tags.enableTag"
        : "workspace.tags.enableTags"
    ),
    value: CONST.POLICY.BULK_ACTION_TYPES.ENABLE,
    ...props,
  });
}

Introducing New Options Require/Don’t Require for Multi-Level Tags

We need to introduce an option to mark multi-level independent tags as required/not required. To do this, we need to update the en.ts and es.ts files to include new params.

1. “Require Tag/Tags” with `Expensicons.Document` icon.
2. “Don’t require” with `Expensicons.DocumentSlash` icon.

SPANISH TRANSLATION

| English | Spanish | | --- | ---| Require Tag | Etiqueta obligatoria | | Require Tags | Etiquetas obligatorias | | Don’t require | No requerir. |

We also need to count the required and not required selected independent tags.

let requiredTagCount = 0;
const tagListIndexesToMarkNotRequired: number[] = [];

let notRequiredTagCount = 0;
const tagListIndexesToMarkRequired: number[] = [];

for (const tagName of selectedTagsArray) {
  if (tagListKeyedByName[tagName]?.required) {
    requiredTagCount++;
    tagListIndexesToMarkNotRequired.push(
      tagListKeyedByName[tagName]?.orderWeight ?? 0
    );
  } else {
    notRequiredTagCount++;
    tagListIndexesToMarkRequired.push(
      tagListKeyedByName[tagName]?.orderWeight ?? 0
    );
  }
}

Introducing New Util to Mark Independent Multi-Level Tags as Required/Not Required

We will create a new setPolicyTagListsRequired util which calls the SetPolicyTagListsRequired API command.

function setPolicyTagListsRequired(
  policyID: string,
  tagListIndexes: number[],
  requireTagList: boolean
);

We will create 3 Onyx data: Optimistic, Success, and Failure. And send it to the API SetPolicyTagListsRequired along with the parameters.

Adding Required Options to the Dropdown Along with the Action to Perform

We need to add the required options to the dropdown along with the action to perform.

if (requiredTagCount > 0) {
  options.push({
    icon: Expensicons.DocumentSlash,
    text: translate("workspace.tags.markNotRequired"),
    value: CONST.POLICY.BULK_ACTION_TYPES.DISABLE,
    onSelected: () => {
      setSelectedTags({});
      Tag.setPolicyTagListsRequired(policyID, tagListIndexesToMarkNotRequired, false);
    },
  });
}

if (notRequiredTagCount > 0) {
  options.push({
    icon: Expensicons.Document,
    text: translate("workspace.tags.markRequired"),
    value: CONST.POLICY.BULK_ACTION_TYPES.ENABLE,
    onSelected: () => {
      setSelectedTags({});
      Tag.setPolicyTagListsRequired(policyID, tagListIndexesToMarkRequired, true);
    },
  });
}

As an administrator, managing tags and their levels is a crucial task. In this article, we will explore the process of editing tag levels, including rearranging toggle positions, adding functionality to mark tags as required/not required, and introducing new options for multi-level tags. Here are some frequently asked questions and answers to help you better understand the process.

Q: What is the purpose of rearranging toggle positions for multi-level tags?

A: The purpose of rearranging toggle positions for multi-level tags is to move the toggle below the custom tag name field. This will make it easier for administrators to manage multi-level tags and their requirements.

Q: How do I update the condition to show the selector component?

A: To update the condition to show the selector component, you need to use the useMemo hook to create a memoized value that depends on the policy and policyTags variables. Then, you can use the canSelectMultiple variable to determine whether to show the selector component.

Q: What is the purpose of hiding the existing delete and enable/disable options for multi-level tags?

A: The purpose of hiding the existing delete and enable/disable options for multi-level tags is to prevent administrators from accidentally deleting or enabling/disabling multi-level tags. This will help to prevent errors and ensure that multi-level tags are managed correctly.

Q: How do I introduce new options for multi-level tags?

A: To introduce new options for multi-level tags, you need to update the en.ts and es.ts files to include new params. Then, you can use the translate function to translate the new options into different languages.

Q: What is the purpose of counting the required and not required selected independent tags?

A: The purpose of counting the required and not required selected independent tags is to determine whether to show the "Require Tag/Tags" or "Don't require" option. This will help administrators to manage multi-level tags and their requirements correctly.

Q: How do I create a new setPolicyTagListsRequired util?

A: To create a new setPolicyTagListsRequired util, you need to define a function that takes three parameters: policyID, tagListIndexes, and requireTagList. Then, you can use this function to call the SetPolicyTagListsRequired API command.

Q: What is the purpose of creating 3 Onyx data: Optimistic, Success, and Failure?

A: The purpose of creating 3 Onyx data: Optimistic, Success, and Failure is to handle different scenarios when calling the SetPolicyTagListsRequired API command. This will help to ensure that the API command is executed correctly and that administrators are notified of any errors.

Q: How do I add required options to the dropdown along with the action to perform?

A: To add required options to the dropdown along with the action to perform, you need to use the options array to push new options. Then, you can use the onSelected function to determine what action to perform when the option is selected.

By following these steps and answering these frequently asked questions, you should be able to successfully edit tag levels, including rearranging toggle positions, adding functionality to mark tags as required/not required, and introducing new options for multi-level tags.

Common Issues and Solutions

Here are some common issues and solutions that you may encounter when editing tag levels:

  • Issue: The toggle position for multi-level tags is not being updated correctly.
  • Solution: Check that the useMemo hook is being used correctly to create a memoized value that depends on the policy and policyTags variables.
  • Issue: The existing delete and enable/disable options for multi-level tags are not being hidden correctly.
  • Solution: Check that the options array is being updated correctly to hide the delete and enable/disable options.
  • Issue: The new options for multi-level tags are not being translated correctly.
  • Solution: Check that the translate function is being used correctly to translate the new options into different languages.
  • Issue: The required and not required selected independent tags are not being counted correctly.
  • Solution: Check that the tagListKeyedByName object is being used correctly to count the required and not required selected independent tags.

By following these common issues and solutions, you should be able to troubleshoot and resolve any issues that you may encounter when editing tag levels.