@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/layout/keyValueList.less

@@ -0,0 +1,20 @@
+.kv-pair-item {
+  display: flex;
+  align-items: center;
+
+  .kv-pair-item-section {
+    display: flex;
+    margin-right: 5px;
+    margin-bottom: 7px;
+
+    .kv-pair-item-section-label-wrapper {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+    }
+
+    .kv-pair-item-section-input {
+      margin-left: 5px;
+    }
+  }
+}

package/src/kayenta/layout/keyValueList.tsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { IKayentaAction } from '../actions/creators';
+import AddNewButton from './addNewButton';
+import DeleteButton from './deleteButton';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from './disableable';
+
+import './keyValueList.less';
+
+export enum KeyValueListAction {
+  ADD,
+  DELETE,
+  KEY_EDIT,
+  VALUE_EDIT,
+}
+
+export interface IKeyValuePair {
+  key: string;
+  value: string;
+}
+
+export interface IUpdateKeyValueListPayload {
+  type: KeyValueListAction;
+  index?: number;
+  key?: string;
+  value?: string;
+}
+
+export const updateListReducer = (defaultValue = { key: '', value: '' }) => (
+  state: IKeyValuePair[],
+  action: IKayentaAction<IUpdateKeyValueListPayload>,
+) => {
+  const { index, value, type } = action.payload;
+  switch (type) {
+    case KeyValueListAction.ADD:
+      return state.concat(defaultValue);
+    case KeyValueListAction.DELETE:
+      return [...state.slice(0, index), ...state.slice(index + 1)];
+    case KeyValueListAction.KEY_EDIT:
+      return [...state.slice(0, index), { ...state[index], key: value }, ...state.slice(index + 1)];
+    case KeyValueListAction.VALUE_EDIT:
+      return [...state.slice(0, index), { ...state[index], value }, ...state.slice(index + 1)];
+  }
+};
+
+export interface IKeyValueListProps {
+  list: IKeyValuePair[];
+  className?: string;
+  actionCreator: (action: IUpdateKeyValueListPayload) => void;
+}
+
+export default function KeyValueList({ list, className, actionCreator }: IKeyValueListProps) {
+  const onKeyChange = (i: number) => (event: any) =>
+    actionCreator({
+      type: KeyValueListAction.KEY_EDIT,
+      index: i,
+      value: event.target.value,
+    });
+
+  const onValueChange = (i: number) => (event: any) =>
+    actionCreator({
+      type: KeyValueListAction.VALUE_EDIT,
+      index: i,
+      value: event.target.value,
+    });
+
+  const deleteValue = (i: number) => () =>
+    actionCreator({
+      type: KeyValueListAction.DELETE,
+      index: i,
+    });
+
+  const addValue = () =>
+    actionCreator({
+      type: KeyValueListAction.ADD,
+    });
+
+  return (
+    <section className={classNames('kv-pair-list', className)}>
+      {list.map((kvPair, index) => {
+        const { key, value } = kvPair;
+        return (
+          <div key={index} className="kv-pair-item">
+            <div className="kv-pair-item-section">
+              <div className="kv-pair-item-section-label-wrapper">
+                <div className="kv-pair-item-section-label">Key</div>
+              </div>
+              <div className="kv-pair-item-section-input">
+                <DisableableInput value={key} onChange={onKeyChange(index)} disabledStateKeys={[DISABLE_EDIT_CONFIG]} />
+              </div>
+            </div>
+            <div className="kv-pair-item-section">
+              <div className="kv-pair-item-section-label-wrapper">
+                <div className="kv-pair-item-section-label">Value</div>
+              </div>
+              <div className="kv-pair-item-section-input">
+                <DisableableInput
+                  value={value}
+                  onChange={onValueChange(index)}
+                  disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                />
+              </div>
+            </div>
+            <div className="kv-pair-item-section">
+              <DeleteButton onClick={deleteValue(index)} />
+            </div>
+          </div>
+        );
+      })}
+      <AddNewButton onClick={addValue} />
+    </section>
+  );
+}

package/src/kayenta/layout/list.less

@@ -0,0 +1,9 @@
+.kayenta-list {
+  a.clickable {
+    margin: 5px 0 0 10px;
+  }
+
+  input.input-sm {
+    width: 93%;
+  }
+}

package/src/kayenta/layout/list.spec.tsx

