Feature Flag Approval Component

A reusable React component for managing feature flag approval workflows. This component provides a complete dashboard and hooks for building approval systems for feature flag changes.

Table of Contents

• Installation

• Quick Start

• Components

  • FeatureFlagApprovalDashboard
  • Approval Detail Page

• API Reference

---

Installation

Add the package to your project:

yarn add @traveloka/tin-approval-gateway

Peer Dependencies

This package requires the following peer dependencies:

{
  "@emotion/css": "^11.10.6",
  "@emotion/styled": "^11.10.6",
  "axios": "^0.18.0",
  "config": "^3.3.12",
  "moment": "^2.22.1",
  "react": "^18",
  "react-dom": "^18",
  "semantic-ui-react": "^2.1.1"
}

---

Quick Start

Basic Setup

import React from "react";
import { FeatureFlagApprovalDashboard } from "@traveloka/tin-approval-gateway";
import { OIDCUserSelector } from "@traveloka/tin-auth";

function FeatureFlagApprovalPage() {
  const userSelector = OIDCUserSelector();

  const auth = {
    getAccessToken: () => userSelector.getAccessToken(),
    getPermissions: () =>
      userSelector.getToken().tokenBody["https://tvlk/permissions"],
  };

  return (
    <FeatureFlagApprovalDashboard
      auth={auth}
      detailsPageUrl="/feature-flag-approval/detail"
      requiredPermission="r:feature-flag-approval"
      itemsPerPage={10}
    />
  );
}

export default FeatureFlagApprovalPage;

---

Components

FeatureFlagApprovalDashboard

The main dashboard component for displaying and managing feature flag approval requests.

Features

• ✅ Approve or reject requests (individual or bulk actions)
• ✅ View detailed request diffs
• ✅ Built-in filtering and pagination
• ✅ Permission-based access control

Props

Prop	Type	Required	Description
auth	Object	✅	Authentication object with getAccessToken() and getPermissions() methods
detailsPageUrl	string	✅	URL pattern for the approval detail page
requiredPermission	string	❌	Permission required to access the dashboard
itemsPerPage	number	❌	Number of items per page (default: 20)

---

Approval Detail Page

---

API Reference

---

Development

Building the Package

# Build TypeScript types and ES modules
yarn build

# Watch mode for development
yarn watch

# Run linting
yarn lint

Project Structure

packages/tin-feature-flag-approval/
├── src/
│   ├── actions/         # Redux actions
│   ├── apis/            # API calls
│   ├── components/      # React components
│   ├── constants/       # Constants and types
│   ├── contexts/        # React contexts
│   ├── hooks/           # Custom React hooks
│   ├── reducers/        # Redux reducers
│   ├── styles/          # Styled components
│   ├── utils/           # Utility functions
│   └── index.ts         # Main entry point
├── package.json
├── tsconfig.json
└── README.md

---

License

MIT

---

Support

For issues, questions, or contributions, please refer to the soya-monorepo repository.