LDFeatureFlags

FlagsList.png

NewFlagAside.png

SketchSystems.spec

LDFeatureFlags
  # v0.1.0 Usability comments in red
  # https://www.figma.com/file/Ns0mLEIVqHMfSlDmfAB5oQ/Web-App-IA
  Flags
    # +Add hover state to list
    # +Minimize delete function
    # +Add a list header component
    # +Dashboard like feature to summarize flaglist
    FlagsList
      SortFilterPopover -> Flags
      SearchFilter -> Flags
      FeatureFlag -> FeatureFlag
    # +Emphasize flag kind radio selection
    NewFlagAside
      Save -> FeatureFlag    
      Cancel -> Flags
    FlagToggleModal
      On -> FlagsList
      Cancel -> FlagsList
    # +Insert code references discovery to delete modal
    FlagDelModal
      Type -> FlagsList
      Cancel -> FlagsList
    CompareButton -> CompareFlags
    NewFlagButton -> NewFlagAside
    FlagToggle -> FlagToggleModal
    FlagDel -> FlagDelModal
  CompareFlags
    CompareFlagsList
      EnvironmentSelect -> CompareFlagsList
      SortFilterPopover -> CompareFlagsList
      SearchFilter -> CompareFlagsList
    FlagSyncAside
      Cancel -> CompareFlags
    FlagSyncButton -> FlagSyncAside
    SortPopover -> CompareFlags
    Breadcrumb -> FlagsList
  FeatureFlag
    Targeting -> Targeting
    Insights -> Insights
    Variations -> Variations
    History -> History
    Source References -> Source References
    Targeting
      TargetingForm
      BulkEditModal
        Add -> Targeting
        Cancel -> Targeting      
      TargetingSaveModal
        Save -> Targeting
        Cancel -> Targeting
      TargetingToggleModal
        On -> Targeting
        Cancel -> Targeting
      TargetingToggle -> TargetingToggleModal
      SaveChangesButton -> TargetingSaveModal
      AddPrereqsCard -> Targeting
      AddTargetsCard -> Targeting
      BulkEdit -> BulkEditModal
      AddRulesCard -> Targeting
      DefaultRuleSelect -> Targeting
      TargetingOffSelect -> Targeting
    Insights
    Variations
    History
    Source References
    Breadcrumb -> FlagsList
    

SketchSystems_prototype.js

function render(model){
  if (model.active_states[0].image_url) {
    return $("img", 
             {src: model.active_states[0].image_url, style: {width: "1204px", border: "2px solid silver"}});
  } else {
      let current_state_name = model.active_states[0].name;
       return $("h1",
         {style: {color: "darkBlue"}},
         `The current screen is: ${current_state_name}`); }
}