@@ -0,0 +1,83 @@
+import { mount } from 'enzyme';
+import { IKayentaAction } from 'kayenta/actions/creators';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+
+import { IUpdateListPayload, List, ListAction, updateListReducer } from './list';
+import { rootReducer } from '../reducers';
+
+describe('Reducer: updateListReducer', () => {
+  const createAction = (payload: IUpdateListPayload): IKayentaAction<IUpdateListPayload> => ({
+    type: 'update_list',
+    payload,
+  });
+
+  const reducer = updateListReducer('defaultValue');
+
+  it('adds', () => {
+    expect(
+      reducer(
+        [],
+        createAction({
+          type: ListAction.Add,
+        }),
+      ),
+    ).toEqual(['defaultValue']);
+  });
+
+  it('deletes', () => {
+    expect(
+      reducer(
+        ['toRemain', 'toRemove'],
+        createAction({
+          type: ListAction.Delete,
+          index: 1,
+        }),
+      ),
+    ).toEqual(['toRemain']);
+  });
+
+  it('edits', () => {
+    expect(
+      reducer(
+        ['unedited', 'beforeEdit'],
+        createAction({
+          type: ListAction.Edit,
+          index: 1,
+          value: 'afterEdit',
+        }),
+      ),
+    ).toEqual(['unedited', 'afterEdit']);
+  });
+});
+
+describe('Component: List', () => {
+  it('renders a list', () => {
+    const component = mount(
+      <Provider store={createStore(rootReducer)}>
+        <List list={['a', 'b', 'c']} actionCreator={() => null} />
+      </Provider>,
+    );
+
+    expect(component.find('input').length).toEqual(3);
+  });
+
+  it('emits the correct value and index on update', () => {
+    const spy = jest.fn();
+    const component = mount(
+      <Provider store={createStore(rootReducer)}>
+        <List list={['a', 'b', 'c']} actionCreator={spy} />
+      </Provider>,
+    );
+
+    const input = component.find('input').at(1);
+    input.simulate('change', { target: { value: 'newValue' } });
+
+    expect(spy).toHaveBeenCalledWith({
+      type: ListAction.Edit,
+      index: 1,
+      value: 'newValue',
+    });
+  });
+});

package/src/kayenta/layout/list.tsx

@@ -0,0 +1,73 @@
+import { IKayentaAction } from 'kayenta/actions/creators';
+import * as React from 'react';
+
+import AddNewButton from './addNewButton';
+import DeleteButton from './deleteButton';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from './disableable';
+
+import './list.less';
+
+export enum ListAction {
+  Add,
+  Edit,
+  Delete,
+}
+
+export interface IUpdateListPayload {
+  type: ListAction;
+  index?: number;
+  value?: string;
+}
+
+export const updateListReducer = (defaultValue = '') => (
+  state: string[],
+  action: IKayentaAction<IUpdateListPayload>,
+) => {
+  const { index, value } = action.payload;
+  switch (action.payload.type) {
+    case ListAction.Add:
+      return state.concat(defaultValue);
+    case ListAction.Delete:
+      return [...state.slice(0, index), ...state.slice(index + 1)];
+    case ListAction.Edit:
+      return [...state.slice(0, index), value, ...state.slice(index + 1)];
+  }
+};
+
+interface IListProps {
+  list: string[];
+  valueKey?: (value: string) => string;
+  actionCreator: (action: IUpdateListPayload) => void;
+}
+
+export const List = ({ list, valueKey, actionCreator }: IListProps) => {
+  const onChange = (i: number) => (event: any) =>
+    actionCreator({
+      type: ListAction.Edit,
+      index: i,
+      value: event.target.value,
+    });
+
+  const deleteValue = (i: number) => () =>
+    actionCreator({
+      type: ListAction.Delete,
+      index: i,
+    });
+
+  const addValue = () =>
+    actionCreator({
+      type: ListAction.Add,
+    });
+
+  return (
+    <section>
+      {list.map((value, i) => (
+        <div key={valueKey ? valueKey(value) : i} className="horizontal form-group kayenta-list">
+          <DisableableInput value={value} onChange={onChange(i)} disabledStateKeys={[DISABLE_EDIT_CONFIG]} />
+          <DeleteButton onClick={deleteValue(i)} />
+        </div>
+      ))}
+      <AddNewButton onClick={addValue} />
+    </section>
+  );
+};

package/src/kayenta/layout/listDetail.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface IListDetailProps {
+  className?: string;
+  list: JSX.Element;
+  listClass?: string;
+  listWidth?: number;
+  detail: JSX.Element;
+  detailWidth?: number;
+  detailClass?: string;
+}
+
+/*
+ * A composite view that combines a list view in one panel and a detail view in another.
+ * The contents of the detail view are dependent on the user's selection in the list view.
+ */
+export default function ListDetail({
+  className,
+  list,
+  listWidth = 2,
+  detail,
+  detailWidth = 10,
+  listClass,
+  detailClass,
+}: IListDetailProps) {
+  return (
+    <div className={classNames('list-detail', 'horizontal', className)}>
+      <div className={classNames(`col-md-${listWidth}`, listClass)}>{list}</div>
+      <div className={classNames(`col-md-${detailWidth}`, detailClass)}>{detail}</div>
+    </div>
+  );
+}

