disable add varation button while progressive rollout running

ui/web-v2/apps/admin/src/assets/lang/en.json

@@ -270,6 +270,7 @@
  "feature.confirm.unarchiveDescription": "Are you sure you want to unarchive the feature flag \"{featureId}\"?",
  "feature.confirm.unarchiveTitle": "Unarchive Feature Flag",
  "feature.defaultStrategy": "Default strategy",
+ "feature.documentation": "Documentation",
  "feature.filter.archived": "Archived",
  "feature.filter.enabled": "Enabled",
  "feature.filter.hasExperiment": "Has experiment",
@@ -283,6 +284,7 @@
  "feature.flagStatus.new": "New",
  "feature.flagStatus.receivingRequests": "Receiving requests",
  "feature.id": "ID",
+ "feature.isProgressiveRolloutsRunning": "While a progressive rollout is in progress, new variations cannot be added, but changes can be made.",
  "feature.last14Days": "Last 14 days",
  "feature.last24Hours": "Last 24 hours",
  "feature.last30Days": "Last 30 days",
@@ -411,7 +413,7 @@
  "progressiveRolloutWarningMessages.alreadyProgressiveRollout": "Cannot execute more than one progressive rollout at the same time",
  "progressiveRolloutWarningMessages.featureNotEnabled": "The feature flag is not enabled. Please enable it before using the progressive rollout",
  "progressiveRolloutWarningMessages.individualTargeting": "The flag must not have individual targeting",
- "progressiveRolloutWarningMessages.moreInformation": "For more information, please see the documentation.",
+ "progressiveRolloutWarningMessages.moreInformation": "For more information, please see the {link}.",
  "progressiveRolloutWarningMessages.prerequisites": "The flag must not have Prerequisites",
  "progressiveRolloutWarningMessages.scheduledOperations": "The flag must not have scheduled operations",
  "progressiveRolloutWarningMessages.targetingRules": "The flag must not have targeting rules",

ui/web-v2/apps/admin/src/assets/lang/ja.json

@@ -270,6 +270,7 @@
  "feature.confirm.unarchiveDescription": "「{featureId}」をアーカイブから解除しますか?",
  "feature.confirm.unarchiveTitle": "アーカイブの解除",
  "feature.defaultStrategy": "デフォルトストラテジー",
+ "feature.documentation": "ドキュメンテーション",
  "feature.filter.archived": "アーカイブ",
  "feature.filter.enabled": "有効 / 無効",
  "feature.filter.hasExperiment": "エクスペリメントがある",
@@ -283,6 +284,7 @@
  "feature.flagStatus.new": "新規作成",
  "feature.flagStatus.receivingRequests": "アクティブ",
  "feature.id": "ID",
+ "feature.isProgressiveRolloutsRunning": "プログレッシブロールアウトが実行されているため、新しいバリエーションを追加することはできませんが、変更は可能です。",
  "feature.last14Days": "過去14日",
  "feature.last24Hours": "過去24時間",
  "feature.last30Days": "過去30日",
@@ -409,9 +411,9 @@
  "notification.update.header.description": "通知機能を使用することによって、管理コンソールでの追加・更新をした時や、運用タスクの状況を確認することができます。",
  "notification.update.header.title": "通知の更新",
  "progressiveRolloutWarningMessages.alreadyProgressiveRollout": "同時に複数のプログレッシブロールアウトを実行することはできません",
- "progressiveRolloutWarningMessages.featureNotEnabled": "The feature flag is not enabled. Please enable it before using the progressive rollout",
+ "progressiveRolloutWarningMessages.featureNotEnabled": "プログレッシブロールアウトを使用する前にフラグを有効化してください",
  "progressiveRolloutWarningMessages.individualTargeting": "ターゲティングユーザーを持つフラグでは利用できません",
- "progressiveRolloutWarningMessages.moreInformation": "詳細については、ドキュメンテーションを参照してください。",
+ "progressiveRolloutWarningMessages.moreInformation": "詳細については、{link}を参照してください。",
  "progressiveRolloutWarningMessages.prerequisites": "前提条件を持つフラグでは利用できません",
  "progressiveRolloutWarningMessages.scheduledOperations": "スケジュールされたオペレーションを持つフラグでは利用できません",
  "progressiveRolloutWarningMessages.targetingRules": "ターゲティング）ルールを持つフラグでは利用できません",

ui/web-v2/apps/admin/src/components/AddProgressiveRolloutOperation/index.tsx

@@ -225,7 +225,19 @@ export const AddProgressiveRolloutOperation: FC<AddProgressiveRolloutOperationPr
  <p className="text-yellow-700 text-sm mt-4">
  {f(
  messages.autoOps.progressiveRolloutWarningMessages
- .moreInformation
+ .moreInformation,
+ {
+ link: (
+ <a
+ href="https://docs.bucketeer.io/feature-flags/creating-feature-flags/auto-operation/rollout"
+ target="_blank"
+ rel="noreferrer"
+ className="underline text-primary"
+ >
+ {f(messages.feature.documentation)}
+ </a>
+ ),
+ }
  )}
  </p>
  </div>

ui/web-v2/apps/admin/src/components/FeatureVariationsForm/index.tsx

@@ -1,14 +1,21 @@
 import 'react-datepicker/dist/react-datepicker.css';
+import {
+ listProgressiveRollout,
+ selectAll as selectAllProgressiveRollouts,
+} from '@/modules/porgressiveRollout';
+import { ProgressiveRollout } from '@/proto/autoops/progressive_rollout_pb';
+import { AppDispatch } from '@/store';
+import { InformationCircleIcon } from '@heroicons/react/solid';
 import { SerializedError } from '@reduxjs/toolkit';
