fix: Fix StaleFlagWarning Display & Migrate FeatureRow to TypeScript

frontend/common/constants.ts

@@ -363,7 +363,7 @@ const Constants = {
     },
   },
   exampleAuditWebhook: `{
- "created_date": "2020-02-23T17:30:57.006318Z",
+    "created_date": "2020-02-23T17:30:57.006318Z",
  "log": "New Flag / Remote Config created: my_feature",
  "author": {
   "id": 3,
@@ -435,6 +435,15 @@ const Constants = {
  },
  "event_type": "FLAG_UPDATED"
 }`,
+  featurePanelTabs: {
+    ANALYTICS: 'analytics',
+    HISTORY: 'history',
+    IDENTITY_OVERRIDES: 'identity-overrides',
+    LINKS: 'links',
+    SEGMENT_OVERRIDES: 'segment-overrides',
+    SETTINGS: 'settings',
+    VALUE: 'value',
+  },
   forms: {
     maxLength: {
       'FEATURE_ID': 150,

frontend/common/stores/feature-list-store.ts

@@ -975,7 +975,7 @@ const controller = {
 
 const store = Object.assign({}, BaseStore, {
   getEnvironmentFlags() {
-    return store.model && store.model.keyedEnvironmentFeatures
+    return store?.model?.keyedEnvironmentFeatures
   },
   getFeatureUsage() {
     return store.model && store.model.usageData

frontend/common/types/responses.ts

@@ -456,18 +456,17 @@ export type ProjectFlag = {
 
 export type FeatureListProviderData = {
   projectFlags: ProjectFlag[] | null
-  environmentFlags: FeatureState[] | null
+  environmentFlags: Record<number, FeatureState> | undefined
   error: boolean
   isLoading: boolean
 }
 
 export type FeatureListProviderActions = {
   toggleFlag: (
-    index: number,
-    environments: Environment[],
-    comment: string | null,
-    environmentFlags: FeatureState[],
-    projectFlags: ProjectFlag[],
+    projectId: string,
+    environmentId: string,
+    projectFlag: ProjectFlag,
+    environmentFlags: FeatureState | undefined,
   ) => void
   removeFlag: (projectId: string, projectFlag: ProjectFlag) => void
 }

frontend/common/utils/useProtectedTags.ts

@@ -0,0 +1,27 @@
+import { ProjectFlag, Tag } from 'common/types/responses'
+import { useGetTagsQuery } from 'common/services/useTag'
+
+export const useProtectedTags = (
+  projectFlag: ProjectFlag,
+  projectId: string,
+  skip?: boolean,
+): Tag[] | undefined => {
+  const { data: tags } = useGetTagsQuery(
+    { projectId },
+    { skip: skip || !projectId },
+  )
+
+  if (!tags) {
+    return undefined
+  }
+
+  const protectedFlags = projectFlag.tags.reduce<Tag[]>((acc, id) => {
+    const tag = tags?.find((t) => t.id === id)
+    if (tag?.is_permanent) {
+      acc.push(tag)
+    }
+    return acc
+  }, [])
+
+  return protectedFlags
+}

frontend/web/components/CompareEnvironments.js

@@ -255,6 +255,7 @@ class CompareEnvironments extends Component {
                           condensed
                           isCompareEnv
                           fadeEnabled={fadeEnabled}
+                          history={this.context.router.history}
                           fadeValue={fadeValue}
                           environmentFlags={this.state.environmentLeftFlags}
                           projectFlags={this.state.projectFlagsLeft}
@@ -285,6 +286,7 @@ class CompareEnvironments extends Component {
                           isCompareEnv
                           fadeEnabled={fadeEnabled}
                           fadeValue={fadeValue}
+                          history={this.context.router.history}
                           environmentFlags={this.state.environmentRightFlags}
                           projectFlags={this.state.projectFlagsRight}
                           permission={permission}

frontend/web/components/CompareFeatures.js

@@ -141,6 +141,7 @@ class CompareEnvironments extends Component {
                             permission={permission}
                             environmentId={data.api_key}
                             projectId={this.props.projectId}
+                            history={this.context.router.history}
                             index={i}
                             canDelete={permission}
                             toggleFlag={toggleFlag}

frontend/web/components/CondensedFeatureRow.tsx

@@ -0,0 +1,121 @@
+import classNames from 'classnames'
+import Switch from './Switch'
+import {
+  FeatureListProviderData,
+  FeatureState,
+  ProjectFlag,
+} from 'common/types/responses'
+import FeatureValue from './FeatureValue'
+import SegmentOverridesIcon from './SegmentOverridesIcon'
+import IdentityOverridesIcon from './IdentityOverridesIcon'
+import Constants from 'common/constants'
+
+export interface CondensedFeatureRowProps {
+  disableControls?: boolean
+  readOnly: boolean
+  projectFlag: ProjectFlag
+  environmentFlags: FeatureListProviderData['environmentFlags']
+  permission?: boolean
+  editFeature: (
+    projectFlag: ProjectFlag,
+    environmentFlag?: FeatureState,
+    tab?: string,
+  ) => void
+  onChange: () => void
+  style?: React.CSSProperties
+  className?: string
+  isCompact?: boolean
+  fadeEnabled?: boolean
+  fadeValue?: boolean
+  index: number
+}
+
+const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
+  className,
+  disableControls,
+  editFeature,
+  environmentFlags,
+  fadeEnabled,
+  fadeValue,
+  index,
+  isCompact,
+  onChange,
+  permission,
+  projectFlag,
+  readOnly,
+  style,
+}) => {
+  const { id } = projectFlag
+  const showPlusIndicator =
+    projectFlag?.is_num_identity_overrides_complete === false
+
+  return (
+    <Flex
+      onClick={() => {
+        if (disableControls) return
+        !readOnly && editFeature(projectFlag, environmentFlags?.[id])
+      }}
+      style={{ ...style }}
+      className={classNames('flex-row', { 'fs-small': isCompact }, className)}
+    >
+      <div
+        className={`table-column ${fadeEnabled && 'faded'}`}
+        style={{ width: '80px' }}
+      >
+        <Row>
+          <Switch
+            disabled={!permission || readOnly}
+            data-test={`feature-switch-${index}${
+              environmentFlags?.[id].enabled ? '-on' : '-off'
+            }`}
+            checked={environmentFlags?.[id]?.enabled}
+            onChange={onChange}
+          />
+        </Row>
+      </div>
+      <Flex className='table-column clickable'>
+        <Row>
+          <div
+            onClick={() =>
+              permission &&
+              !readOnly &&
+              editFeature(projectFlag, environmentFlags?.[id])
+            }
+            className={`flex-fill ${fadeValue ? 'faded' : ''}`}
+          >
+            <FeatureValue
+              value={environmentFlags?.[id]?.feature_state_value ?? null}
+              data-test={`feature-value-${index}`}
+            />
+          </div>
+
+          <SegmentOverridesIcon
+            onClick={(e) => {
+              e.stopPropagation()
+              editFeature(
+                projectFlag,
+                environmentFlags?.[id],
+                Constants.featurePanelTabs.SEGMENT_OVERRIDES,
+              )
+            }}
+            count={projectFlag.num_segment_overrides}
+          />
+          <IdentityOverridesIcon
+            onClick={(e) => {
+              e.stopPropagation()
+              editFeature(
+                projectFlag,
+                environmentFlags?.[id],
+                Constants.featurePanelTabs.IDENTITY_OVERRIDES,
+              )
+            }}
+            count={projectFlag.num_identity_overrides}
+            showPlusIndicator={showPlusIndicator}
+          />
+        </Row>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default CondensedFeatureRow