package/src/kayenta/layout/radioChoice.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { DISABLE_EDIT_CONFIG, DisableableInput } from './disableable';
+
+export interface IRadioChoiceProps {
+  value: string;
+  label: string | JSX.Element;
+  name: string;
+  current: string;
+  action: (event: any) => void;
+}
+
+export default function RadioChoice({ value, label, name, current, action }: IRadioChoiceProps) {
+  return (
+    <div className="radio-inline">
+      <label style={{ fontWeight: 'normal', marginRight: '1em' }}>
+        <DisableableInput
+          type="radio"
+          name={name}
+          value={value}
+          onChange={action}
+          checked={value === current}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        />{' '}
+        {label}
+      </label>
+    </div>
+  );
+}

package/src/kayenta/layout/styleguide.tsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import '../canary.less';
+
+export const STYLEGUIDE_CLASS = 'styleguide';
+export const KAYENTA_CLASS = 'kayenta';
+
+export interface IStyleguideProps {
+  children: JSX.Element | JSX.Element[];
+  className?: string;
+}
+
+export default function Styleguide({ children, className }: IStyleguideProps) {
+  return <div className={classNames(STYLEGUIDE_CLASS, KAYENTA_CLASS, className)}>{children}</div>;
+}

package/src/kayenta/layout/table/index.ts

@@ -0,0 +1,5 @@
+export * from './table';
+export * from './tableColumn';
+export * from './tableHeader';
+export * from './nativeTable';
+export * from './nativeTableHeader';

package/src/kayenta/layout/table/nativeTable.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { NativeTableHeader } from './nativeTableHeader';
+import { ITableColumn } from './tableColumn';
+
+export interface INativeTableProps<T> {
+  rows: T[];
+  columns: Array<ITableColumn<T>>;
+  rowKey: (row: T) => string;
+  tableBodyClassName?: string;
+  headerClassName?: string;
+  rowClassName?: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  customRow?: (row: T) => JSX.Element;
+  className?: string;
+}
+
+export function NativeTable<T>({
+  rows,
+  columns,
+  rowKey,
+  tableBodyClassName,
+  rowClassName,
+  onRowClick,
+  customRow,
+  className,
+  headerClassName,
+}: INativeTableProps<T>) {
+  const TableRow = ({ row }: { row: T }) => (
+    <tr
+      onClick={onRowClick ? () => onRowClick(row) : null}
+      className={classNames({ 'table-row': !rowClassName }, rowClassName && rowClassName(row))}
+    >
+      {columns.map(({ label, hide, getContent }, i) => (
+        <td key={label || i}>{(!hide || !hide(row)) && getContent(row)}</td>
+      ))}
+    </tr>
+  );
+
+  return (
+    <table className={className}>
+      <NativeTableHeader rows={rows} columns={columns} className={classNames('table-header', headerClassName)} />
+      <tbody className={tableBodyClassName}>
+        {rows.map((r) =>
+          customRow && customRow(r) ? <td key={rowKey(r)}>{customRow(r)}</td> : <TableRow key={rowKey(r)} row={r} />,
+        )}
+      </tbody>
+    </table>
+  );
+}