-import React, { FC, memo } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
+import React, { FC, memo, useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
 import { messages } from '../../lang/messages';
 import { AppState } from '../../modules';
 import { selectById as selectFeatureById } from '../../modules/features';
-import { useIsEditable } from '../../modules/me';
+import { useCurrentEnvironment, useIsEditable } from '../../modules/me';
 import { Feature } from '../../proto/feature/feature_pb';
 import { Strategy } from '../../proto/feature/strategy_pb';
 import { VariationInput } from '../VariationInput';
@@ -26,12 +33,15 @@ interface FeatureVariationsFormProps {
 
 export const FeatureVariationsForm: FC<FeatureVariationsFormProps> = memo(
  ({ featureId, onOpenConfirmDialog }) => {
+ const dispatch = useDispatch<AppDispatch>();
+ const currentEnvironment = useCurrentEnvironment();
+
  const editable = useIsEditable();
  const { formatMessage: f } = useIntl();
  const methods = useFormContext();
  const {
  control,
- formState: { errors, isSubmitting, isDirty, dirtyFields },
+ formState: { errors, isDirty },
  watch,
  } = methods;
  const [feature, _] = useSelector<
@@ -42,6 +52,26 @@ export const FeatureVariationsForm: FC<FeatureVariationsFormProps> = memo(
  state.features.getFeatureError,
  ]);
 
+ const progressiveRollouts = useSelector<
+ AppState,
+ ProgressiveRollout.AsObject[]
+ >(
+ (state) =>
+ selectAllProgressiveRollouts(state.progressiveRollout).filter(
+ (rule) => rule.featureId === featureId
+ ),
+ shallowEqual
+ );
+
+ useEffect(() => {
+ dispatch(
+ listProgressiveRollout({
+ featureId: featureId,
+ environmentNamespace: currentEnvironment.id,
+ })
+ );
+ }, []);
+
  const variations = watch('variations');
 
  const isValid = Object.keys(errors).length == 0;
@@ -58,12 +88,35 @@ export const FeatureVariationsForm: FC<FeatureVariationsFormProps> = memo(
  });
  }
 
+ const isProgressiveRolloutsRunning =
+ progressiveRollouts.filter(
+ (p) => p.status !== ProgressiveRollout.Status.FINISHED
+ ).length > 0;
+
  return (
  <div className="p-10 bg-gray-100">
+ {isProgressiveRolloutsRunning && (
+ <div className="bg-blue-50 p-4 border-l-4 border-blue-400 mb-7">
+ <div className="flex">
+ <div className="flex-shrink-0">
+ <InformationCircleIcon
+ className="h-5 w-5 text-blue-400"
+ aria-hidden="true"
+ />
+ </div>
+ <div className="ml-3 flex-1">
+ <p className="text-sm text-blue-700">
+ {f(messages.feature.isProgressiveRolloutsRunning)}
+ </p>
+ </div>
+ </div>
+ </div>
+ )}
  <form className="">
  <div className="bg-white border border-gray-300 rounded p-5 ">
  <VariationInput
  typeDisabled={true}
+ isProgressiveRolloutsRunning={isProgressiveRolloutsRunning}
  rulesAppliedVariationList={{
  onVariationIds,
  offVariationId: feature.offVariation,

ui/web-v2/apps/admin/src/components/VariationInput/index.tsx

@@ -58,11 +58,16 @@ type RulesAppliedVariationList = {
 };
 export interface VariationInputProps {
  typeDisabled: boolean;
+ isProgressiveRolloutsRunning?: boolean;
  rulesAppliedVariationList?: RulesAppliedVariationList;
 }
 
 export const VariationInput: FC<VariationInputProps> = memo(
- ({ typeDisabled, rulesAppliedVariationList }) => {
+ ({
+ typeDisabled,
+ rulesAppliedVariationList,
+ isProgressiveRolloutsRunning,
+ }) => {
  const { formatMessage: f } = useIntl();
  const editable = useIsEditable();
  const methods = useFormContext();
@@ -86,7 +91,9 @@ export const VariationInput: FC<VariationInputProps> = memo(
  });
  const variationType = watch('variationType');
  const disabledAddBtn =
- variationType == Feature.VariationType.BOOLEAN.toString();
+ variationType == Feature.VariationType.BOOLEAN.toString() ||
+ isProgressiveRolloutsRunning;
+
  const { onVariationId, onVariationIds, offVariationId } =
  rulesAppliedVariationList;
 

ui/web-v2/apps/admin/src/lang/messages.ts

@@ -586,7 +586,7 @@ export const messages = {
  }),
  moreInformation: defineMessage({
  id: 'progressiveRolloutWarningMessages.moreInformation',
- defaultMessage: 'For more information, please see the documentation.',
+ defaultMessage: 'For more information, please see the {link}.',
  }),
  },
  },
@@ -1507,6 +1507,15 @@ export const messages = {
  defaultMessage:
  'Enable targeting settings. You can configure targeting users, complex rules, default strategy, and off variation.',
  }),
+ documentation: defineMessage({
+ id: 'feature.documentation',
+ defaultMessage: 'Documentation',
+ }),
+ isProgressiveRolloutsRunning: defineMessage({
+ id: 'feature.isProgressiveRolloutsRunning',
+ defaultMessage:
+ 'While a progressive rollout is in progress, new variations cannot be added, but changes can be made.',
+ }),
  flagIsPrerequisite: defineMessage({
  id: 'feature.flagIsPrerequisite',
  defaultMessage: