Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Policy Playground Layout Updates #87

Merged
merged 14 commits into from
May 25, 2021
Merged

Policy Playground Layout Updates #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c7e8814
Move resource/policy searching to drawer, show the relevant code when…
pickjasmine May 21, 2021
9af075c
Update playground layout to match protos, needs to handle large overf…
pickjasmine May 21, 2021
ee04c1d
Mobile and desktop layouts have appropriate scrolling and code snippe…
pickjasmine May 24, 2021
df985e1
Details in the layout
pickjasmine May 24, 2021
884e41f
fix styling in drawer when searching for policy or resource
pickjasmine May 24, 2021
9174cdc
Formatting, updating tests to reflect changes
pickjasmine May 24, 2021
6bc33f1
Clean up, last minute UI improvements
pickjasmine May 24, 2021
c9741bc
Styling touches, fix flaky test, fix issue with page header not picki…
pickjasmine May 24, 2021
f667971
Update e2e tests to reflect changes in playground
pickjasmine May 24, 2021
4b45e47
Remove unneeded fragments
pickjasmine May 24, 2021
de2656b
Update README gif for playground
pickjasmine May 24, 2021
730a7e1
Fix testId console warning
pickjasmine May 25, 2021
6b41f75
Make code prop optional for code needing to be fetched
pickjasmine May 25, 2021
e8534a1
Don't allow user to resize policy create block, it will grow to meet …
pickjasmine May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ The Policy Playground can be used to evaluate a resource against a policy. This

Once a policy and a resource have been selected, you can evaluate to see how the resource faired against the policy. If a resource fails against a policy, an explanation of the failures will be available to view.

![Policy Playground Demo](./docs/images/PolicyPlaygroundv3.gif)
![Policy Playground Demo](./docs/images/PolicyPlaygroundv4.gif)

### Dark Mode

Expand Down
2 changes: 1 addition & 1 deletion components/Code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const Code = (props) => {
};

Code.propTypes = {
code: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
code: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
language: PropTypes.oneOf(["rego", "json"]).isRequired,
className: PropTypes.string,
};
Expand Down
140 changes: 79 additions & 61 deletions components/playground/PolicySearchAndResults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,13 @@ import Button from "components/Button";
import { createSearchFilter } from "utils/shared-utils";
import { usePaginatedFetch } from "hooks/usePaginatedFetch";
import { PLAYGROUND_SEARCH_PAGE_SIZE } from "utils/constants";
import Icon from "components/Icon";
import { ICON_NAMES } from "utils/icon-utils";
import Drawer from "components/Drawer";

