marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a way to handle extra apps with default actions

Browse Source
This commit is contained in:
frikky
2022-06-11 23:23:08 +02:00
parent 8b1585b03e
commit 4d146e53e2
7 changed files with 197 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+13
View File
@@ -16,6 +16,7 @@ import Apps from "./views/Apps";
import AppCreator from "./views/AppCreator";
import Dashboard from "./views/Dashboard.jsx";
import DashboardView from "./views/DashboardViews.jsx";
import AdminSetup from "./views/AdminSetup";
import Admin from "./views/Admin";
import Docs from "./views/Docs";
@@ -644,6 +645,18 @@ const App = (message, props) => {
/>
}
/>
<Route
exact
path="/dashboards"
element={
<DashboardView
isLoaded={isLoaded}
isLoggedIn={isLoggedIn}
globalUrl={globalUrl}
{...props}
/>
}
/>
<Route
exact
path="/"
frontend/src/components/ExtraApps.jsx
+27
View File
@@ -0,0 +1,27 @@
// Move this to the backend to be loaded in?
const extraApps = [{
"name": "Cases",
"description": "Allows use of other Case Management apps without knowing how to use them.",
"app_version": "1.0.0",
"app_name": "Cases",
"type": "ACTION",
"large_image": encodeURI('data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M15.6408 8.39233H18.0922V10.0287H15.6408V8.39233ZM0.115234 8.39233H2.56663V10.0287H0.115234V8.39233ZM9.92083 0.21051V2.66506H8.28656V0.21051H9.92083ZM3.31839 2.25596L5.05889 4.00687L3.89856 5.16051L2.15807 3.42596L3.31839 2.25596ZM13.1485 3.99869L14.8808 2.25596L16.0493 3.42596L14.3088 5.16051L13.1485 3.99869ZM9.10369 4.30142C10.404 4.30142 11.651 4.81863 12.5705 5.73926C13.4899 6.65989 14.0065 7.90854 14.0065 9.21051C14.0065 11.0269 13.0178 12.6141 11.5551 13.4651V14.9378C11.5551 15.1548 11.469 15.3629 11.3158 15.5163C11.1625 15.6698 10.9547 15.756 10.738 15.756H7.46943C7.25271 15.756 7.04487 15.6698 6.89163 15.5163C6.73839 15.3629 6.6523 15.1548 6.6523 14.9378V13.4651C5.18963 12.6141 4.2009 11.0269 4.2009 9.21051C4.2009 7.90854 4.71744 6.65989 5.63689 5.73926C6.55635 4.81863 7.80339 4.30142 9.10369 4.30142ZM10.738 16.5741V17.3923C10.738 17.6093 10.6519 17.8174 10.4986 17.9709C10.3454 18.1243 10.1375 18.2105 9.92083 18.2105H8.28656C8.06984 18.2105 7.862 18.1243 7.70876 17.9709C7.55552 17.8174 7.46943 17.6093 7.46943 17.3923V16.5741H10.738ZM8.28656 14.1196H9.92083V12.3769C11.3345 12.0169 12.3722 10.7323 12.3722 9.21051C12.3722 8.34253 12.0279 7.5101 11.4149 6.89634C10.8019 6.28259 9.97056 5.93778 9.10369 5.93778C8.23683 5.93778 7.40546 6.28259 6.79249 6.89634C6.17953 7.5101 5.83516 8.34253 5.83516 9.21051C5.83516 10.7323 6.87292 12.0169 8.28656 12.3769V14.1196Z" /></svg>'),
"template": true,
"actions": [{
"name": "Create Alert",
"description": "Create a ticket",
"parameters": [{
"name": "id",
},
{
"name": "name",
},
{
"name": "description",
"multiline": true,
},
],
}],
}]
export default extraApps
frontend/src/components/ParsedAction.jsx
+110
View File
@@ -1064,6 +1064,8 @@ const ParsedAction = (props) => {
*/
}
console.log("APP: ", selectedApp)
// FIXME: Issue #40 - selectedActionParameters not reset
if (
Object.getOwnPropertyNames(selectedAction).length > 0 &&
@@ -1090,6 +1092,114 @@ const ParsedAction = (props) => {
<b>Parameters</b>
</Button>
</Tooltip>
{selectedAction.template === true && selectedAction.matching_actions !== undefined && selectedAction.matching_actions !== null && selectedAction.matching_actions.length > 0 ?
<div>
<Typography variant="body1">
Select an app you want to use
</Typography>
<Autocomplete
id="template_action_search"
autoHighlight
value={selectedAction}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
color: "white",
},
}}
getOptionLabel={(option) => {
console.log("LABEL: ", option)
if (
option === undefined ||
option === null ||
option.app_name === undefined ||
option.app_name === null
) {
return null;
}
const newname = (
option.app_name.charAt(0).toUpperCase() + option.app_name.substring(1)
).replaceAll("_", " ");
return newname;
}}
options={selectedAction.matching_actions}
fullWidth
style={{
backgroundColor: theme.palette.inputColor,
height: 50,
borderRadius: theme.palette.borderRadius,
}}
onChange={(event, newValue) => {
console.log("SELECT: ", event, newValue)
// Workaround with event lol
//if (newValue !== undefined && newValue !== null) {
// setNewSelectedAction({ target: { value: newValue.name } });
//}
}}
renderOption={(data) => {
var newActionname = data.app_name;
if (
data.label !== undefined &&
data.label !== null &&
data.label.length > 0
) {
newActionname = data.label;
}
const iconInfo = GetIconInfo({ name: data.app_name });
const useIcon = iconInfo.originalIcon;
newActionname = (
newActionname.charAt(0).toUpperCase() +
newActionname.substring(1)
).replaceAll("_", " ");
return (
<div style={{ display: "flex" }}>
<span
style={{
marginRight: 10,
marginTop: "auto",
marginBottom: "auto",
}}
>
{useIcon}
</span>
<span style={{}}>{newActionname}</span>
</div>
);
}}
renderInput={(params) => {
if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
const prefixes = ["Post", "Put", "Patch"]
for (var key in prefixes) {
if (params.inputProps.value.startsWith(prefixes[key])) {
params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
if (params.inputProps.value.length > 1) {
params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
}
break
}
}
}
return (
<TextField
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
}}
{...params}
label="Find App to Translate"
variant="outlined"
/>
);
}}
/>
</div>
: null}
{selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 && hiddenDescription === false ? (
<div
style={{
frontend/src/components/ShuffleCodeEditor.jsx
+3 -3
View File
@@ -451,7 +451,7 @@ const CodeEditor = (props) => {
>
{liquidFilters.map((item, index) => {
return (
<MenuItem onClick={() => {
<MenuItem key={index} onClick={() => {
handleClick(item)
}}>{item.name}</MenuItem>
)
@@ -486,7 +486,7 @@ const CodeEditor = (props) => {
>
{mathFilters.map((item, index) => {
return (
<MenuItem onClick={() => {
<MenuItem key={index} onClick={() => {
handleClick(item)
}}>{item.name}</MenuItem>
)
@@ -521,7 +521,7 @@ const CodeEditor = (props) => {
>
{pythonFilters.map((item, index) => {
return (
<MenuItem onClick={() => {
<MenuItem key={index} onClick={() => {
handleClick(item)
}}>{item.name}</MenuItem>
)
frontend/src/views/AngularWorkflow.jsx
+39 -5
View File
@@ -111,6 +111,7 @@ import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
import ParsedAction from "../components/ParsedAction.jsx";
import PaperComponent from "../components/PaperComponent.jsx"
import ExtraApps from "../components/ExtraApps.jsx"
const surfaceColor = "#27292D";
const inputColor = "#383B40";
@@ -2509,6 +2510,32 @@ const AngularWorkflow = (defaultprops) => {
(a.loop_versions !== null &&
a.loop_versions.includes(curaction.app_version)))
);
if (curaction.template === true) {
//newapps.
const parsedname = curaction.name.replaceAll(" ", "_").toLowerCase()
console.log("FIND AN ACTION AMONG THE APPS THAT MATCHES NAME: ", parsedname)
curaction.matching_actions = []
for (var key in newapps) {
for (var subkey in newapps[key].actions) {
const tmpaction = newapps[key].actions[subkey]
if (tmpaction.name.replaceAll(" ", "_").toLowerCase() === parsedname) {
console.log("MATCH!: ", newapps[key])
curaction.matching_actions.push({
"app_name": newapps[key].name,
"app_version": newapps[key].app_version,
"app_id": newapps[key].id,
"action": tmpaction,
"large_image": newapps[key].large_image,
"app_index": key,
"action_index": subkey,
})
}
}
}
}
if (!curapp || curapp === undefined) {
console.log("APPS: ", newapps)
//alert.error(`App ${curaction.app_name}:${curaction.app_version} not found. Is it activated?`);
@@ -4983,6 +5010,7 @@ const AngularWorkflow = (defaultprops) => {
var thisview = (
<AppView
allApps={apps}
extraApps={ExtraApps}
prioritizedApps={prioritizedApps}
filteredApps={filteredApps}
/>
@@ -5337,7 +5365,7 @@ const AngularWorkflow = (defaultprops) => {
}
// AUTHENTICATION
if (app.authentication.required) {
if (app.authentication !== undefined && app.authentication !== null && app.authentication.required === true) {
console.log("App auth is required!")
// Setup auth here :)
@@ -5462,6 +5490,7 @@ const AngularWorkflow = (defaultprops) => {
var description = ""
if (
app.actions[0].parameters !== undefined &&
app.actions[0].parameters !== null &&
app.actions[0].parameters.length > 0
) {
@@ -5469,6 +5498,8 @@ const AngularWorkflow = (defaultprops) => {
}
if (
app.actions[0].returns !== undefined &&
app.actions[0].returns !== null &&
app.actions[0].returns.example !== undefined &&
app.actions[0].returns.example !== null &&
app.actions[0].returns.example.length > 0
@@ -5524,6 +5555,7 @@ const AngularWorkflow = (defaultprops) => {
: "",
authentication_id: "",
finished: false,
template: app.template === true ? true : false,
};
// FIXME: overwrite category if the ACTION chosen has a different category
@@ -5548,10 +5580,12 @@ const AngularWorkflow = (defaultprops) => {
};
const AppView = (props) => {
const { allApps, prioritizedApps, filteredApps } = props;
const { allApps, prioritizedApps, filteredApps, extraApps } = props;
//extraApps,
const [visibleApps, setVisibleApps] = React.useState(
prioritizedApps.concat(
filteredApps.filter((innerapp) => !internalIds.includes(innerapp.id))
Array.prototype.concat.apply(
prioritizedApps,
filteredApps.filter((innerapp) => !internalIds.includes(innerapp.id)),
)
);
@@ -5841,7 +5875,7 @@ const AngularWorkflow = (defaultprops) => {
runSearch(event.target.value);
}}
/>
{visibleApps.length > 0 ? (
{visibleApps.length > extraApps.length ? (
<div style={appScrollStyle}>
{visibleApps.map((app, index) => {
if (app.invalid) {