Skip to content

Commit

Permalink
Policy Playground Layout Updates (#87)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pickjasmine
pickjasmine authored May 25, 2021
1 parent b56af8f commit 9290032
Show file tree
Hide file tree
Showing 19 changed files with 433 additions and 543 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
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
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
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
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

0 comments on commit 9290032

Please sign in to comment.