The feature.manager.ui from fossapps

feature runs

add saga to create and fetch feature runs.

Height of card component is not consistent,

use container's flex magic to make sure cards are of same height, and they wrap. (not inside card component though)

CreateNewFeatureForm

CreateNewFeatureForm
{
featureId: string;
description: string;
hypothesis: string;
onFeatureIdChange: (id: string) => void;
onDescriptionChange: (d: string) => void;
onHypothesisChange: (h: string) => void;
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/screen/43e9f644-d519-403a-9baa-9241e5591f7d?fullscreen

Avatar

Avatar
props: {
label: string;
}
if more than 1 chars, use first

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/?fullscreen

StopRunModal

StopRunModal {
  // usual...
}

Modal
props: {
isOpen: boolean;
header: JSX.Element;
footer: JSX.Element;
children: JSX.Element; // just use {this.props.children} to show children, it's not special props
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/?fullscreen

Navbar

Navbar ->
props: {
title: string;
searchQuery: string;
onUpdateSearchQuery: (query: string) => void;
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/?fullscreen

Badge

Badge {
  variant: Info, Success, Danger, Secondary
}

https://demos.creative-tim.com/argon-design-system-pro/docs/1.0/components/badge.html

MutedText

MutedText {
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/screen/43e9f644-d519-403a-9baa-9241e5591f7d?fullscreen

find a way to parse date correctly, make sure timezones are handled correctly on...

Feature.Manager.Ui/src/app/pages/RunsPage.tsx

Lines 83 to 88 in b97db60

    
               // todo: find a way to parse date correctly, make sure timezones are handled correctly on backend. 
        
               this.props.createRun(request); 
        
             } 
        
           } 
        
           const mapStateToProps = (state: Pick<IStore, "featureRuns">): IStateToProps => {

This issue was generated by todo based on a `todo` comment in `b97db60` when #32 was merged. cc @fossapps.

Button

Button: {
onClick: () => void;
variant: "primary" | "success" | "danger" | "warning" | "secondary";
type: "outline" | "default";
size: "small" | "medium" | "large";
disabled: boolean;
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/screen/43e9f644-d519-403a-9baa-9241e5591f7d?fullscreen

button not behaving like a button

currently there's no click state, use argon design system pro to find how they do it, and apply in button.

CreateNewFeatureModal

CreateNewFeatureModal {
// connects to redux, uses redux to store feature id, description, hypothesis,
// onFeatureIdChange, onDescriptionChange and onHypothesisChanbge, simply dispatches another action (TBD)
//usual things
}

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/screen/43e9f644-d519-403a-9baa-9241e5591f7d?fullscreen

ChooseReasonDropdown

{ direction: "AllA"|"AllB"|"ChangedSettings"|"Removed"; }

Input (usual input, with only error state)

https://xd.adobe.com/view/ebb04421-f94b-49b4-bec8-67404795ecb6-bee3/screen/43e9f644-d519-403a-9baa-9241e5591f7d?fullscreen

StopButton

StopButton {
  // Just copy a SVG..
  onClick: () => void;
}

RunCard

RunCard {
  startDate: string;
  endDate?: string;
  status?: "AllA"|"AllB"|"ChangedSettings"|"Removed"; (if nothing, then it's running, so use primary)
  trafficRate: number;
  onStopClick: () => void;
}

move to github actions

currently we use travis, need to move to github actions

write down values somewhere

For border radius, margin, padding etc, and also with color codes, we need to be consistent, so on constants file, we need something like:
borderRadius: "NONE" => 0px; "S" => 2px; "M" => 4px; "L" => 6px;
margin: "NONE" => 0px; "XS" => "2px"; "S" => 4px; "M" => 8px; "L" => 12px; "XL" => 14px; "XXL" => 16px;
padding: "NONE" => 0px; "XS" => "2px"; "S" => 4px; "M" => 6px; "L" => 8px; "XL" => 10px; "XXL" => 12px;

colors separately

AirBnBDatePicker {
  // don't need too many props, just simple start date and end date change according to ui
}

fetch data

create redux store, and write sagas to fetch data from API and store on redux (with proper error handling)

	// todo: find a way to parse date correctly, make sure timezones are handled correctly on backend.
	this.props.createRun(request);
	}
	}

	const mapStateToProps = (state: Pick<IStore, "featureRuns">): IStateToProps => {

fossapps / feature.manager.ui Goto Github PK

feature.manager.ui's People

Contributors

Watchers

feature.manager.ui's Issues

This issue was generated by todo based on a todo comment in b97db60 when #32 was merged. cc @fossapps.

Recommend Projects

Recommend Topics

Recommend Org

This issue was generated by todo based on a `todo` comment in `b97db60` when #32 was merged. cc @fossapps.