const PolicySearchAndResults = ({ setPolicy, clearEvaluation }) => {
const [policySearch, setPolicySearch] = useState(false);

const [showDrawer, setShowDrawer] = useState(false);
const { state, dispatch } = usePolicies();

const { data, loading, isLastPage, goToNextPage } = usePaginatedFetch(
Expand All @@ -42,70 +45,85 @@ const PolicySearchAndResults = ({ setPolicy, clearEvaluation }) => {
}, [policySearch]);

return (
<div className={styles.searchContainer}>
<PolicySearchBar
onSubmit={(event) => {
event.preventDefault();
setPolicySearch(true);
}}
onChange={() => setPolicySearch(false)}
helpText={
<Button
className={styles.viewAllButton}
buttonType={"text"}
label={"View all policies"}
onClick={() =>
dispatch({
type: policyActions.SET_SEARCH_TERM,
data: "all",
})
<>
<Button
label={"Search for policies"}
buttonType="icon"
onClick={() => setShowDrawer(true)}
className={styles.openSearchButton}
>
<Icon name={ICON_NAMES.SEARCH} size={"large"} />
</Button>
<Drawer isOpen={showDrawer} onClose={() => setShowDrawer(false)}>
<div className={styles.searchContainer}>
<PolicySearchBar
onSubmit={(event) => {
event.preventDefault();
setPolicySearch(true);
}}
onChange={() => setPolicySearch(false)}
helpText={
<Button
className={styles.viewAllButton}
buttonType={"text"}
label={"View all policies"}
onClick={() =>
dispatch({
type: policyActions.SET_SEARCH_TERM,
data: "all",
})
}
/>
}
/>
}
/>
{policySearch && (
<div className={styles.searchResultsContainer}>
<Loading loading={loading} type={"button"}>
{data?.length > 0 ? (
<>
{data.map((result) => (
<div className={`${styles.searchCard}`} key={result.id}>
<div>
<p className={styles.cardHeader}>{result.name}</p>
<p className={styles.cardText}>{result.description}</p>
</div>
<Button
onClick={() => {
setPolicy(result);
setPolicySearch(false);
dispatch({
type: policyActions.SET_SEARCH_TERM,
data: "",
});
}}
buttonType={"text"}
label={"Select Policy"}
className={styles.actionButton}
/>
</div>
))}
{!isLastPage && (
<Button
buttonType="text"
onClick={goToNextPage}
label={"See More Policies"}
className={styles.viewMoreButton}
id={"viewMorePoliciesButton"}
/>
{policySearch && (
<div className={styles.searchResultsContainer}>
<Loading loading={loading} type={"button"}>
{data?.length > 0 ? (
<>
{data.map((result) => (
<div className={`${styles.searchCard}`} key={result.id}>
<div>
<p className={styles.cardHeader}>{result.name}</p>
<p className={styles.cardText}>
{result.description}
</p>
</div>
<Button
onClick={() => {
setPolicy(result);
setPolicySearch(false);
dispatch({
type: policyActions.SET_SEARCH_TERM,
data: "",
});
setShowDrawer(false);
}}
buttonType={"text"}
label={"Select Policy"}
className={styles.actionButton}
/>
</div>
))}
{!isLastPage && (
<Button
buttonType="text"
onClick={goToNextPage}
label={"See More Policies"}
className={styles.viewMoreButton}
id={"viewMorePoliciesButton"}
/>
)}
</>
) : (
<p>{`No policies found matching "${state.searchTerm}"`}</p>
)}
</>
) : (
<p>{`No policies found matching "${state.searchTerm}"`}</p>
)}
</Loading>
</Loading>
</div>
)}
</div>
)}
</div>
</Drawer>
</>
);
};

Expand Down
178 changes: 100 additions & 78 deletions components/playground/ResourceSearchAndResults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,13 @@ import Button from "components/Button";
import { PLAYGROUND_SEARCH_PAGE_SIZE } from "utils/constants";
import ResourceVersion from "components/resources/ResourceVersion";
import LabelWithValue from "components/LabelWithValue";
import Drawer from "components/Drawer";
import Icon from "components/Icon";
import { ICON_NAMES } from "utils/icon-utils";

const ResourceSearchAndResults = ({ setResource, clearEvaluation }) => {
const [resourceSearch, setResourceSearch] = useState(false);
const [showDrawer, setShowDrawer] = useState(false);
const { state, dispatch } = useResources();

const { data, loading, isLastPage, goToNextPage } = usePaginatedFetch(
Expand All @@ -44,92 +48,110 @@ const ResourceSearchAndResults = ({ setResource, clearEvaluation }) => {
}, [resourceSearch]);

return (
<div className={styles.searchContainer}>
<ResourceSearchBar
onSubmit={(event) => {
event.preventDefault();
setResourceSearch(true);
}}
onChange={() => setResourceSearch(false)}
helpText={
<Button
className={styles.viewAllButton}
buttonType={"text"}
label={"View all resources"}
onClick={() =>
dispatch({
type: resourceActions.SET_SEARCH_TERM,
data: "all",
})
<>
<Button
label={"Search for resources"}
buttonType="icon"
onClick={() => setShowDrawer(true)}
className={styles.openSearchButton}
>
<Icon name={ICON_NAMES.SEARCH} size={"large"} />
</Button>
<Drawer isOpen={showDrawer} onClose={() => setShowDrawer(false)}>
<div className={styles.searchContainer}>
<ResourceSearchBar
onSubmit={(event) => {
event.preventDefault();
setResourceSearch(true);
}}
onChange={() => setResourceSearch(false)}
helpText={
<Button
className={styles.viewAllButton}
buttonType={"text"}
label={"View all resources"}
onClick={() =>
dispatch({
type: resourceActions.SET_SEARCH_TERM,
data: "all",
})
}
/>
}
/>
}
/>
{resourceSearch && (
<div className={styles.searchResultsContainer}>
<Loading loading={loading} type={"button"}>
{data?.length > 0 ? (
<>
{data.map((result) => {
const {
resourceName,
resourceVersion,
resourceType,
} = getResourceDetails(result.uri);
{resourceSearch && (
<div className={styles.searchResultsContainer}>
<Loading loading={loading} type={"button"}>
{data?.length > 0 ? (
<>
{data.map((result) => {
const {
resourceName,
resourceVersion,
resourceType,
} = getResourceDetails(result.uri);

return (
<div className={`${styles.searchCard}`} key={result.uri}>
<div>
<p className={styles.cardHeader}>{resourceName}</p>
<LabelWithValue
label={"Version"}
value={<ResourceVersion version={resourceVersion} />}
className={styles.cardText}
/>
<LabelWithValue
label={"Type"}
value={resourceType}
className={styles.cardText}
/>
</div>
return (
<div
className={`${styles.searchCard}`}
key={result.uri}
>
<div>
<p className={styles.cardHeader}>{resourceName}</p>
<LabelWithValue
label={"Version"}
value={
<ResourceVersion version={resourceVersion} />
}
className={styles.cardText}
/>
<LabelWithValue
label={"Type"}
value={resourceType}
className={styles.cardText}
/>
</div>
<Button
onClick={() => {
setResource({
uri: result.uri,
name: resourceName,
version: resourceVersion,
type: resourceType,
});
setResourceSearch(false);
dispatch({
type: resourceActions.SET_SEARCH_TERM,
data: "",
});
setShowDrawer(false);
}}
buttonType={"text"}
label={"Select Resource"}
className={styles.actionButton}
/>
</div>
);
})}
{!isLastPage && (
<Button
onClick={() => {
setResource({
uri: result.uri,
name: resourceName,
version: resourceVersion,
type: resourceType,
});
setResourceSearch(false);
dispatch({
type: resourceActions.SET_SEARCH_TERM,
data: "",
});
}}
buttonType={"text"}
label={"Select Resource"}
className={styles.actionButton}
label={"See More Resources"}
onClick={goToNextPage}
id={"viewMoreResourcesButton"}
className={styles.viewMoreButton}
/>
</div>
);
})}
{!isLastPage && (
<Button
buttonType={"text"}
label={"See More Resources"}
onClick={goToNextPage}
id={"viewMoreResourcesButton"}
className={styles.viewMoreButton}
/>
)}
</>
) : (
<p>{`No resources found matching "${state.searchTerm}"`}</p>
)}
</>
) : (
<p>{`No resources found matching "${state.searchTerm}"`}</p>
)}
</Loading>
</Loading>
</div>
)}
</div>
)}
</div>
</Drawer>
</>
);
};

Expand Down
Loading