package/src/kayenta/layout/table/nativeTableHeader.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { ITableColumn } from './tableColumn';
+
+export interface INativeTableHeaderProps<T = any> {
+  rows: T[];
+  columns: Array<ITableColumn<T>>;
+  className: string;
+}
+
+export const NativeTableHeader = ({ rows = [], columns, className }: INativeTableHeaderProps) => {
+  return (
+    <thead className={className}>
+      <tr>
+        {columns.map(({ label, labelClassName, hide }, i) => (
+          <th key={label || i} className="native-table-header">
+            {(!hide || !rows.every(hide)) && (
+              <h6 className={classNames('heading-6', 'uppercase', 'color-text-primary', labelClassName)}>{label}</h6>
+            )}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};

package/src/kayenta/layout/table/table.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { ITableColumn } from './tableColumn';
+import { TableHeader } from './tableHeader';
+
+export interface ITableProps<T> {
+  rows: T[];
+  columns: Array<ITableColumn<T>>;
+  rowKey: (row: T) => string;
+  tableBodyClassName?: string;
+  headerClassName?: string;
+  rowClassName?: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  customRow?: (row: T) => JSX.Element;
+  className?: string;
+}
+
+export function Table<T>({
+  rows,
+  columns,
+  rowKey,
+  tableBodyClassName,
+  rowClassName,
+  onRowClick,
+  customRow,
+  className,
+  headerClassName,
+}: ITableProps<T>) {
+  const TableRow = ({ row }: { row: T }) => (
+    <li
+      onClick={onRowClick ? () => onRowClick(row) : null}
+      className={classNames(
+        { horizontal: !rowClassName, 'table-row': !rowClassName },
+        rowClassName && rowClassName(row),
+      )}
+    >
+      {columns.map((c, i) => (
+        <div key={c.label || i} className={`flex-${c.width}`}>
+          {!c.hide && c.getContent(row)}
+        </div>
+      ))}
+    </li>
+  );
+
+  return (
+    <div className={className}>
+      <ul className={classNames(tableBodyClassName, 'list-group')}>
+        <TableHeader columns={columns} className={classNames('table-header', 'sticky-header', headerClassName)} />
+        {rows.map((r) =>
+          customRow && customRow(r) ? <div key={rowKey(r)}>{customRow(r)}</div> : <TableRow key={rowKey(r)} row={r} />,
+        )}
+      </ul>
+    </div>
+  );
+}

package/src/kayenta/layout/table/tableColumn.ts

@@ -0,0 +1,7 @@
+export interface ITableColumn<T> {
+  label?: string;
+  labelClassName?: string;
+  hide?: (data: T) => boolean;
+  width?: number;
+  getContent: (data: T) => JSX.Element;
+}

package/src/kayenta/layout/table/tableHeader.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { ITableColumn } from './tableColumn';
+
+export interface ITableHeaderProps {
+  columns: Array<ITableColumn<any>>;
+  className: string;
+}
+
+export const TableHeader = ({ columns, className }: ITableHeaderProps) => {
+  return (
+    <div className={classNames('horizontal', className)}>
+      {columns.map((c, i) => (
+        <div key={c.label || i} className={`flex-${c.width}`}>
+          {!c.hide && (
+            <h6 className={classNames('heading-6', 'uppercase', 'color-text-primary', c.labelClassName)}>{c.label}</h6>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/kayenta/layout/tabs.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface ITabsProps {
+  children: any;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function Tabs({ children, className, style }: ITabsProps) {
+  return (
+    <ul className={classNames('tabs-basic', 'list-unstyled', className)} style={style}>
+      {children}
+    </ul>
+  );
+}
+
+export interface ITabProps {
+  selected: boolean;
+  children: JSX.Element | JSX.Element[];
+  className?: string;
+}
+
+export function Tab({ selected = false, children, className }: ITabProps) {
+  return <li className={classNames(selected ? 'selected' : '', className)}>{children}</li>;
+}

package/src/kayenta/layout/titledSection.less

@@ -0,0 +1,16 @@
+.kayenta {
+  .titled-section {
+    margin-bottom: 1em;
+
+    .contents {
+      margin: 10px 10px 0 10px;
+      background-color: var(--color-white);
+      border: 1px solid var(--color-cirrus);
+      padding: 15px;
+
+      .list-group {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}

package/src/kayenta/layout/titledSection.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import './titledSection.less';
+
+export interface ISectionProps {
+  title: string;
+  children?: any;
+}
+
+// TODO: implemented the mocks using a modified open pod, but the styleguide should add something more directly appropriate
+export default function TitledSection({ title, children }: ISectionProps) {
+  return (
+    <section className="pod open titled-section">
+      <div className="header horizontal middle">
+        <div className="flex-1 heading-2 uppercase">{title}</div>
+      </div>
+      <div className="contents vertical">{children}</div>
+    </section>
+  );
+}

package/src/kayenta/layout/titledSubsection.less

@@ -0,0 +1,11 @@
+.kayenta {
+  .titled-subsection {
+    h5 {
+      font-weight: 600;
+    }
+
+    hr {
+      margin-top: 0;
+    }
+  }
+}

package/src/kayenta/layout/titledSubsection.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HelpField } from '@spinnaker/core';
+
+import './titledSubsection.less';
+
+export interface ITitledSubsectionProps {
+  children: any;
+  title: string;
+  helpKey?: string;
+}
+
+export default function TitledSubsection({ title, children, helpKey }: ITitledSubsectionProps) {
+  return (
+    <section className="titled-subsection">
+      <h5 className="heading-5">
+        {title} {helpKey && <HelpField id={helpKey} />}
+      </h5>
+      <hr />
+      {children}
+    </section>
+  );
+}