✨ feat: added description field to feature flag setting page

modules/front-end/src/app/features/safe/experiments/overview/overview.component.less

@@ -19,7 +19,7 @@
     .annotation {
       display: flex;
       justify-content: space-between;
-      border: 1px solid #EAECEE;
+      border: 1px solid @grey20-color;
       border-radius: 12px;
       background: #FFFFFF;
 

modules/front-end/src/app/features/safe/feature-flags/details/experimentation/experimentation.component.less

@@ -171,7 +171,7 @@
           }
           .empty-experiment {
             margin-top: 20px;
-            background-color: #717D8A;
+            background-color: @grey50-color;
             height: 200px;
             padding-top: 90px;
             text-align: center;

modules/front-end/src/app/features/safe/feature-flags/details/setting/setting.component.html

@@ -32,14 +32,24 @@
         <i class="edit-save" (click)="onSaveSettings()" nz-icon nzType="icons:icon-save"></i>
       </ng-container>
     </div>
+    <div class="flag-description" [class]="{editing: isEditingDescription}">
+      <ng-container *ngIf="!isEditingDescription">
+        <span>{{featureFlag.description}}</span>
+        <i class="edit-save" (click)="toggleDescriptionEditState()" nz-icon nzType="icons:icon-edit"></i>
+      </ng-container>
+      <ng-container *ngIf="isEditingDescription">
+        <textarea nz-input placeholder="Description" i18n-placeholder="@@common.description" [(ngModel)]="featureFlag.description" [nzAutosize]="{ minRows: 3 }"></textarea>
+        <i class="edit-save" (click)="onSaveDescription()" nz-icon nzType="icons:icon-save"></i>
+      </ng-container>
+    </div>
     <div class="flag-key">
-      <nz-input-group [nzSuffix]="copySuffix">
-        <input readonly nz-input value="{{featureFlag.key}}" nz-tooltip="{{featureFlag.key}}">
-      </nz-input-group>
-      <ng-template #copySuffix>
-        <i class="copy-icon" nz-icon nzType="icons:icon-copy" (click)="copyText(featureFlag.key)"></i>
-      </ng-template>
-      <i nz-icon i18n-nz-tooltip="@@ff.key-description" nz-tooltip="Use key (case-sensitive) in your code to get the feature flag variation" nzType="icons:icon-info-outline"></i>
+      <div class="title">
+        <span class="text" i18n="@@common.key">Key</span> <i nz-icon i18n-nz-tooltip="@@ff.key-description" nz-tooltip="Use key (case-sensitive) in your code to get the feature flag variation" nzType="icons:icon-info-outline"></i>
+      </div>
+      <div class="key-container">
+        {{featureFlag.key}}
+        <i class="copy-icon" i18n-nz-tooltip="@@common.click-to-copy" nz-tooltip="Click to copy" nz-icon nzType="icons:icon-copy" (click)="copyText(featureFlag.key)"></i>
+      </div>
     </div>
     <div class="status-switcher" >
       <div class="switcher">

modules/front-end/src/app/features/safe/feature-flags/details/setting/setting.component.less

@@ -38,7 +38,7 @@
 
   .edit-save {
     cursor: pointer;
-    margin-left: 12px;
+    margin-left: 8px;
   }
 
   .title {
@@ -91,33 +91,55 @@
   }
 
   .flag-key {
-    nz-input-group {
+    margin-top: 16px;
+
+    .title {
       display: flex;
-      justify-content: space-between;
-      padding: 8px 12px;
-      height: 36px;
-      background: #FFFFFF;
-      border: 1px solid @grey200-color;
-      border-radius: 8px;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 150%;
-      color: @grey50-color;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 8px;
     }
-    margin-top: 16px;
-    display: flex;
-    align-items: center;
 
     i {
       cursor: pointer;
-      font-size: 20px;
+      font-size: 16px;
+    }
 
-      &:last-child {
-        margin-left: 8px;
+    .key-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 8px;
+
+      i {
+        font-size: 13px;
       }
     }
   }
 
+  .flag-description {
+    margin-top: 4px;
+    color: @grey50-color;
+    border: 1px solid @grey20-color;
+    border-radius: 8px;
+    padding: 5px;
+
+    &.editing {
+      border: none;
+      padding: 0;
+    }
+
+    .edit-save {
+      width: 100%;
+      text-align: right;
+      padding-right:14px;
+    }
+
+    textarea {
+      border-radius: 8px;
+    }
+  }
+
   .tags {
     margin-top: 16px;
 
@@ -243,7 +265,7 @@
         width: 85%;
         height: 36px;
         border-radius: 8px;
-        border: 1px solid @grey200-color;
+        border: 1px solid @grey20-color;
       }
 
       .delete-icon-wrapper {

modules/front-end/src/app/features/safe/feature-flags/details/setting/setting.component.ts

@@ -43,16 +43,17 @@ export class SettingComponent {
     );
   }
 
-  public lastSavedVariations: IVariation[];
+  lastSavedVariations: IVariation[];
   setLastSavedVariations() {
     this.lastSavedVariations = JSON.parse(JSON.stringify(this.featureFlag.variations));
   }
 
-  public featureFlag: FeatureFlag = {} as FeatureFlag;
-  public isLoading = true;
-  public isEditingTitle = false;
-  public isEditingVariations = false;
-  public key: string = null;
+  featureFlag: FeatureFlag = {} as FeatureFlag;
+  isLoading = true;
+  isEditingTitle = false;
+  isEditingDescription = false;
+  isEditingVariations = false;
+  key: string = null;
   currentProjectEnv: IProjectEnv = null;
 
   allTags: string[] = [];
@@ -149,7 +150,11 @@ export class SettingComponent {
     }, () => this.isLoading = false)
   }
 
