neeto-tags-nano

The neeto-tags-nano manages tags across neeto applications. The nano exports the @bigbinary/neeto-tags-frontend NPM package, the @bigbinary/neeto-tags-playwright Playwright helpers package, and neeto-tags-engine Rails engine for development.

Contents

1. Development with Host Application
   • Engine
     • Installation
     • Usage
   • Frontend package
     • Installation
     • Instructions for development
     • Components
   • Playwright helpers package
2. Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage tags for any entity across neeto products.

Installation

1. Add this line to your application's Gemfile:

   source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-tags-engine'
   end
   

2. And then execute:

   bundle install
   

3. Add this line to your application's config/routes.rb file:

   mount NeetoTagsEngine::Engine, at: "/neeto_tags"
   

4. Run the following command to copy the migrations from the engine to the host application:

   bundle exec rails neeto_tags_engine:install:migrations
   

5. Add the migrations to the database:

   bundle exec rails db:migrate
   

Usage

You can learn more about the setup and usage here:

1. Models
2. Controllers

Frontend package

The package exports three components: NeetoTags, Tags, and TagsDropdown.

The package also exports one hook: refetchTags.

Installation

1. neeto-tags-nano has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:

   yarn add @bigbinary/[email protected] @bigbinary/[email protected] @bigbinary/[email protected] @honeybadger-io/[email protected] @honeybadger-io/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
   

2. Now install the latest neeto-tags-nano package using the below command:

   yarn add @bigbinary/neeto-tags-frontend
   

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

NeetoTags (source code)

This component provides a dashboard to manage tags for an application.

Props

• config: Configuration object that includes specifications for tags, display menu, and breadcrumbs.

Configuration

Refer to the NeetoTags section for detailed information on the available configurations for the NeetoTags component.

Usage

import React from "react";

import { NeetoTags } from "@bigbinary/neeto-tags-frontend";

const App = () => {
  return <NeetoTags config={config} />;
};
export default App;

Tags (source code)

This component provides functionality to assign tags to an entity.

Configuration

Refer to the Tags section for detailed information on the available configurations for the Tags component.

Usage

import React from "react";

import { TagsComponent } from "@bigbinary/neeto-tags-frontend";

const App = ({
  allTags,
  buttonProps,
  selectProps,
  selectedTags,
  handleTagCreate,
  handleTagRemove,
  handleTagSelect,
}) => {
  return (
    <TagsComponent
      allTags={allTags}
      buttonProps={buttonProps}
      selectProps={selectProps}
      selectedTags={selectedTags}
      onTagCreate={handleTagCreate}
      onTagDelete={handleTagRemove}
      onTagSelect={handleTagSelect}
    />
  );
};

export default App;

TagsDropdown (source code)

This component provides a dropdown panel to assign tags to an entity.

Configuration

Refer to the TagsDropdown section for detailed information on the available configurations for the TagsDropdown component.

Usage

import React from "react";

import { TagsDropdown } from "@bigbinary/neeto-tags-frontend";

const App = ({
  isOpen,
  containerRef,
  allTags,
  selectedTags,
  tagType,
  manageAllTagsHref,
  handleRequestClose,
  handleTagCreate,
  handleTagDelete,
  handleTagSelect,
}) => {
  return (
    <TagsDropdown
      allTags={allTags}
      containerRef={containerRef}
      isOpen={isOpen}
      manageAllTagsHref={manageAllTagsHref}
      selectedTags={selectedTags}
      tagType={tagType}
      onRequestClose={handleRequestClose}
      onTagCreate={handleTagCreate}
      onTagDelete={handleTagDelete}
      onTagSelect={handleTagSelect}
    />
  );
};

export default App;

Hooks

refetchTags (source code)

This function refetches the tags list.

Usage

Below is an example usage of the refetchTags hook:

const useBulkUpdateTickets = () =>
  useMutationWithInvalidation(
    ({ payload }) => ticketsApi.bulkUpdateTickets(payload),
    {
      keysToInvalidate: [
        [QUERY_KEYS.TICKETS_LIST],
        [QUERY_KEYS.TICKETS_DEFAULT_VIEWS],
        [QUERY_KEYS.TEAMS],
        ...REPORT_DATA_KEYS_TO_INVALIDATE,
      ],
      onSuccess: () => {
        refetchTags();
      },
    }
  );

Used by neetoDesk

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.

@bigbinary/neeto-tags-playwright is published from playwright/ when a merged PR has the playwright label alongside patch, minor, or major. See playwright/README.md.

Release gate

A pull request merges only through NeetoTower's release gate. Add exactly one of patch, minor or major, then add release last. NeetoTower publishes a beta of the engine and the package, opens a [do-not-merge] pull request in every product that uses this nano, waits for their checks and review app deployments, posts the result as a comment, and merges when every product is green. If a product fails because of the change, NeetoTower removes the release label. Fix the problem and add release again to start a new attempt. force-release skips the gate and merges at once. It is for maintainers in an emergency only, and the gate comment records who used it.