Skip to content

Commit

Permalink
Merge branch 'main' into workflow-activity
Browse files Browse the repository at this point in the history
  • Loading branch information
jwafu authored Jan 21, 2024
2 parents f63924e + dab7062 commit f154681
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 15 deletions.
67 changes: 57 additions & 10 deletions src/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {connect} from './utils/Connect'
import { Indicator } from "./components/Indicator/Indicator";
import CopilotStreamController from "./controllers/copilotStreamController";
import "./global.css";
import WorkflowActivityList from "./components/WorkflowActivity";


// types
Expand Down Expand Up @@ -53,6 +54,18 @@ export function App(): React.JSX.Element {
setSelectedIndex(index!=selectedIndex?index:-1);
};

const handleDeSelect = () => {
setSelectedIndex(-1)
};

// Keyboard event handler
const handleKeyPress = (event) => {
// Check if 'Cmd' on MacOS or 'Ctrl' on Windows is pressed along with '\'
if ((event.metaKey || event.ctrlKey) && event.key === '\\') {
handleDeSelect();
}
};

function refreshSnippetList() {
new Pieces.AssetsApi().assetsSnapshot({}).then((assets) => {
// console.log('Response', assets)
Expand All @@ -75,27 +88,44 @@ export function App(): React.JSX.Element {


return (
<div style={{ padding: '10px 20px' }}>
<div style={{ padding: '10px 20px'}}>
<Header isConnected={ !error} />
{error && <div style={{border: '2px solid black',
backgroundColor: '#0e1111',
color: 'red',
minWidth: '1175px',
maxWidth: '1175px',
// minWidth: '1175px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
<div style={{display:'flex',flex:1,flexDirection:'row-reverse'}}>
<div style={{border: '2px solid black',
backgroundColor: '#0e1111',
height: '600px',
minWidth: '250px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
flex:1,
flexDirection: 'column',
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',}}>
<h3 style={{color: 'white', fontWeight: 'normal' }}>Workflow Activity</h3>
<WorkflowActivityList />
</div>
<div style={{
// width: "auto",
border: '2px solid black',
border: '2px solid yellow',
backgroundColor: '#0e1111',
height: '600px',
minWidth: '1175px',
maxWidth: '1175px',
minWidth: '1000px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
flex: 1,
marginRight: '10px',
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',
}}>
<div style={{minHeight: '100%', display: "flex", flexDirection: "column", justifyContent: 'space-between'}}>
Expand All @@ -116,6 +146,20 @@ export function App(): React.JSX.Element {
fontSize: '12px'
}} onClick={refreshSnippetList}>Refresh Snippet List
</button>
<button style={{
maxWidth: 'fit-content',
height: 'fit-content',
marginLeft: '10px',
backgroundColor: "black",
border: '1px solid white',
borderRadius: '5px',
padding: '8px 24px',
color: 'white',
flexWrap: 'nowrap',
cursor: 'pointer',
fontSize: '12px'
}} onClick={handleDeSelect}>DESELECT
</button>
<DeleteAssetButton assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "" )} selectedIndex={selectedIndex} setArray={setArray}/>
</div>

Expand All @@ -131,6 +175,8 @@ export function App(): React.JSX.Element {
}}>
{array.map((item: LocalAsset, index) => (
<div
onKeyDown={handleKeyPress}
tabIndex={0}
key={index}
style={{
margin: '5px',
Expand Down Expand Up @@ -158,23 +204,24 @@ export function App(): React.JSX.Element {

))}
</div>

</div>
<div style={{display: 'flex', flexDirection: 'column', padding: '10px', maxHeight: '90%', alignSelf: 'end'}}>

<div style={{display: 'flex', flexDirection: 'column', padding: '10px', maxHeight: '90%', alignSelf: 'end',marginLeft:'10px'}}>
<h3 style={{color: 'white', fontWeight: 'normal' }}>Create a New Snippet</h3>
<DataTextInput applicationData={applicationData}/>
<RenameAssetInput assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "")}/>

</div>
</div>
</div>

{/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
<div style={{
border: '2px solid black',
backgroundColor: '#0e1111',
height: '600px',
minWidth: '1175px',
maxWidth: '1175px',
// minWidth: '1175px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
Expand Down
33 changes: 33 additions & 0 deletions src/app/components/ActivityCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { TrackedAssetEventIdentifierDescriptionPairs } from '@pieces.app/pieces-os-client';
import * as React from 'react';

interface WorkflowActivity {
name: string;
description: TrackedAssetEventIdentifierDescriptionPairs;
}


const ActivityCard: React.FC<WorkflowActivity> = ({name,description}) => {

function reformatActvityText(text: string){
let _text = "";
for(let i = 0; i < text.length; i++){
if(text[i] == '_'){
_text += " ";
}
else{
_text += text[i];
}
}
return _text+" : ";
}

return (
<div style={{backgroundColor:'#28272C',padding:5,margin:10,borderRadius:10,borderColor:'gray',borderWidth:10}}>
<p style={{color:'white',fontSize:18}}>{reformatActvityText(description.activityAssetReferenced || description.assetAnchorAdded || description.assetAnchorDeleted || description.assetAnchorUpdated || description.assetAnnotationAdded || description.assetAnnotationDeleted || description.assetAnnotationUpdated || description.assetCreated || description.assetCreationFailed || description.assetDeleted || description.assetDescriptionUpdated || description.assetFormatCopied || description.assetFormatDownloaded || description.assetFormatGenericClassificationUpdated || description.assetFormatSpecificClassificationUpdated || description.assetFormatUpdated || description.assetFormatValueEdited || description.assetFormatValueEdited || description.assetHintAdded || description.assetHintDeleted || description.assetHintUpdated || description.assetLinkAdded || description.assetLinkDeleted || description.assetLinkGenerated || description.assetLinkRevoked || description.assetNameUpdated || description.assetPersonAdded || description.assetPersonDeleted || description.assetReferenced || description.assetSensitiveAdded || description.assetSensitiveDeleted || description.assetTagAdded || description.assetTagDeleted || description.assetUpdated || description.assetViewed || description.searchedAssetReferenced || description.suggestedAssetReferenced)} </p>
<p style={{color:'white',fontSize:14}}>{name}</p>
</div>
);
}

export default ActivityCard;
Empty file added src/app/components/Header.tsx
Empty file.
2 changes: 0 additions & 2 deletions src/app/components/Header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
margin-bottom: 1rem;
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
min-width: 1200px;
max-width: 1200px;
}

.header-div h3 {
Expand Down
Empty file.
6 changes: 3 additions & 3 deletions src/app/components/TextInput/TextInput.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/* DataTextInput styles */
.input-name {
max-width: 450px;
max-width: 250px;
margin-bottom: 10px;
}

.textarea-data {
height: 200px;
width: 450px;
width: 250px;
vertical-align: top;
}

Expand All @@ -25,7 +25,7 @@

/* RenameAssetInput styles */
.input-rename {
width: 450px;
width: 250px;
vertical-align: top;
}

Expand Down
52 changes: 52 additions & 0 deletions src/app/components/WorkflowActivity.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import * as Pieces from "@pieces.app/pieces-os-client";
import ActivityCard from './ActivityCard';

interface WorkflowActivity {
id: string;
name: string;
description: Pieces.TrackedAssetEventIdentifierDescriptionPairs;
}

const WorkflowActivityList: React.FC = () => {
const [activities, setActivities] = React.useState<WorkflowActivity[]>([]);

const clearActivities = () => {
setActivities([]);
}

const refreshActivities = (activity: WorkflowActivity) => {
setActivities(prevActivities => [...prevActivities, activity]);
}

React.useEffect(() => {
new Pieces.ActivitiesApi().activitiesSnapshot({}).then((activities) => {
console.log(activities);
clearActivities();
for(let i = 0; i < activities.iterable.length; i++){
if(activities.iterable[i].asset == null){
continue;
}
let _activity : WorkflowActivity ={
id : i.toString(),
name : activities.iterable[i].asset.name,
description : activities.iterable[i].event.asset.identifierDescriptionPair
}
console.log(_activity);
refreshActivities(_activity);
}
})
}, []);

return (
<div style={{overflowY: 'scroll',overflowX:'hidden',msOverflowY:'hidden'}}>
<ul style={{padding:0}}>
{activities.map(activity => (
<ActivityCard key={activity.id} name={activity.name} description={activity.description} />
)).reverse()}
</ul>
</div>
);
};

export default WorkflowActivityList;

0 comments on commit f154681

Please sign in to comment.