-  public onChangeStatus() {
+  onSaveDescription() {
+    this.onSaveSettings();
+  }
+
+  onChangeStatus() {
     this.featureFlag.isEnabled = !this.featureFlag.isEnabled;
     this.onSaveSettings(() => this.messageQueueService.emit(this.messageQueueService.topics.FLAG_SETTING_CHANGED(this.key)));
   }
@@ -162,6 +167,10 @@ export class SettingComponent {
     this.isEditingTitle = !this.isEditingTitle;
   }
 
+  toggleDescriptionEditState(): void {
+    this.isEditingDescription = !this.isEditingDescription;
+  }
+
   toggleVariationEditState(resetVariations: boolean = false): void {
     this.isEditingVariations = !this.isEditingVariations;
 
@@ -306,10 +315,11 @@ export class SettingComponent {
   }
 
   onSaveSettings(cb?: Function) {
-    const { id, name, isEnabled, variationType, disabledVariationId, variations } = this.featureFlag;
+    const { id, name, description, isEnabled, variationType, disabledVariationId, variations } = this.featureFlag;
     const payload: ISettingPayload = {
       id,
       name,
+      description,
       isEnabled,
       variationType: variationType || VariationTypeEnum.string,
       disabledVariationId,
@@ -321,6 +331,7 @@ export class SettingComponent {
         this.featureFlagService.setCurrentFeatureFlag(this.featureFlag);
         this.message.success($localize `:@@common.operation-success:Operation succeeded`);
         this.isEditingTitle = false;
+        this.isEditingDescription = false;
         cb && cb();
       },
       error: err => this.message.error(err.error)

modules/front-end/src/app/features/safe/feature-flags/index/index.component.ts

@@ -273,13 +273,13 @@ export class IndexComponent implements OnInit {
 
   nameChange(name: string) {
     let keyControl = this.featureFlagForm.get('key')!;
-    keyControl.setValue(slugify(name));
+    keyControl.setValue(slugify(name ?? ''));
     keyControl.markAsDirty();
   }
 
   create() {
     this.creating = true;
-   
+
     this.featureFlagService.create(this.featureFlagForm.value).subscribe({
       next: (result: IFeatureFlag) => {
         this.navigateToFlagDetail(result);
@@ -289,7 +289,7 @@ export class IndexComponent implements OnInit {
         this.msg.error(err.error);
         this.creating = false;
       }
-    }); 
+    });
   }
 
   closeCreateModal() {

modules/front-end/src/app/features/safe/feature-flags/types/details.ts

@@ -41,6 +41,7 @@ export class FeatureFlag implements IFeatureFlag {
   updatorId: string;
   variationType: VariationTypeEnum;
   variations: IVariation[];
+  description: string;
 }
 
 export interface IFeatureFlag {
@@ -62,6 +63,7 @@ export interface IFeatureFlag {
   updatorId: string,
   createdAt: Date,
   updatedAt: Date,
+  description: string
 }
 
 export interface IFeatureFlagTargeting {
@@ -97,6 +99,7 @@ export enum VariationTypeEnum {
 export interface ISettingPayload {
   id: string,
   name: string;
+  description: string;
   isEnabled: boolean;
   variationType: VariationTypeEnum;
   disabledVariationId: string;

modules/front-end/src/app/features/safe/iam/components/policy-editor/policy-editor.component.less

@@ -25,7 +25,7 @@
       cursor: pointer;
       margin-left: 12px;
       font-size: 20px;
-      color: #717d8a;
+      color: @grey50-color;
     }
   }
   .statements-wrapper {
@@ -42,7 +42,7 @@
     .action-btn {
       padding: 0 16px;
       background: white;
-      border: 1px solid #EAECEE;
+      border: 1px solid @grey20-color;
       border-radius: 33px;
       color: @grey50-color;
       font-size: 14px;

modules/front-end/src/app/features/safe/iam/groups/index/index.component.less

@@ -6,7 +6,7 @@
   }
 
   .copy-icon {
-    color: #717D8A;
+    color: @grey50-color;
     &:hover {
       cursor: pointer;
       color: @grey70-color;

modules/front-end/src/app/features/safe/iam/policies/index/index.component.less

@@ -6,7 +6,7 @@
   }
 
   .copy-icon {
-    color: #717D8A;
+    color: @grey50-color;
     &:hover {
       cursor: pointer;
       color: @grey70-color;

modules/front-end/src/app/features/safe/iam/team/index/index.component.less

@@ -6,7 +6,7 @@
   }
 
   .copy-icon {
-    color: #717D8A;
+    color: @grey50-color;
     &:hover {
       cursor: pointer;
       color: @grey70-color;

modules/front-end/src/app/features/safe/organizations/organization/organization.component.less

@@ -26,7 +26,7 @@
     gap: 40px;
 
     nz-input-group {
-      border: 1px solid @grey200-color;
+      border: 1px solid @grey20-color;
       box-sizing: border-box;
       border-radius: 8px;
       padding: 9px;