@spinnaker/kayenta 2025.4.0 → 2025.4.1

package/src/kayenta/layout/keyValueList.tsx

@@ -1,114 +0,0 @@
-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

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

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

@@ -1,83 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/nativeTable.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,16 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

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

package/src/kayenta/layout/titledSubsection.tsx

@@ -1,22 +0,0 @@
-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>
-  );
-}