skyquake/tests/stories/sshKeyCard.js

   1 import React from 'react';
   2 import { storiesOf, action } from '@kadira/storybook';
   3 import DashboardCard from '../../framework/widgets/dashboard_card/dashboard_card.jsx'
   4 import SshKeyCard from '../../plugins/launchpad/src/ssh_keys/sshKeyCard.jsx';
   5 import SshKeys from '../../plugins/launchpad/src/ssh_keys/sshKeys.jsx';
   6 import SshKeyStore from '../../plugins/launchpad/src/ssh_keys/sshKeyStore.js';
   7 import Alt from '../../framework/widgets/skyquake_container/skyquakeAltInstance.js'
   8 import reactToJsx from 'react-to-jsx';
   9 import '../../node_modules/open-iconic/font/css/open-iconic.css';
  10 import 'style/base.scss';
  11 // import StyleGuideItem from 'react-style-guide';
  12 // import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
  13
  14 const Store = Alt.createStore(SshKeyStore, 'SshKeyStore');
  15
  16 storiesOf('CatalogCard', module)
  17 // .add('page', () => (<SshKeys />))
  18 .add('sshKeyPage', () => (<Test />))
  19
  20
  21 class Test extends React.Component {
  22   constructor() {
  23     super();
  24     let self = this;
  25     this.state = Store.getState();
  26     console.log(this.state)
  27     Store.listen(function(data) {
  28       self.setState({data: data.data})
  29     })
  30   }
  31   render() {
  32     let self = this;
  33     return (
  34       <DashboardCard>
  35         {
  36           self.state.data && self.state.data.keys.map(function(k, i) {
  37             let sshKey = self.state.data.entities[k];
  38             return (
  39               <SshKeyCard key={i}  name={sshKey.name} value={sshKey.key}
  40               editMode={sshKey.isEditable}
  41               editKey= {Store.editSshKeyPair(sshKey.name)}
  42               updateSshKeyPair={Store.updateSshKeyPair}
  43               cancelEditSshKeyPair={Store.cancelEditSshKeyPair}
  44               saveEditSshKeyPair={Store.saveEditSshKeyPair(sshKey.name)}
  45               />
  46             )
  47           })
  48         }
  49       </DashboardCard>
  50     )
  51   }
  52 }